HOW TO MASTER

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.

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 in 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, etc. 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 look at creating a Page.

(1) Creating a WordPress Page

In your WordPress Dashboard, select PAGES → Add New.

(If you simply 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.)

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

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.

To avoid importing Microsoft Word’s formatting into the WordPress editor, which doesn’t always play nicely with WordPress formatting, strip away the extraneous formatting in one of two ways:

  • You can either paste your content via the Text Editor (and then switch back to the Visual Editor to style the content).
  • You can use the “Paste as Text” MCE button (see below) to paste plain un-formatted text directly into the Visual Editor.
Master WordPress
The “Paste as Text” button in the Moxiecode Content Editor (MCE) Toolbar

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.

  • Remember, once you’ve created a Page and you want to make it visible on the front-end, you must add the Page to one of your Navigational Menus.

    In your WordPress Dashboard, select APPEARANCE → Menus.

    You’ll be presented with the Menu Dashboard.

    Master WordPress

    1. “Select” the Menu in question (or create a new menu).
    2. Select the new page you’ve published and click “Add to Menu”.
    3. Drag the new page to the position you want it to appear in the Menu.

    Don’t forget to press “Save Menu”.

    PS. Always check your front-end after changing the menu to make sure it looks okay.

(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.

(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.)

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

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:

www.example.com/your-post-title/

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: www.example.com/amazing-keyword-phrase/ .)

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, www.example.com/yourposttitle/ 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

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!

  • The subject of writing SEO-strong content is a comprehensive subject we cover elsewhere.

    Here, I just want to make some quick suggestions about styling your text. This info is applicable to both Posts and Pages.

    Headings

    Aim at including a sub-heading every 400-500 words. This breaks up blocks of text, improving reader-ability.

    From your MCE toolbar, use Heading 2 (H2) for sub-headings and if you need a third generation sub-heading, use H3.

    Blog Posts, Headings and On-page SEO.

    Do NOT use Heading 1 (H1). For good SEO, every Page or Post must have only one H1 header and WordPress correctly makes the Page/Post Title the H1 header by default.

    Paragraphs

    A good online paragraph has no more than 4 to 5 (short) sentences.

    Don’t justify your content. By default, WordPress left-aligns the text and this is best for reader-ability.

    Hyperlinks

    First, highlight the text you want to wrap in a hyperlink. This is called the “anchor text”. Ideally, it should be 2-3 phrases.

    Second, click on the “Insert/edit link” MCE button to add the hyperlink.

    Master WordPress

    This pop up will appear. Click the little gear icon.

    Master WordPress

    This larger pop up will appear.

    Master WordPress

    You can either add the hyperlink directly into the URL field (1) if you know it (don’t forget to get the HTTP or HTTPS protocol correct) or you can search for a page on your website if you’re linking to a webpage on your own website (2).

    For internal links (links to your own webpages), un-check the “Open link in a new tab” checkbox.

    For external links (links to other websites), check the “Open link in a new tab” checkbox.

(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!

PLEASE NOTE

The section below is based on the now old Themify Builder version. A tutorial for the latest release (Themify Builder Version 4) will be made available soon. That said, you can still benefit from this section even if we’ve upgraded you to the latest version, as the essential building components remain the same.

If you have the latest version, you can click the ? (Help) icon in the top toolbar, with the Builder open, to watch some excellent videos on using the new Themify Builder.

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.

Screenshot #8

Mastering WordPress tutorial.

Hover over the the green plus  button in the top of the left hand sidebar and you’ll see all the modules available to drag & drop into the Builder.

Mastering WordPress tutorial.

You can work in the back-end as usual but the great news is that with the Themify Builder, you can now work on the front-end … and see your changes in real time.

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.

So, let’s introduce you to the Themify Builder using the front-end display.

Screenshot #9

Mastering WordPress tutorial.
Okay, granted. That might look all sorts of complicated but hang in there, we’ll show you what you need to know. (You’ll learn the rest over time.)

Getting Started: Editing via Themify

In most cases, using the default WordPress Page and Post Editor might still be the quickest option especially for those who are time poor.

That said, to make edits to your website, you’ll need to have a working knowledge of the Themify Builder. So let’s start here: making edits to the content in the Themify Builder.

We’re going to use the front-end from this point forward, as the back-end works the same way. (Plus, the front-end is more fun!)

Okay, on the front-end of your site, you have two options to open the Themify Builder. Simply click “Turn on Builder” in the toolbar link or in the link below the text itself.

Screenshot #10

Mastering WordPress tutorial.

The Themify Builder will open and there two important “building components” to understand.

1 = (Grey) Row Segments

The grey row segments are the “building blocks” of the webpage.

2 = (Blue) Modules

The blue modules—Text Modules, Image Modules and the like—are like the “bricks”, and they are dragged into the grey row segments to build each row as required.

Screenshot #11

Mastering WordPress tutorial.

As you’ll notice above, both the (grey) row segment and the (blue) module can be edited and styled via the little icon links. (In the above case, we’ve got a blue Image Module inside the Row Segment.)

To change the Image, you’d simply click the little “Edit” (pencil) icon on the (blue) Image Module.

Let’s have a closer look…

Screenshot #12

Mastering WordPress tutorial.

You’ll see that the module is clearly identified as an “Image Module” in the top left-hand corner.

All the image edit/styling tools are positioned in the top right-hand corner. When we click the little “Edit” (pencil) icon, this pop-up appears:

Screenshot #13

Mastering WordPress tutorial.

You’ll notice that there are plenty of edit and styling options available. To keep things simple here, to change the image, you’d click the “Browse Library” link to open the Media Library—where you can select an image in the Library or upload a new image from your computer.

Yes, this is a third way of adding images to your website. The only difference here is that you’re now using the Themify Builder not the more basic default WordPress Editor.

Okay, let’s look at how you’d edit text

With the Themify Builder turned on, simply hover over the Text Module (again, clearly indicated as such), and click the “Edit” (pencil) icon.

Screenshot #14

Mastering WordPress tutorial.

The following pop-up will appear … and you’ll notice that it’s simply a version of the WordPress Editor for you to use.

Screenshot #15

Mastering WordPress tutorial.

Again, there are multiple edit and styling options but we’re simply showing you how easy it is to edit text within the Themify Builder.

When you’re finished making the edits you require, simply click the orange “DONE” button to close the module and then click the orange “SAVE” button in the top right-hand corner to save your edits.

Wait for the saving “spinner” to finish with a tick, and then click the little “X” to close the Builder.

Screenshot #16

Mastering WordPress tutorial.

If you want to add Modules, all you need to do is hover over the green square in the top left-hand corner of the Builder, and all the modules available will slide out for you.

Screenshot #17

Mastering WordPress tutorial.

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.

But before you go play, watch the video below to see all the Themify Builder can do.

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.