Have more widgets below the content without cluttering the WordPress post!

Well, as more and more widgets are provided to bloggers and each widget seem to carry some sort of usefulness we tend to install them and use them on our blogs. But, at the end of the day, we realize that the page looks more cluttered as all the widgets don’t match the theme and go with the theme but if we look at them separately then they just go OK with the theme.

So, in order to avoid this kind of situation we can make use of the following trick and put them in such a way that they don’t clutter the post page and on top of it, will be seen by only those people, who actually want to use them…

What we want to achieve is something like this :

(Related posts in the 1st tab)

(Recommended Software in the 2nd tab)

With these kind of Tabs we can ensure that we can save on lot of space and as I said before that only curious people will dig more into these tabs and will make use of it.

How to put these Tabs on post pages ?

In order to install this we’ll make use of Dynamic Drive’s excellent Tab Content Script and now let me guide you how you can easily put this code in your WordPress theme (Self hosted one only).

1. Download the required files.

2. Upload them /wp-content/themes/Current-theme-folder/

3. Open Theme Editor under Presentation tab in WordPress admin panel.

4. Open header.php (in order to ensure that you can edit and save the changes make sure that each and every theme file we are talking about over here, must be CHMOD to 755).

5. After the < title > XYZ < / title > tag please add the following code :

<link rel=”stylesheet” type=”text/css” href=”tabcontent.css” />

<script type=”text/javascript” src=”WWW.YOUR-DOMAIN-NAME.COM/wp-content/themes/YOUR-THEME-NAME/tabcontent.js”>

/***********************************************
* Tab Content script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

6. Ensure that in the above code, you’ve got to change the path of Javascript i.e. the WWW.YOUR-DOMAIN-NAME.COM/wp-content/themes/YOUR-THEME-NAME/tabcontent.js line to the path which you’ve got on your server.

7. Save the header.php

8. Open Single Post or single.php and add the following code where you want to display the Tab box :

<h3>Demo #1- Basic implementation</h3>

<ul id=”countrytabs” class=”shadetabs”>
<li><a href=”#” rel=”country1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”country2″>Tab 2</a></li>
</ul>

<div style=”border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px”>

<div id=”country1″ class=”tabcontent”>
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id=”country2″ class=”tabcontent”>
Tab content 2 here<br />Tab content 2 here<br />
</div>

</div>

<script type=”text/javascript”>

var countries=new ddtabcontent(”countrytabs”)
countries.setpersist(true)
countries.setselectedClassTarget(”link”) //”link” or “linkparent”
countries.init()

</script>
<hr />

9. Change the Red and Green Color information to suit your needs and save the file.

Note : If you want the Tab box to appear just after the content then please find the following code or something similar [ <?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?> ] and paste the code mentioned in Step 8 after this.

I hope that you found this article useful and if you are applying it then please tell us that how you are going to use it i.e. which widgets or features you’ll have in the tabs.

Credits : Thanks to DynamicDrive for providing such a wonderful script for free. They’ve got a huge library of such wonderful and useful DHTML scripts, I’m sure you’ll find something or the other which will spark the idea of such useful blog enhancement.