How to best format your WordPress blog posts and pages

As part of the How To Start a Blog series, here is a great beginner post that many new WordPress bloggers struggle with. The topic is formatting. Do your posts look sort of boring? Are you formatting pages so Google can best understand what is important? There are some basic things you can easily learn that will help with these concerns. So let’s jump in.

What is HTML?

HTML stands for hyper-text markup language. It is essential the “code” that makes web pages look the way they do. One of the many awesome things about using WordPress for your blogging is that WordPress creates all the code for you! Many people don’t even realize it because it is just so simple.

If you ever want to see some of the HTML code that WordPress is creating, you can click on the “Text” tab when you are in the edit page of any post or page. By default you are in the “Visual” tab – where I’m writing this right now – but you can always click over to look at the text. If you aren’t doing any formatting of your pages yet, then the Text will look very similar to the Visual tab.

But let’s start some formatting. After you have adjusted the formatting on a few things you can then switch back over to the Text tab if you are curious just what WordPress is doing behind the scenes.

Perhaps the most important formatting…

First things first. One of the most important formatting tasks is the proper use of headers. Headers serve two huge functions.

  1. Headers help Google understand the page. Google realizes that if you set certain text as a header, it’s very likely important. It knows to give some priority to that text when it is indexing the page. It also understand that the text following a header should be related to that same topic, so it might give some additional weighting to the following paragraphs.
  2. Headers help readers understand the page. What do you prefer: Reading a huge chunk of boring text, or reading a page that has a number of sections with some bolded headers defining the areas? Yeah, the second one of course. Everyone feels the same and that’s what good use of headers can do for your posts.

I’m going to pause for a moment in writing this post and scroll up to set two headers. {pausing} Okay, I’m back! I went up and changed “What is HTML?” and “Perhaps the most important formatting…” text lines into “heading 2”. See how they stand out and break up the page now?

Headings and how to best use them

There are standard heading sizes of 1 (biggest) down to 6 (smallest). If you highlight any text from the edit page of a WordPress post or page, then click on the drop-down box at the top of the edit window (shows “Paragraph” by default) you can select a heading to see how it looks.

Not only does the text look biggest on the heading 1 but Google also understand this to be the most important text on the page. For this reason you don’t want too much heading 1 text. If you have a lot of number 1 headings then Google won’t know what the overall topic of the page is about.

In actual practice you almost never need to change any text to heading 1. The reason is that every WordPress theme that I’ve ever used will automatically set one #1 heading per page. That default heading is usually the title of the page or post – which makes sense since that is what the page is about.

My favorite WordPress header size

I do use a TON of #2 headings though. Each of the sections of my posts are defined by some text set as heading 2. What you see listed throughout this post in larger bold font are “heading 2” text.

A good rule is that the more important something is, the lower number of header it should be. So the page or post title is #1, section headers breaking up paragraphs on the page are #2, sub-sections within those paragraphs might be #3, etc. Honestly, it seems that beyond heading #2 Google starts to lose interest. So you can use the smaller headers for visual formatting if you want, but it likely won’t impact your search engine results at all.

A quick note on Preformatted

By they way, the line above this one is heading 3 sized. Just to help you see the difference visually.

When you have highlighted some text then selected the format drop-down box as I mentioned above, you’ll see “Paragraph” which is just normal text like I’m tying now, and the headings I mentioned, but also “Preformatted”.

Preformatted is an option that tells WordPress not to do any additional formatting. It’s generally boring text. Here is a preformatted sentence:

The quick brown fox jumped over the lazy dog.

Lame, right? I’ve sometimes used that in the past when I am showing code samples or something else that I want to stand out from the normal paragraph text. It isn’t something I use often – nor do we see it on very many mainstream posts or pages.

The WordPress formatting menu bar options

The formatting menu bar is that section right at the top of the page or page edit window. It has the header formatting drop-down box on the left-hand side and then some additional formatting buttons.

WordPress formatting menu

That’s what I’m talking about. Let’s go through each of those remaining options. Understanding what they do can help you make your posts and pages much more visually appealing for your readers.

The first icon is “bold”. When you highlight text and then click that button, it either makes the text bold or – if it is already bold – removes the bold formatting. Here is a sentence in bold. Bold is a nice option when you want to show the importance of something and make sure it really stands out. Posts that have reasonable use of bold can really improve their readability.

The second icon is for italics. This is great when you want to show importance of something but not necessarily draw visual attention to it. For a great example is the word “reasonable” that I italicized in the previous paragraph. I want to make sure that people catch that word, but I don’t necessarily want to draw eyes immediately to it in the middle of the paragraph.

The third icon lets you make a bullet-point list and the fourth lets you make a numbered list. Here are those two used for example that you can see:

  • Item number 1
  • The second item
  • And here’s another
  1. You can also do numbered lists
  2. This can be useful in some situations
  3. You just decide which makes sense for you

The fourth icon is for highlighting quotes. The text below has been formatted by using that icon.

“Get all the advice and instruction you can, so you will be wise the rest of your life.” Proverbs 19:20

Different themes will treat quote-formatted text differently. Each should make the text stand apart in some way though, and they almost always indent the text.

Alignment formatting

The next three icons in the WordPress formatting menu are for text alignment. Just as the icon pictures show, the first does a left-hand alignment, the second centers text, and the third does right-hand aligning. By default all text is going to be left-hand aligned. This paragraph is an example. Below are examples of the other two options.

This is center aligned text.

This is right aligned text.

I’ll occasionally use center alignment, though not too often. I’m not sure that I’ve ever used the right alignment option but I’m sure some people find good use for it in there posts and pages.

Link formatting

The next two icons are for link formatting. When you want certain text within your WordPress posts or pages to link to another page – either a page on your site or a different site – you’ll use the link formatting icon.

As an example I’ll link this text to our homepage. I highlighted the text that I wanted to be turned into a link and clicked the link icon. Below is an image showing the options that popped-up and what I entered to make it work.


WordPress Link Formatting

Note that you can also click on that little gear to the right of the box where you enter the link. That brings up some advanced features that I find very useful – especially when linking to sites other than your own. Here’s what it looks like when you click that gear:

WordPress Advanced Link Options

What I use most on this advanced link formatting box is the “open link in a new tab” option. When you select that option for your links, it helps keep people on your site. I prefer to not write great content then have someone click outside of my site and forget to come back to finish a post. This option keeps the page open in a tab and opens the other page in a separate tab.

Besides the “make a link” icon, the next one is for removing a link. If you click on existing text that you already made into a link and click this icon, it removes the link for you. Nothing fancy about it. Just a fast way to remove links in WordPress posts and pages.

The Read More tag

This formatting option confuses a lot of people because in general use its hard to see that it even does anything. The main reason for this tag is to tell WordPress where to “break the post” in an instance where it might show a summary.

For example, some people like to show an excerpt of their posts in places on their site with a link to “read more” or read the complete post. This formatting icon lets you clearly tell WordPress where stop the summary and place the link to the full post.

That “last” formatting icon

That last icon on the right-hand side isn’t actually a formatting option at all. What it does is toggle a few more advanced formatting options. Click that icon to expose some more, lesser used, formatting options.

These options let you do things like strikethrough text, insert a horizontal line (shown below), change the color of certain text, paste text from your computer’s copy/paste feature, remove existing formatting, indent (or decrease indent) of text, and undo or redo the last changes.

These WordPress post and page formatting options that I’ve covered are the standard WordPress features. I’ve seen some themes change or add to these formatting options, so if yours don’t look exactly like this, that’s okay. Don’t worry. You might need to read the theme developer’s notes to understand what those additional formatting icons do though.

Hopefully this introduction to WordPress formatting has been useful. With proper use of standard formatting options you can make your posts and pages much more enjoyable to your readers – and much easier for Google to “understand” when it comes time to index your pages. Always take some time when writing, at the end if you want, to go back through and look for ways to visually improve the content. Readable content is a big deal.

Now go crush some awesomely formatted content!

Brad Kingsley

Leave a Reply

Your email address will not be published. Required fields are marked *