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.

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.

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.

    

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

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.

 

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.

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.

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

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.

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/s2.png” info=”none” info_place=”top” info_trigger=”hover”]

[image type=”none” float=”left” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/sc1.png” info=”none” info_place=”top” info_trigger=”hover”]

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.

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/c3.png” info=”none” info_place=”top” info_trigger=”hover”]

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.

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/DE.png” info=”none” info_place=”top” info_trigger=”hover”]

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.

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/quote1.png” info=”none” info_place=”top” info_trigger=”hover”]

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/quote.png” info=”none” info_place=”top” info_trigger=”hover”]

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.

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/dropcap1.png” info=”none” info_place=”top” info_trigger=”hover”]

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/dropcap.png” info=”none” info_place=”top” info_trigger=”hover”]

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.

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/carousel.png” info=”none” info_place=”top” info_trigger=”hover”]

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/carousel1.png” info=”none” info_place=”top” info_trigger=”hover”]

[image type=”none” float=”none” src=”https://www.pixelmattic.com/wp-content/uploads/2015/03/carousel4.png” info=”none” info_place=”top” info_trigger=”hover”]
[alert type=”warning”]Every shortcode will have specific guidelines to use them. We strongly advise you to read the plugin specific instructions before getting started. [/alert]

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:
[icon_list]
[icon_list_item type=”arrow-right”]Shortcode Ultimate[/icon_list_item]
[icon_list_item type=”arrow-right”]Zill Shortcodes[/icon_list_item]
[icon_list_item type=”arrow-right”]Easy Bootstrap Shortcodes[/icon_list_item]
[icon_list_item type=”arrow-right”]Simple Shortcodes[/icon_list_item]
[/icon_list]

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? 

[content_band inner_container=”true” no_margin=”true” padding_top=”0px” padding_bottom=”0px” border=”none” bg_color=”#ffeb3b”]

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

[x_subscribe form=”7796″]

[/content_band]

Image Credit: John Eckman