Adding a Page in WordPress

Pages in WordPress allow you to communicate information on your site.  They are very similar to posts but are used for static information, which means information that rarely changes.  Adding a page to your site is a pretty easy process (if only drafting it was that easy.)  Let’s get started and take a look at how we add a site.

The Main Editor

First, you need to log into your administrator panel.  On the left will be a set of menus.  Each site will look a little different, depending on your theme and your plug-in.  Look for one that says, crazy enough, “Pages”.

WordPress Side Menu With Pages Portion Highlighted

Hovering over that will open up an expanded menu.  You can either see all the posts (for example if you wanted to edit them) or you can add a new page.

 

 

 

WordPress Side Menu with Pages Portion ExpandedAdd new will open up the page editor.  As I go through this, I use the Classic Editor on this site.  Newer versions of WordPress use something called a Block Editor. It’s a bit like a Ford versus Chevy debate but the easiest way to think about it is that the Classic Editor works a lot like Microsoft Word, Google Docs,or other WYSIWYG editors (that’s a not so easy acronym for What You See is What You Get.)  I find it better for doing text-based posts and pages.  The block editor, in my opinion, is far less intuitive but far more powerful for creating pages and posts that are more graphical in nature.  They both work and you can even change them out as needed.  The Classic Editor is available as a plug-in and you can set it up so that you can turn it on and off.  We usually install it on most of our sites but mostly because it makes more sense for our customers.  We’ll cover the Block Editor in more detail later.

Okay, back to our discussion. In the middle of the page is the main part of the editor.  Let’s take a look there first.

Sample Page Editing Interface

At the top is the Page Title box.  This is important.  The title not only communicates what you’re telling your reader, it’s also used for Search Engine Optimization and ideally should tie to the keywords that you’re trying to write about or at least draw the reader’s attention.  The title will also create the URL for the site (depending on your Permalinks settings).  Your URL should also have keywords in it and that can be edited on the next line.  Be careful about changing an established URL as Google won’t likely see that it’s the same old page (which can sometimes be a benefit.)  If you don’t see the URL, no worries, make sure you have set the title.  Try using the Save Draft button on the right to get it to show up.  In the block editor, just to give you some reference, these settings are on the sidebar.

Now we move into the meat of the page, which is the editor.  This is where you type your content.  It works a lot like Microsoft Word.  Hovering over any button will tell you what that button does.  There is a button right above it that will let you add media (videos, images, etc.)  We’ll cover that in more detail later, but know that left-clicking on the image will give you some ways to format your image, such as to the left of the text, to the right of it, surrounded by text.  Here are a few recommendations that might be a bit different than what you’re used to

  • Make sure to use the styles in the upper left-hand box.  Use headings, paragraphs, etc.  This lets you change the format for your whole site at once and cleanly if you change things like your font.  Otherwise, you can get some unexpected results.
  • If you paste in content from Word or another editor, you can.  However, I’d suggest using the Paste as Text button.  Otherwise, it will keep the formatting from the original document.  That sounds great until you realize that your site uses Arial but Word was using Times New Roman and you can’t figure out why it looks weird.    It’s easier, especially later, to just paste it as plain text and reformat it within WordPress.Paste as Text Button
  • If you don’t want to have the distraction of the sidebars, you can widen the editor to have it distraction-free, this can be pretty handy.  This button is in the upper right-hand corner.Distraction Free Writing Mode Button

Also, you may have some extra buttons depending on your theme or plug-ins.  You may also have some extra options in the main section too.  For example, Yoast SEO is a common plug-in that adds more content to the middle of the screen.  We may cover some of those later but we’ll just stick with the main stuff for now.  That’s enough.

Editing the HTML

Even though it doesn’t feel like it in this screen, this is still a webpage and is actually controlled by the same HTML that controls any webpage.  You can edit the HTML here too.  To do that, you change the tab in the upper right-hand corner.  Change the selection from visual to Text and you can see the HTML markup.  A couple of warnings: If you’re trying to edit a page and the formatting doesn’t seem to be changing, see if you’re in Text mode.  The other big thing here is to be careful because editing the HTML can have some unexpected, and undesirable, results.

Visuel-Text Tab in WordPress Editor

The Text selection will change the editor to show the HTML.

HTML Editor in WordPress

The Right Sidebar

On the right of the screen are a variety of extra options.  Again, your mileage may vary and the block editor will change things up.  There are a series of panes for different functionality.  If you want to shrink down a panel, there’s an arrow in the upper right-hand corner.  Up Arrow on Right hand corner of editing panes

Publish Pane

The Publishing Pane

You may want not want to publish your page right away.  Perhaps it’s not done, or it’s not time yet, or your business partner needs to review it.  There could be any number of reasons.  This pane lets you do that.  These are some really useful functions.  Let’s check them out.

  • The Save Draft function is pretty obvious.  It saves your page without actually publishing it.  The cool thing is that it saves different versions and you can get back at them in the Revisions section.  This opens a page allowing you to compare different revisions to see what has changed and even restore an older version when your three-year-old practices their keyboarding skills.

Status Dropdown for Pages

There is a dropdown under that allowing you to change the status of the page, including if you have published it already and want to take it back to a draft.  Just change the dropdown and press OK.

In the upper right-hand corner is the Preview button.  This is really handy!  It lets you see what your page actually looks like.  Pro-tip, while you’re working on your page, once you hit preview it will open into another tab.  Keep that tab open because anytime you want to see your page again, refreshing the Preview tab will update it with the new content.

You also have the option to schedule your page and when it goes live.  This can be great to prepare a page but you don’t want it out there yet.  In the bottom is a publish immediately section.  Press the edit and it expands for a new view.  It has a calendar and a time next to it.  Your page will go live at that time.  Really handy.

Scheduling Pages and Posts

Page Attributes

Page Atrributes

This section is pretty easy but it helps you organize your pages.  For example, if you had a page of Cars, you could create a Ford page that had the cars page as a parent.  The order helps you control how the page shows up compared to other pages with the same parent page.  So if this is the Ford page but you’ll also have Chevy, Tesla, and Dodge but you’re a Ford fan, you might leave this at 0 and then put Dodge at 5, for example.

You can change the parent at any time but that could impact your SEO because it will change the link to the page.  So, in the above case if the site was www.mysite.com/mypage and you change the parent to Cars then the URL will become www.mysite.com/cars/mypage  This affects how it shows up to Google.  It’s good to think through your organization before you start your pages.

Featured Image

Under that is the featured image box.  Exactly how it shows up depends on your theme.  It’s not required, but it can also show up in various feeds or previews, such as in Google or in Facebook, so this can help with appeal and marketing.  A good size is 1200×628 and it’s best to save it as a jpg file.  These files have a decent appearance with good compression.  Images on websites are tricky.  You want them because they add appeal to your site but at the same time, they slow down loading time which impacts your search results and the user experience.  You can simply upload the image at the link there using either something from your media library or a new file that you upload.  Try to use a different image for each page and post.

The Block Editor – A Quick Overview

I’ve mentioned the block editor a few times.  This isn’t a tutorial, but more of a familiarization.  It can be really handy for a more visual feel to a site but it’s not as intuitive (at least in my opinion.)  Here are a few items to get you started though.

Block Editor Sample

This is the same sample page that we’ve been talking about.  Each place where the style, or image, or just about anything else changes is a separate block and can be edited that way.  You can add or delete blocks before and after the text and each block can have different effects.   It is a much cleaner feel, basically defaulting to distraction-free mode.  Menus are at the top and buried within each block.

There is a sidebar with some of the functionality.  At the top of the sidebar, you have options to switch back and forth between settings for the document or settings for the block.  As with other menus, some specifics may change based on plug-ins or context.

Doc Block Top of Sidebar

[convertkit form=1378102]

Document Menu

Block Editor Document Sidebar

This may look familiar.  It’s basically the same options as you saw in the class editor, just presented a bit differently.  Other than that, everything works pretty much the same.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Block Menu

The specifics of the block menu will change based on the type of block and plug-ins.  Here’s a sample of the paragraph menu.

Paragraphy Block Menu

 

Some of these are pretty self-explanatory. You can change the style options in here.  Other cool things you can do, that aren’t as easy in the classic editor, are that you can easily make color changes for your block and you can change the CSS class.  CSS is a Cascading Style Sheet and it’s a way of styling how things look for a website.  If you’ve ever had a nice-looking website load and look like a jumble of text, there was something wrong in loading the CSS.

Giving you a full overview of CSS is way behind the scope of this post and much of it is beyond what we can teach you in general, but here are some of the basics.   You can do things like give paragraphs (or headings, etc.) a class, or a designation to help style them.  So, let’s say we want some of our text to have white text on a blue background if we call  “bluebell” we could do something like
.bluebell{
background:blue;
color:white;
}

and the text would look like this. It’s amazing the things that CSS can do for you.  Once you’ve defined this class, you can use it in any block or text throughout your site.  (There’s a bit more to it, but not much.  You have to save it in the right place.)

This isn’t meant to be a complete view of the block editor, we’ll do more later.  I just wanted to give you a quick overview so you at least have seen it.

Wrapping Things Up

Creating new pages is pretty easy.  You can do some cool things and we will cover those one at a time later on but this gets you started.

 

 

 

17279

Stay Up on WordPress

We send out periodic updates on WordPress hints and tips, security practices and deals.  Sign up now and we'll give you a special gift.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top