How To Add Web 2.0 "Boxes" To Your WordPress Theme for FREE

16 May 2010

FREEBIE: Add Web 2.0 “Boxes” To Your WordPress Theme

Author: Jim | Filed under: Blogging Tips, Blogging Tricks, Web Development

I was recently talking with a few buddies about the Web 2.0 “wave” of themes hitting the blogosphere, and we were chatting about the types of new tricks that can be done with CSS to stylize your blog. To me, what is considered “Web 2.0″ are themes and colors that are light, simple and easy-to read. I’d say that “fresh” is the new “professional“… and making your blog “fresh” isn’t as hard as it seems.

One really neat trick that I will now share with you involves adding simple “boxes” to your normal post structure, allowing you to add a beautiful flare to an otherwise ordinary blog post. As a note: I want to attribute this trick 100% to the designers at WooThemes . WooThemes is one of the pioneers of these great looking templates, so I am borrowing a piece of their code that a buddy and I were looking at to encourage you to change your website to fit a more natural “Web 2.0” feel.

Let’s Look at Some Examples

The first is an “alert“-type box, that could be used to warn users of some kind of exception to a rule or a potential downside/side-effect to a strategy:

WARNING! The Nuclear Reactor Is Set To Explode!

Let’s offer our users a free download with our “download“-type style:

Check out our FREE eBook: DOWNLOAD HERE

Why not give our users the green light with the “tick“-type box:

“It’s A Green Light Go” – Gorilla Zoe

Add some additional information or an expert tip with the “info“-type styling:

FUN FACT: The collecting of beer coasters is called “tegestology.”

Adding a little note here or there is convenient when you have a “note“-type box:

Grocery List: Milk, Eggs, Baking Soda, Chocolate Chips, Flour, Sugar

Awesome Styles, How Do I Use Them On My Blog?

I’ve compiled the coding you need to add this to your WordPress style, and the great thing about these is that they are really 100% plug-and-play! If you know your way around, you can have these styles working in under a minute.

STEP 1: Download the five different icons that you will need to designate a different style when you enter a new type of “box.”

Grab the icon series from Jimvesting.com: DOWNLOAD ICON PACK

STEP 2: Upload the image files directly to the “images” folder within your theme (will most likely be located here: “/ROOT/wp-content/themes/THEMENAME/images/“) via an FTP client or web-based file uploader.

STEP 3: Add the following code anywhere in your CSS file (by default, this will be “style.css”) by editing your theme in WordPress (“Appearance” –> “Editor”)

/* CUSTOM IN-POST BOXES */ p.alert, p.download, p.info, p.note, p.tick { margin:10px 0 20px 0; padding:9px 10px 9px 50px; } p.alert { border-top:1px solid #f0baa2; border-bottom:1px solid #f0baa2; background:#ffd9c8 url(images/ico-alert.png) no-repeat 20px 13px; } p.download { border-top:1px solid #d4ebaf; border-bottom:1px solid #d4ebaf; background:#edfcd5 url(images/ico-download.png) no-repeat 20px 13px; } p.tick { border-top:1px solid #d4ebaf; border-bottom:1px solid #d4ebaf; background:#edfcd5 url(images/ico-tick.png) no-repeat 20px 13px; } p.info { border-top:1px solid #ccc; border-bottom:1px solid #ccc; background:#eee url(images/ico-info.png) no-repeat 20px 13px; } p.note { border-top:1px solid #efe3ae; border-bottom:1px solid #efe3ae; background:#fef6d2 url(images/ico-note.png) no-repeat 20px 13px; }

STEP FOUR: Call the codes inside your actual posts by replacing any paragraph code with a new “class.” This can be done by going to an HTML (the source code) view of your post, and changing to where you want the box to appear.

CODES:
To call the alert box: Text Here
To call the download box: Text Here
To call the tick box: Text Here
To call the info box: Text Here
To call the note box: Text Here

Step 5: Clear your blog’s cache (if applicable) to make sure the changes take place. Save your post and enjoy!

I hope that you enjoyed this quick tutorial. I know that a lot of people have asked about how to do this on other websites, and since I figured out how to make it happen I figured I’d go outside of my typical content and get you some blog improvements. Everyone can use a little Web 2.0, and if you want a theme for a great price that is totally fresh… check out WooThemes for an awesome deal.

-Jimvesting Dot Com

UPDATE: As recommended by Fas of GreatestReviews.net, “WP Notes” has a similar effect on your posts… plus it is a plugin so it is easier to install. CSS is definitely the smart call, but plugins sure are easy to use!