When working in WordPress designers and developers often pick or create a great theme and then leave content to be a big blob of text in the middle of the page. Some people are content with the simple text box for their editable content, others tend to put all but a section of the page outside the content area, and other really bold individuals switch over to the text editor and add snippets of code. These three solutions offer some serious drawbacks which dramatically decreases the effectiveness of WordPress.

The text blob is obviously a bad formatting choice for a variety of reasons and honestly spacing paragraphs, using inline images, and horizontal lines is still very limited. Putting the bulk of page text in the code rather than the content area really defeats the main purpose of using WordPress, and the code method is both a pain and easily screwed up during text editing.

By using a couple of simple plugins we can style the content of the page quickly and easily while allowing end users to edit that content. If you are using our Themefast Framework then the configuration for this plugins are built into the them, just install the plugins and activate. (If not you must install Bootstrap before the plugin will work, etc)

[icon name=”exclamation-triangle” class=”” unprefixed_class=””]  I am going to over style this page to showcase what you can do with a couple of plugins. We are using 3 plugins.

[one_third padding=”20px 20px 20px 20px”]

Column Shortcodes

This simple little plugin allows you to add 2-6 responsive columns. This is an example of 3 columns

[/one_third]

[one_third padding=”20px 20px 20px 20px”]

Better Font Awesome

Font Awesome has a set of icons that you can use for anything from a bullet list to highlight a heading.

[/one_third]

[one_third_last padding=”20px 20px 20px 20px”]

Bootstrap

Being able to add bootstrap elements within it page is great, doing it with shortcodes is even better.

[/one_third_last]

[container]

[jumbotron title=”Highlight Your Point”]
An example of bootstrap shortcodes, since the shortcodes can be seen in the visual editor it is less likely that you or your client will accidentally delete formatting. This was created by adding the bootstrap shortcodes container then jumbotron.

[button type=”success” class=”alignright” size=”lg” link=”#”] bootstrap button shortcode [/button]

[/jumbotron]

[/container]

[one_fourth padding=”0 10px 0 10px”]

[img type=”circle” responsive=”true”]  [/img]

[/one_fourth]

[three_fourth_last padding=”10% 10px 0 10px”]

You can even create image effects from Bootstrap like turning this square image into a cool circle using the “img type=”circle” shortcode and then put this text next to it with column shortcodes. The [icon name=”exclamation-triangle”] near the top of the page and the [icon name=”wordpress”] below are both created with Better Font Awesome shortcodes.[/three_fourth_last]

[well size=”lg”] [icon name=”wordpress” class=”2x”]   Shortcode styling allows you to embrace the power of WordPress [/well]

[one_half padding=”0 10px 0 10px”]

As you can see, these plugins can create nearly any formatting you like in the content area while keeping the text easily editable for you or your client. When you combine these plugins with out Theme Framework you can cut your development time in half while creating a higher quality website.

[/one_half]

[one_half_last padding=”0 10px 0 10px”]

[panel type=”info” heading=”More WordPress Articles” footer=”Footer text”]

Article 1

Articls 2

Article 3

[/panel]

[/one_half_last]