This tutorial will take you through the process of building a fast-loading, animated tabbed widget for the Thesis Theme. For another version (without the animation), read this tutorial.
The Overview
This tutorial is an adapted version (specifically for Thesis) of an excellent tutorial offered by NetTuts.com. Many of the steps are similar, but there are also some significant differences. If you would like to develop this widget for any other theme or design, please follow their instructions.
Step 1: Download Files and Upload to Server
Click here to download the needed files for this tutorial.
Next, upload them to your server. You can place them in any location, but you must remember where you uploaded them. If you like consistency, place them in your Thesis Custom Folder.
Step 2: Linking to Scripts
One of the great things about Thesis is its terrific administration options. In the Wordpress Admin Panel, under Appearance, click Thesis Options.
Scroll down and find the area for Header Scripts and open it by clicking the corresponding + icon.
Paste all of this into the text box and be sure to change “YOURURLHERE” to the correct location of your uploaded files (from Step 1):
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="YOURURLHERE/jquery-ui-personalized-1.5.2.packed.js"></script> <script type="text/javascript" src="YOURURLHERE/sprinkle.js"></script>
Step 3: Setting up the HTML
If you would like the content in your tabbed widget to be manually updated with static content (e.g. Your Favorite Posts) with nothing dynamically generated, you can place the following code in a simple text widget.
However, if you would like dynamic content (e.g. popular posts, tag cloud, etc.), you must insert the following code into Thesis OpenHook. (I am aware that you can also place the code into your theme files or custom_functions.php, but I’m keeping this tutorial as simple as can be!)
If you have not yet installed the Thesis OpenHook plugin, please do so now.
In your Wordpress Admin Panel, under Appearance, click Thesis OpenHook.
Choose the location you would like to place your widget. I highly suggest using “Before Sidebars.”
Paste this code into the corresponding text box:
<div id="tabvanilla" class="tabbedwidget">
<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>
<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->
<div id="recent" class="tabdiv">
<p>MattFlies.com!</p>
</div><!--/recent-->
<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->
</div><!--/widget-->As you can see, we’ve created a navigation menu using a list and 3 divs with the corresponding content. However, it looks pretty bad! Let’s get this thing fixed…
Step 4: Making It Look Good
For this step, you will need to edit your custom.css file. The easiest way to do this is through the Thesis OpenHook plugin by selecting Thesis Custom Styling underneath Appearance in the Wordpress Admin Panel.
Paste the following code into custom.css and save:
/*Tabbed Widget Version 2.0*/
.tabbedwidget {
margin-top: 3em;
background: #DF7718;
padding: 5px;
padding-top: 10px;
border: 1px solid #DF7718;
}
.tabnav {
margin-bottom: 10px;
}
.tabnav li {
display: inline;
list-style: none;
padding-right: 5px;
}
.tabnav li a {
background: #e5f6fc;
border: 1px solid #0262A5;
padding: 4px 6px;
}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #e5f6fc;
border: 1px solid #0262A5;
}
.tabdiv {
margin-top: 2px;
background: #e5f6fc;
border: 1px solid #0262A5;
padding: 7px;
}
.tabdiv li {
list-style: none;
margin-bottom: 0.667em;
}
.ui-tabs-hide {
display: none;
}
Of course, you’ll want to modify the above code to fit your site’s design. Feel free to change anything above, except for the .ui-tabs-hide portion, as the jQuery will make good use of that!
Step 5: Inserting Great Content
The type of content you insert into your widget is entirely up to you! If you can dream it up, it can probably be done! To get you started though, I’ll offer a few simple suggestions with directions.
Recent Posts:
To display your 10 most recent posts, simply paste this code in the tab where you would like it to display. (You can change the number 10 to any number.)
<?php query_posts('showposts=10'); ?>
<ul><?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?></ul>Tag Cloud:
To display a tag cloud of your posts (assuming you use this included feature in Wordpress), simply paste the following code into a div in the tabbed widget code.
<p><?php wp_tag_cloud(); ?></p>
Recent Comments:
You can display the 10 most recent comments on your blog by pasting all of this code into the tabbed widget code.
<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.":" . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>Popular Posts:
If you use the Wordpress.com Stats plugin and its sister, Popular Posts, you can insert this code to display the 10 most popular posts on your website (based on hits).
<ul> <?php WPPP_show_popular_posts( "title=&number=10&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title%</a> (%post_views% views)" );?> </ul>
If you’d like even more options and flexibility, consider adding these plugins by Rob Marsh. See instructions for what code to place in the widget for these plugins.
If you have any questions or simply need help, don’t be afraid to ask in the comments below! I will help you IF you include a link to your blog in the comment. If you need to paste code into a comment, please encode it here and place it between <pre></pre> tags.
