HOW TO MASTER
WordPress & Themify
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.
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…
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.
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:
- Creating Pages,
- Creating Posts, and
- Adding Images.
You’ll find them in the Dashboard Menu:
Page vs. Post
“Hang on, what’s the difference between Posts and Pages?” I hear you ask.
A 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?
A 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:
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.
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.
(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:
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.
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.
Your Media Library will open for you.
You can either upload a new image or choose an image already in your Media Library.
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…
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.
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).
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.
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.
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.
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.
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.
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…
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:
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.
The following pop-up will appear … and you’ll notice that it’s simply a version of the WordPress Editor for you to use.
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.
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.
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.
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.