Skip to content


WordPress & Themify

Mr Bubbles from SEO WEB Designs.

Hey There!

Like most things, using WordPress is a cinch when you know how it works. In this tutorial, I’m going to help you get started with WordPress and I’m going to introduce you to the Themify Builder—the tool we use to get the most out of WordPress.

So, two things: WordPress and Themify.

Got it? Good.

As Yoda once averred: “A journey of a thousand miles begins with a single step.” (Actually, it wasn’t Yoda who said that, but the Chinese philosopher, Lao Tzu).

So, on your pilgrimage to master WordPress, let’s begin young Padawan.

This tutorial is best viewed on a desktop or tablet.

Looking for something a little more basic?

The below tutorial shows screenshots from the WordPress Classic Editor. For a more basic explanation of creating new posts and screenshots from the WordPress Block Editor, please click the link below.

Hello WordPress!

Okay, first a quick distinction between two important terms: front-end and back-end.

The front-end of your website is that which is publicly visible to viewers. The shiny, pretty version.

The site’s back-end is that which is only visible to you, also called your WordPress Dashboard.

And here’s what the back-end looks like when first installed…

Screenshot #1

Mastering WordPress tutorial.

Out of the box, WordPress is just an empty shell.

Your website’s name is located in the top LEFT-HAND corner, and you can click to view the front-end from there.

Your personal username is found in the top RIGHT-HAND corner, and your WordPress Dashboard’s navigational menu runs down the LEFT-HAND sidebar.

Got it? Good. This WordPress stuff is easy.

3 Essentials: Pages, Posts & Images

At this stage, both the front-end and back-end look rather bland and boring. Not very pretty. However, the website is brought to life through the build itself.

With your brand’s colour scheme, typography, content and images, and a mix of sass and swagger (read: plugins and coding), the front-end comes alive with personality.

Compare your WordPress Dashboard to what you see above in Screenshot #1 and you’ll quickly realise that we’ve added a lot more to it.

Mr Bubbles from SEO WEB Designs.
Hey! Listen. Even if you’re familiar with WordPress, I suggest you read this tut. You’ll pick up something new and helpful.

Now, with the website build complete and all the settings configured, there’s not much you have to worry about.

However, to add or edit content on the site, you’ll need to master THREE tasks:

  1. Creating Pages,
  2. Creating Posts, and
  3. Adding Images.

You’ll find them in the Dashboard Menu:

Screenshot #2

Mastering WordPress tutorial.

Page vs. Post

“Hang on, what’s the difference between Posts and Pages?” I hear you ask.

Good question.

Post is a webpage that forms part of your blogging component.

When you publish a Post, it becomes immediately visible on the front-end—accessed via your blog thread (also called your blog archive). Through posts, you can add regular, fresh content to your site. In a word, dynamic content.

Quickly have a look at what the blog thread looks like by viewing our amazing blog 😉 . (Don’t worry. It will open in a new tab; you won’t lose your place here.)

It’s a collection (or thread or archive) of all the posts on our site. It displays a featured image, a title, a short excerpt and a “read more” link to each blog post. Cool hey?

So, what’s a Page then?

Page is a webpage that forms part of the main structure of your site (distinct from your blog).

Pages include the Home page, the About page, the Contact page, and the like. Once created, this is content that rarely changes (aside from a few edits or updates now and then)—which is why it’s often called static content.

Now, when you publish a Page, it must be added via one of your custom menus to become visible on the front-end. Yes, it’s accessible if someone knows the direct link, but it only becomes visible when added via the website’s menu links. (We’ll show you how to do that soon.)

Okay, let’s first look at creating a Page.

(1) Creating a WordPress Page

In your WordPress Dashboard, select PAGES → Add New.

Or you can also click on Pages in the Dashboard Menu. You’ll be taken to the Pages Dashboard where you’ll see a list of your pages. You can then click the “Add New” button at the top of the page.

Either way, you’ll be presented with the following:

Screenshot #3

Mastering WordPress tutorial.

From the above screenshot, you’ll see that there are three parts to consider.

  1. Page Title & Permalink 
  2. Page Meta Data 
  3. Page Content Editor 

Let’s have a look at each in turn.

Mr Bubbles from SEO WEB Designs.
Hey! Don’t tune out. This isn’t the most exciting stuff in the world. But hang in there. Do it well the first time and you won’t need to do it again.

Screenshot #3.3

Mastering WordPress tutorial.

3. Page Content Editor

First, the editor offers two editing options.

  • The Visual Editor is the default option and is what you see in front of you. Using the Editor’s Moxiecode Content Editor (MCE) buttons, you can style your content.
  • The Text Editor is for those who know how to use HTML code. To enable the Text Editor, simply click the Text tab.

Okay, you can either type straight into the Visual Editor or you can draft your content in say, Microsoft Word and paste the content into the editor.

Now what?

Well, use the MCE toolbar to style your text as required. When you’re finished, preview your draft and when you’re happy, hit “publish”.

We’ll talk a little more about styling tips in the Content Editor section of Creating WordPress Posts below, but let’s quickly show you how to add a Page to one of your website’s Navigation Menus.

(2) Creating a WordPress Post

WordPress Posts follow the same layout as WordPress Pages. There are a few extra things to note. 

In your WordPress Dashboard, select POSTS → Add New.

Or if you simply click on Posts in the Dashboard Menu, you’ll be taken to the Posts Dashboard where you’ll see a list of your posts. You can then click the “Add New” button at the top of the webpage.

Either way, you’ll be presented with the following:

Screenshot #4

Mastering WordPress tutorial.
Look familiar? Yep. The Posts layout is similar to the Pages layout.

From the screenshot above, you’ll again see that there are three parts to consider…

  1. Post Title & Permalink 
  2. Post Meta Data 
  3. Post Content Editor 

Screenshot #4.1

Mastering WordPress tutorial.

1. Post Title & Permalink

Again, every Post must have a Post Title—a distinguishable name. For Posts, however, it should be a strong headline and it typically consists of five to eight words. (We discuss the importance of the Post Title in terms of SEO in, among others, this article: On-Page SEO: 10 Key Metrics for Topical Posts.)

Again, once you’ve typed your Post Title into the “Enter title here” field, WordPress will automatically generate a permalink for you.

Recall that a permalink is the “permanent link” or URL of a webpage. It will include your domain name and the Post Title, something like this:

What’s the highlighted part of the permalink called? Yep, the slug.

Once the permalink is generated, you can edit the slug if required. Again recall that it should always adequately reflect the post’s title and content. Typically, it’s good practice to edit the slug to about four to five words made up of the keyword phrase and a modifier or two. (A modifier is a word, typically an adjective, that makes the permalink unique. For example, the word “amazing” modifies the keyword phrase in this URL: .)

You can remove any “stop words” such as a, an, for, the, on, and such like. Again, the slug is separated by dashes for easier reading.

Yep, is not easy on the eyes.

Remember, the permalink is the most important part a webpage, serving as the online address.

I know I’m repeating myself but this is important. Once the post is published, you can change the content, you can even change the Post Title, but you should avoid changing the permalink. Yes, it can be done, but it requires setting up a redirect (from the old permalink to the new one) to prevent broken links.

Okay, so that’s the first part to consider. Let’s go on to the second part.

Screenshot #4.3

Mastering WordPress tutorial.

3. Post Content Editor

Like Pages, the Post editor offers the same two editing options: The Visual Editor and the Text Editor.

Again, you can either type straight into the Visual Editor or you can draft your content on say, Microsoft Word and paste the content into the editor. To strip out foreign formatting, remember to paste your text via the Text Editor or use the “Paste as Text” MCE button to paste plain text directly into the Visual Editor.

Master WordPress

You’ve got this!

(3) Adding WordPress Images

There are two ways to add WordPress Images. You can either add images directly into the Media Library as follows:

Via your WordPress Dashboard, select MEDIA → Add New.

(If you simply click on Media in the Dashboard Menu, you’ll be taken to the Media Library where you’ll see a list of your images. You can then click the “Add New” button at the top of the webpage.)

More often than not, you’ll add an image while creating a WordPress Page or Post.

To do this, simply click the “Add Media” button while drafting your content in the Content Editor.

Easy as.

Screenshot #5

Mastering WordPress tutorial.

Your Media Library will open for you.

You can either upload a new image or choose an image already in your Media Library.

Screenshot #6

Mastering WordPress tutorial.

Follow the prompts and upload an image from your computer.

Once you’ve done that, you’ll see the image in the Media Library, and you’ll see the image meta data in the right-hand sidebar.

For good SEO, get into the following habit…

Screenshot #7

Mastering WordPress tutorial.

First, optimise the image on your computer BEFORE you upload it to WordPress. This refers to correctly sizing the image and choosing a good label for the Image Name.

Correctly sizing images for web is a huge subject and we won’t cover it here. We urge you to see our article on the subject of Image Optimisation, but generally speaking:

  • Featured images should be 1200px by 630px (and less than 400KB)
  • In-content images should be no wider than 300px (and less than 200KB)

BTW, you don’t need Photoshop to resize your images. See our article, Resizing Images When You Don’t Have Photoshop.

Choosing a good Image Name is simple. Make sure you include the keyword phrase, a modifier and your business/brand name: For instance, we might use “Amazing Keyword Phrase, SEO WEB Designs”.

Now, when you upload the image to WordPress, the Image Name will automatically populate to the Image Title field. Yay! See (1) above in the screenshot.

Now, fill into the Alt Text field (2). The what?

The Alt Text field is text that will appear in place of the image should a device’s image reader be out of date. It is also the text used in devices for the visually impaired, and it’s used by search engines to determine what an image is, since search engines can’t “see” images but can “read” text.

The Alt Text field should be a short, punctuated sentence, and ideally, it should describe the image. For example, we may say something like, “Image of an amazing keyword phrase.”

Finally, you’ll see in the screenshot above that you can adjust image Display Settings in terms of Alignment and Size (3). Typically, you’ll select “None” for the “Link To” field.

Hello Themify!

Okay, first let’s answer a question. Why do we need Themify?

WordPress is a great Content Management System and at its heart, WordPress is a blogging platform. Very strong on content and the best in the business for SEO. But, by itself, it’s a little limited in terms of design and customisation.

So, we have two options. On the one hand, we could do some major coding to take WordPress to the next level in design. However, this isn’t a user-friendly option for most of our clients, as it would require our clients learning how to write and edit code (or forever being dependent on us).

Mr Bubbles from SEO WEB Designs.
You missed me, didn’t you? All I want to say is this: you’ve sludged through the gruel … uh, the gruel-ling stuff. Well played. The rest is much more exciting.

On the other hand, we could use Themify, software that integrates into WordPress to extend its design functionality. With Themify’s ingenious Drag & Drop Builder, very little coding is needed. (Some coding is needed at a global site-wide level but not at a local Page or Post level.)

It goes without saying that Themify enables anyone to extend WordPress’s functionality, and is the obvious choice between the two options.

Front-End Editing: Yay!

You may recall that we introduced you to two important terms right at the beginning: the front-end and back-end?

Yep, the front-end is that which is publicly visible to viewers. The shiny, pretty version. And yep, the site’s back-end is that which is only visible to you. Your WordPress Dashboard.

Well, those words are going to take on new meaning with Themify. Why? Because you can edit or create content on both the back-end and front-end of your site. Yes, with the default WordPress Editor you’ve seen up until now, only working on the back-end was possible. With Themify, you can work on the front-end and see the edits you make in real time.

Okay, enough waffle. The below video will get you into the groove.

Builder Basics [VIDEO]

Prefer screenshots and text? Check out this tutorial on How to Master Themify.

I suggest you don’t experiment on any existing pages we’ve created for you. It’s not difficult to make a mess 🙂 Rather, create a new page and go wild.

In fact, if you go to your Pages Dashboard, you’ll see we’ve created two pages for you. Entitled Test Page and Testing Page, you’ll be able to play on these pages while you “cut your Themify teeth”.

And seriously, the best way to learn how to use the Builder is to play with the Builder.

Now What?

Am I done yet?

Nearly. You’ve mastered creating Posts and Pages, adding images and editing via the Themify Builder.

Now, to maintain your WordPress website, there are few more skills to learn. These largely involve keeping your software backed up and up-to-date.

So, head over there and learn how to Maintain WordPress.