If you have been following along in my How To Start A Blog series, then you are now the proud owner of a WordPress blog! Congratulations!
If you’ve never used WordPress before, or you’re new to blogging, it may feel like you’ve entered a whole new world. A world that has its own secret language.
Which is why I want to make it super easy for you to navigate your new world.
In this post, and the next, I’m going to go over the elements of a WordPress blog.
One of the things I love about WordPress is that it is quite sophisticated. There are infinite design possibilities. You can make your blog look pretty much any way that you want.
Because of that design flexibility, no two blogs are alike.
However, every WordPress blog has the same basic elements. And that’s what we’re going to take a closer look at.
The Front End VS Back End Of A WordPress Blog
There are two main parts to your new WordPress blog. There is the front end and the back end.
The Front End Of Your Blog
The front end of your blog is the public view. It’s what your visitors see when they land on your site.
To get to any blog on the web, type the URL of the blog into your web browser (ie. chrome, firefox, safari, internet explorer).
In the photo below you can see that I have entered the URL for my blog in Google Chrome’s browser bar.
When your domain is entered into the address bar of a browser, a visitor will end up on the front page (or home page) of your blog.
The image you see below is the top section of the front page of my blog.
Your home page can be as short or as long as you want.
I’ll talk more about home pages a little later in this post.
Pages vs Posts
There are two types of content on a WordPress blog. Pages and posts.
Pages contain static content that you create for your blog. An example of a page would be an about page, a start here page or a contact page. You create the content once and then it stays the same until you update it.
Posts are the articles that you create for your blog. When you publish a post to your blog, it will appear on its own web page.
What makes a blog a blog, is that it has a recent posts page. Sometimes called a blog index page. Your posts will all appear on a recent posts page in reverse chronological order. In other words with the most recent posts at the top.
Here is an example of a recent posts page. On the image below you can see an excerpt of the three most recent posts. The excerpt includes an image, the post title and a sampling of the text.
When you click on the title, image or “read more” link, you are redirected to the web page for that blog post as shown in the image below. And it’s on this web page that you can read the contents of the whole post.
Whether you create a page or a post for your blog – when it’s published it becomes a web page.
Your blog is basically made up of a whole bunch of web pages. And each of these pages has it’s own unique web address.
The web address of any given page on your blog will always start with your domain.
For example, the web address (URL) of your contact page will likely look something like this: https://yourdomain.com/contact. As you can see the main domain address and the page name are both included in the address, separated by a forward slash. This is the standard format of all the web pages on your blog.
The Back-End Of Your Blog
The back-end of your blog is called the admin area (or administrative area). You are the only one who can see it, and only when you are logged into your blog.
Every time you log into your blog, you will be taken to a page called your WordPress Dashboard. It will look something like this:
Now, this is a pretty bare-bones dashboard because this screenshot is from a brand new blog.
As you begin working on building out your blog, what you see on your dashboard will change.
I’ll be diving deeper into the WordPress dashboard in my next post. For now, this post is all about the front end of the site.
A Tour Of The Front-End Of A WordPress Blog
As I mentioned earlier, when someone visits your main URL (https://yourdomain.com), they will be taken to the front page of your blog. The front page is also known as your home page.
For most blogs, the home page is either a “static” page or the recent posts page.
A static page displays whatever content the blogger wants to be shown. The recent posts page displays the most recent posts, in reverse chronological order.
Below are a few examples of blogs with a static home page (note that you are only seeing a portion of the home page).
The first example comes from the Paleo Hacks blog.
The next example is from Jennifer Allwood’s blog.
Next, let’s take a look at a few examples of blogs where the home page is the recent posts page.
This first image is the home page from the blog A Beautiful Mess (which we looked at earlier in this post). You’ll recall, this page displays excerpts of the most recent blog posts.
The next example is the Oh She Glows blog. On this home page, rather than displaying post excerpts as in the example above, the blogger is displaying the entire content of her most recent posts.
The Elements of A WordPress Web Page
Notice that I am using the term “web page.” That is because, in this section, I am talking about both blog pages and posts. You’ll remember, even though they are different, they each display as a web page.
As a general rule, every web page on a blog will have three main sections.
The picture below is a condensed version of Amy Porterfield’s home page. So it’s only showing a portion of the content.
I have highlighted the three main sections, each with its own color.
Every web page on every blog will have these three sections.
At the top of every web page, there will be a header. At the bottom of every web page, there will be a footer. The center area of the web page (between the header and the footer) is the main content area.
As I mentioned above, the header shows up at the top of every single web page on a blog. The header always includes a logo and a primary menu. Sometimes you’ll also see a search option, social media links and/or contact info.
The logo is the visual representation of a blog’s name. The logo can consist of just words, just an image, or both.
An example of a logo that combines both text and images is my logo for Blog to Biz Strategies:
As you can see, my logo combines two different fonts and I have replaced two letters with graphic images.
The Navigation Menu
The navigation menu (often simply called “menu”) contains links to various web pages on a blog.
All blogs will have at least one main menu, the primary menu. It’s always displayed at the top of the blog. And it shows up on pretty much every single page of the blog. Unless of course, the blogger chooses to exclude it on specific pages.
The primary menu contains links to the most important pages on a blog.
Common links you’ll find in a primary menu include: the home page, about page, start here page, and the contact page. Other pages it might link to are product and/or service pages or press pages.
This is what my primary menu looks like:
It is totally up to you as a blogger what you want to include in your primary menu. At the very least though, I would encourage you to include the home, about and contact page links.
An important rule of thumb is to make sure the primary menu is not too cluttered. So when creating your menu, don’t try to stuff every single link into it.
Some blogs have one or more secondary menus. These usually include links to categories on their blog.
For example. My blog is about blogging. On my blogs, I have created articles that fall into different categories of blogging. These categories include how to start a blog, how to make money blogging, blogging tools, blogging faqs, etc.
Secondary menus can be found in any number of places. Although usually, you’ll see them either above or below the primary menu.
The final menu type is a footer menu. This menu appears at the very bottom of a blog. And as with the primary menu, it also typically shows up on every single page.
When it comes to a blog header, there isn’t really a “standard” format.
Although you’ll typically see the logo either positioned to the left or centered, the menu can appear in various different places.
For example, take a look at the headers below. Although in each case the logo is to the left, you’ll notice that the primary menu appears in different places relative to the logo.
With my own blog header, the primary menu and logo are inline.
The next example is from the blog skinnytaste (see image below). As you can see, the logo is on the left. And it’s a combination of two different font weights and colors.
Beneath the logo is the tagline. The tagline is a short statement that defines what the blog is about. Not all blogs have a tagline. And of those that do, it’s not always visible.
For example, my tagline is Build A Blog That Stands Out. While it shows up in search, it’s not visible like Skinny Taste’s tagline.
As you can see, skinnytaste has its primary menu below the logo. They also include a search bar and social media links in their header.
The next example is A Beautiful Mess. Their logo is on the left. As you can see it’s simply one color and one font.
You’ll notice that they actually have two menus. The top menu (above the logo) is their primary menu. This is the menu that shows up on all their web pages. They also have a search bar and their social media icons in their header.
To the right of their logo, they have a secondary menu. This menu consists of the various post categories they have on their blog.
Next, we’re going to look at examples of headers with centered logos.
The first example is from the site Unjunkiefied. As you can see they have a text-based logo, with their tagline directly underneath. And it’s in the center of the header.
The primary navigation menu is in line with their logo. It appears both to the left and right of the logo. This blog also has its social media links and a search option in the header.
The next example is from Kris Carr – the Crazy Sexy Wellness Revolution. As you can see she has a simple text logo which is centered. The primary navigation menu is below her logo. And as with many of the other header’s we’ve seen, her social media links and search are also within her header.
The final example I want to give you is from Nom Nom Paleo. This is another example of a centered logo. This time though, you can see that the primary menu is above the logo. Below her logo, she has her social media links as well as a search bar.
The Content Area
When it comes to the content area of a blog, it can be laid out in one of three different ways. The first way is called full-width because it is only one column wide and it stretches all the way across the blog.
The static home page examples I showed you earlier are examples of full-width pages.
Blog posts can also be full-width web pages.
Below you’ll see an example of a full-width blog post from the Elementor blog.
The second way you’ll see content displayed is in a two-column or three column format.
Do you remember the examples of the recent posts web pages I showed you earlier? Those are both examples of a two column content layout.
Let’s revisit the home page from A Beautiful Mess. The main content area has two columns (see picture below). The larger of the two is the main content area. The smaller column is the sidebar.
The most common two-column layout has the sidebar on the right. Sometimes though, you’ll see it on the left. Occasionally, you’ll see a three column layout where there is a sidebar to the left AND right of the main content area.
In most cases, the sidebar content stays the same across all the blog’s web pages.
The last section on a web page is the Footer. The footer also generally stays the same across all the web pages on a blog.
The footer typically contains the blog’s copyright information and links to the legal pages (yes, every blog needs legal pages). From there, it’s usually up to the blogger’s discretion as to what else they want to include.
The footer can be as simple or as complex as you want it to be.
Take a look at Jennifer Allwood’s footer. You can see her copyright info and her legal links. She also includes an option to subscribe to her podcast and her social media links.
Darren Rowse from ProBlogger has a much more extensive footer. In addition to the standard stuff you can see he has a bunch of links to different content categories on his blog (the middle section). He also has an email opt-in form.
Whew! We have covered a lot of ground in this post!
I’ve introduced you to the three main elements of a WordPress blog. And the different things that you may see within each element.
Hopefully, you are now comfortable with the terms used to describe the elements of a WordPress blog.
In my next post, I’ll walk you through the back-end of a WordPress blog.
As always, if you have any questions, please leave them in the comments below and then check back for an answer. I aim to answer all questions within 24-48 hours.