Wordpress Tip: Adding an Ajax Tabbed List to your Sidebar!

9
Aug/0855

Wordpress Tip: Adding an Ajax Tabbed List to your Sidebar!

Ads by Project Wonderful! Your ad here, right now: $0

I am currently building a couple of different wordpress themes for a few different sites and one of the most requested features that I get in a template these days is a little AJAX tabbed menu like the one at the top of the sidebar on AonxeDotCom. Surprisingly, it is extremely easy and you can quickly add one to your own wordpress theme very easily. In this post, I will show you how to.

1. The first thing you will need to do is download the required CSS and JavaScript file, which I have hosted in a RAR file here for you to download.

2. Now you will want to put the two files, tab.css and tabber.js, into your themes base directory. In other words, put it in the directory that holds you themes style.css, index.php, header.php, etc…

3. After you have the files in place you will need to open up your themes header.php and insert two lines of code.

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/tab.css" type="text/css" media="screen" />
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/tabber.js"></script>

4. Now you will want to open up sidebar.php and you will want to add the following div wherever you want your tabbed menu block to show.

<div class="tabber">
</div>

5. Now for each tab you will want to have one of these blocks of code. You can put whatever you like in there, the h2 element is what the tab will be and anything else in the div goes into the tab’s block. You will want to put this code INSIDE the last div that you made.

<div class="tabbertab">
<h2>Tab Name Here</h2>
Box content here.</div>

Bonus: I have included a couple of tabs that you can copy and paste to get some tabs for your site, they allow you to show recent comments, recent posts, and a list of your archives, but remember, the sky is the limit and you are only limited by your creativity.

For a recent comments block:

     <div class="tabbertab">
 
	  <h2>Recent Comments</h2>
	<?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;?>
     </div>

For a recent posts block:

<div class="tabbertab">
<h2>Recent Post</h2>
				<ul>
 
<?php
$myposts = get_posts('numberposts=10&offset=1');
foreach($myposts as $post) :
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title();
?></a></li>
<?php endforeach; ?>
 
		</ul>
 
     </div>

For a list of your archives:

<div class="tabbertab">
<h2>Archives</h2>
<ul>
     <?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

And there you have it! I hope you enjoyed this Wordpress Tip and I hope that you get some good use out of it. Don’t be afraid of AJAX, make it your bitznach. If you liked this Wordpress Tip, you should subscribe to my RSS Feed so you can stay tuned in for updates!