HOW TO MASTER WORDPRESS
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 at a basic but operational level.
Ready for this?
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 our blog thread (also called a blog archive). Through posts, you can add regular, fresh content to the site. In a word, dynamic content.
Quickly have a look at what the blog thread looks like on 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 the site (distinct from the 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 our 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. (I recommend first drafting your content in Microsoft Word and doing a few rounds of revision before adding your content to the site.)
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 (recommended) 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. I recommend checking out Craig’s comprehensive article entitled Image Optimisation: Image Sizing & Page Speed [ULTIMATE GUIDE], but you can also cheat by utilising our Optimising Images, Cheat Sheet on this site.
BTW, you don’t need Photoshop to resize your images. See Craig’s 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.