Formatting wordpress posts

Formatting WordPress Posts – Everything You Need To Know

Karan Sachdev Knowledge Base, Pixelmattic Blog Leave a Comment

Why formatting content is so important? Studies have shown that people scan and read content differently on the web compared to traditional media.

People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences.

Blogs that are easy to scan and read do better by 124%. With so much content being generated today, you definitely want to make your WordPress post stand out. You do not want it to look like a drab old newspaper article.

Good formatting can make your blog not only look better but increase its readability as well.

Formatting WordPress Posts Using The WYSIWYG Visual Editor:

Let’s get straight to how you can format your blog on WordPress.

In WordPress, you will most likely write your blog and make changes in the visual editor, as shown below.

formatting wordpress posts using visual editor

The image shows all the basic formatting options such as making text bold, italic or creating lists.

While visual editor is good  and it works well for beginners, sometimes it creates problems while formatting. For professional bloggers, it doesn’t give the kind of control you might want.

Formatting WordPress Posts Using The Text Editor:

Knowing the basics of HTML can help you format your posts.

You need to switch to the text editor from the visual editor, by clicking on the tab that says ‘Text’. You can format WordPress posts on your blog using basic HTML tags.

Here are is a list of formatting options using HTML tags that are easy to implement.

1. Paragraph: When you want combine sentences into a paragraph, this tag inserts a line of space before and after the paragraph.

Tip: Restrict the number of lines in each paragraph between 4-6, so that content is more snackable.

HTML Paragraphs tag for formatting wordpress posts

2. Lists: The list can be numbered or have bullet points.

Tip: Another great way to present text instead of using long sentences in paragraphs. Numbered lists have a higher recall value and are more scannable.

HTML Lists tag for formatting wordpress posts

HTML Lists tag for formatting wordpress posts    HTML Lists tag for formatting wordpress posts

3. Heading: There are 6 sizes you can choose from.

HTML Headings tag for formatting wordpress posts

Tip: Use different sized headings to create a visual hierarchy.

4. Bold & Italics: The tag for bold is ‘strong’ and for italics is ’em’ as shown below.

HTML Text Formatting tag for formatting wordpress posts

HTML Text Formatting tag for formatting wordpress posts HTML Text Formatting tag for formatting wordpress posts

Tip: Use this to emphasise keywords or phrases in your sentence.

5. Links: The first part or attribute is the link to the site, and adding the ‘target =_blank’ attribute makes the link open in a new window.

HTML Links

Tip: Use the ‘target=_blank” option as you don’t want users to go away from your website.

You will find some great tutorials to learn the basics of HTML here:
W3schools
Codecademy
tutsplus

Formatting WordPress Posts Using Shortcodes:

Using HTML gives you more control over formatting WordPress posts. But you know what is better? SHORTCODES!

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. in short its a SHORTCUT!

Shortcodes let you add a number of elements such as an accordion, button, tabs, quote and more. Read on to learn how shortcodes can be used for formatting WordPress posts.

For this post, we have used SHORTCODE ULTIMATE plugin as a reference.

The button ‘Insert shortcode’ is where you will find all the various options for formatting WordPress posts.
shortcodes-ultimate plugin for formatting wordpress posts

There are a number of shortcodes you can use. We have listed the most useful shortcodes below and where you can use them.

shortcodes-ultimate plugin for formatting wordpress posts

1. ACCORDION: Comes in handy when you have a FAQ page. You can have all your questions as a list and if someone wants to view a particular question they have to expand only one question. This makes the page look neater and less heavy with content.

2. TABS: Tabs are useful to organise menus. You could have a list of services and each tab can expand on the specification of each of those services.

3. BUTTON: They can link to other sites or be your call to action. If the lede provides a strong opening, you need to convert that attention into action. CTAs allow you to do just that.

4. QUOTES: Famous quotations can be inserted in a very stylish manner using this shortcode. 3 reasons why quotes are useful – they add accuracy, clarity and reality to your message.

5. DROPCAPS: The lede and the closing statement are the two most important sentences in your post. Use this shortcode to start with a strong beginning.

6. IMAGE CAROUSELS: Image Carousels can easily be added by clicking ‘Insert shortcode’ and choosing the carousel . You can get the same results by directly typing the shortcodes into the editor.

Every shortcode will have specific guidelines to use them. We strongly advise you to read the plugin specific instructions before getting started.

 

Advantages of using Shortcodes:

  • Shortcodes are easy to use and almost everyone can implement them.
  • Formatting WordPress posts using shortcodes makes them more presentable and attractive.
  • No knowledge of coding is required

 

Here are some of our favourite Shortcode plugins:

 

Further Reading

This article provides more information, albiet slightly technical, on how to use the text editor and the pitfalls you should avoid. Here is another article that talks about the good, bad and the ugly side of using the visual editor.

 

Did you find this post useful? 

Join our inner circle to learn more about such tips to improve your WordPress blog.

[x_section padding_top="0" padding_bottom="0"][x_row][x_column type="1/1"]
[/x_column][/x_row][/x_section]

 

Image Credit: John Eckman