The WordPress Editor

Previously you’ve worked on three tabs of the WP Admin sidebar: Appearance, Users and Settings. On this lesson, you’re going to work on two more:

  • Posts: which grants you access to the WP Editor for posts
  • Pages: the same, but for pages

You will also take a peek at a third tab, “Media”, so you can begin to get familiar with it.


The WordPress Editor is where you’ll write your content, such us pages (static content) and posts (dynamic content).

It is where, after having worked on a “final draft” offline, you’ll come to work on the technical aspects of your posts, such us: adding categories and tags, the excerpt, the featured image and – among other things – where you work on your SEO Readability and score.

The WP Editor for pages and the one for posts, as we’ll see in detail – differ a little bit. (Check out these slides and see if you can spot the difference 😉)

Its interface is split in three parts; we’re going to unveil them from the top.

  • A top menu (same on pages and posts)
  • A content area (idem)
  • A sidebar (where we’ll spot two differences)

WP Editor’s Top Menu

From the left:

The Block Inserter opens a list of all the blocks available, so you can add them to the “Content Area”.

The Document Overview, gives you two lists:

  • The List View, lets you see all of the blocks that are on the page / post. It is useful for navigating to different blocks.
  • The Outline, shows the title, headings, number of characters, and the word count on the page.

On the right, you can open and close the sidebar menu, and find more tools, which we’ll see in a bit.

WP Editor’s Content Area

It is where you create, with “blocks.” When you simply begin writing, you’ll be automatically creating a “Paragraph Block”. Then, you can add more blocks, such us an “Image Block”, a “Quote Block”, etc.

To add a different block you can type a slash that will open a dropdown (of the latest blocks you’ve used), or open the “Block inserter”.

WP Editor’s Sidebar

Settings’ Tabs

As you’ll see in the image below, the sidebar has two tabs:

  • the first one controls the settings of your page / post;
  • the second, controls the settings of the Block you’re working with (for instance, a “Paragraph Block”, a “Quote Block”, etc) so that you can change their style (font family, colors, font size, etc)

The Difference Between Pages and Posts

There is one important thing to bear in mind regarding this sidebar: it differs on two things whether you’re at the page editor or the post editor:

  • Pages do not have categories nor tags, and they can be hierarchal.
  • Posts have categories and tags, and they cannot be hierarchal.

Learning the whole interface, can take you a while; and it shouldn’t worry you. What matters is to know where the basic tools we saw are.

So, practice with calm. Set a timer each time you’re going to try things out to avoid procrastinating.😉

Task 1: Create Two Pages

Go to Pages > All Pages, and change the view as you did before; from the upper right corner, choose “Classic View”.

First, create your “About” Page:

  1. Create a new page for the text you’ve written regarding your blog and name it “About”
  2. Find a quote that has inspired you, and add it using a Quote Block
  3. Publish your page

Please note: the pages and posts you publish, can be reverted to “Draft”. During this guide, publish everything so that you can see how your blog is going to look like.

Then, create your “About Me” Page

  1. Create a new page for the text you’ve written regarding who you are and name it “About Me”
  2. Select a photo of you, and add it using an Image Block. Edit the “alt” description of this image.
  3. Search for the “Social Icons Block”, and add your social media links
  4. Publish your page

Discover

the “Media” Tab

From your WP Admin, go to the tab “Media”, and see how your image has been uploaded.

  1. Change the view: Click on “View” and then on “Classic View”
  2. Select the “list view” (first icon before the “All Media Items” dropdown menu)

Since you’ve uploaded your image from the editor, it will appear as “uploaded to” that page. If you upload an image from the Media panel, it won’t appear as such. Adding your images from the editor gives you more control to eventually know where you used them.

You can edit its caption, description and more.

Task 2: Create Your First Post

Go to Posts > All Posts, and change the view as you did before; from the upper right corner, choose “Classic View”.

  1. Create a new post for one of the copies you’ve written
  2. Assign to it one category, and five (5) tags
  3. Write the excerpt
  4. Add a featured image
  5. Edit: Make sure your post is following all the SEO Rules (if possible)
  6. Regarding the SEO, we’re adding three more things (if possible, in the copy you’re working):
    • Add your keyphrase in the slug
    • Add an “Internal Link” (a link to something in your blog, such us one of your pages)
    • Add an “External Link” (a link to another blog or website)
  7. Publish your post.

Take a Peek: In the sidebar, under “Categories” and “Tags”, you’ll see you can choose from the ones you’ve created, or create new ones.

If you need more help, check out these resources:

Task 3: Editing Tags

  1. Go to Posts > Tags, and edit the tags you’ve created by adding a description.
  2. Go to Posts > All Posts, and see how your list is going to look like
  3. From the upper right corner, click on “Screen Options”, and see what columns you can add or remove (You can change this as many times as you wish)

Discover

the “Archives” Pages

There is something that happens automatically when you create a category or tag: a new page is created at your blog.

For every category and tag you create, WordPress creates an “Archive” page, one that will show a list of posts that have been published.

Go to Posts > Categories, and click on the category of the post you’ve publish. An “archive” page of that category will open. 

You can check how the image, excerpt and etc. looks like, which is something that will definitely look different using another theme. 

Find at WordPress a full explanation of the interface, and a complete tutorial of the WordPress Editor

back to top