How To Create & Add a Feature Box Anywhere in WordPress

There’s many different methods you can use to add a colored feature box to your posts. The best method to use will depend on which theme & framework you are using.

If you are using the Thesis theme for WordPress, you’ll find this tutorial on creating a feature box in Thesis handy. This method uses both PHP & CSS code which can also be modified for use in your own theme by editing the filters & hooks to match your themes.

Caution: Always backup your files before editing PHP code.

Is there an easier way to create a feature box in WordPress without having to learn coding? Yes

I have already written about how to highlight content in a feature box using CSS but what if you don’t want to write any code?

Another way to easily create a feature box is to use shortcodes. Some themes already provide built in  shortcodes. If yours doesn’t, you can easily install a shortcode plugin to add features which will include info boxes or feature boxes as some call them.

So Shortcodes make it very easy to add styling & create feature boxes, but what next? How do you insert the feature box in the same position on all posts?

The solution is simple. You use your themes Hook Manager or install a Hook plugin which offers the same features.

A hook manager will allow you to add any type of code anywhere your theme offers a hook position.

Simply create your feature box using shortcodes and paste the html from your WordPress editor, which includes the shortcode tags, into the correct hook position offered by your Hook Manager or Hook plugin.

Thesis offers a hook plugin and the Woo Framework offers a built in Hook Manager which does exactly the same thing. If you are using the Woo framework, you’ll see that you can check the box to enable use of shortcodes in any hook position.

Editing & Styling Your Feature Box

The easiest way to make changes to your feature box is to use Firebug. If you are using a Hook plugin or the Hook Manager to place your feature box in your posts, you’ll notice it doesn’t look the same as the feature box your create in a single post using shortcodes.

The reason for this is shortcodes & HTML don’t work well together in a Hook Manager.

The solution is to edit your feature box using Firebug and add the CSS code changes to your child themes style.css file. This way all your changes will overwrite your parent themes style.css file and not be overwritten when you update your theme.

If you haven’t already created a child theme, you can download a copy the fresh canvas child theme for Canvas here for free.

Next time i’ll show you how to use Firebug to customize your WordPress theme without knowledge of CSS code.