Implementing jquery tabs into wordpress

jquery tabs in wordpress

Sometimes i wonder how things are done so i right click my mouse and select view source, but they are already out put as html code not actual code that build it. so the journey begins one day i saw a website with a animated tabs ,ahh that’s cool i want one that on my website! and after searching a while with uncle google, i found jquery tabs and i don’t even know what is jquery :O but best part is; it is packed with examples. Next problem is how to make it works with WordPress, so here this is my quick n dirty resolution.

This time the mission involving following files: from the jquery tabs :

  • jquery-
  • jquery.history_remote.pack.js
  • jquery.tabs.js
  • jquery.tabs.pack.js
  • jquery.tabs-ie.css
  • jquery.tabs.css
  • loading.gif
  • tab.png

and put them all in one folder called js then put the folder inside my wordpress themes e.g my themes titled bali so the js folder is wp-content/themes/bali/js And from my wordpress theme i change 2 files ( header.php and sidebar.php) plus adding one file to store the tabs call jquery.tabs.php step one open header.php and adds following lines just before </head>

<link rel=”stylesheet” href=”<?=bloginfo(‘stylesheet_directory’) .’/js/jquery.tabs.css’;?>”  type=”text/css” media=”print, projection, screen”>

<!– Additional IE/Win specific style sheet (Conditional Comments) –>
<!–[if lte IE 7]>

<link rel=”stylesheet” href=”<?=bloginfo(‘stylesheet_directory’) .’/js/jquery.tabs-ie.css’;?>” type=”text/css” media=”projection, screen”>

<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/jquery-’;?>” type=”text/javascript”></script>

<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/jquery.history_remote.pack.js’;?>” type=”text/javascript”></script>

<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/jquery.tabs.pack.js’;?>” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
$(‘#container-a’).tabs({ fxShow: { height: ‘show’, opacity: ‘show’ }, fxSpeed: ‘normal’, fxAutoHeight: true });

I want the tabs to show on my sidebar , open sidebar.php and add this line

<?php include (TEMPLATEPATH . ‘/jquery.tabs.php’); ?>

and what’s in on jquery.tabs.php

<div id=”container-a”>
<li><a href=”#fragment-1″ title=”<?php _e(‘Latest Headlines’); ?>”><span><?php _e(‘Latest Post’); ?></span></a></li>
<li><a href=”#fragment-2″ title=”<?php _e(‘Categories’); ?>”><span><?php _e(‘Popular Post’); ?></span></a></li>
<li><a href=”#fragment-3″ title=”<?php _e(‘Categories’); ?>”><span><?php _e(‘Categories’); ?></span></a></li>
<div id=”fragment-1″>
<?php rewind_posts(); ?>
<?php $posts = get_posts(‘numberposts=10&offset=0′); foreach ($posts as $post): setup_postdata($post); ?>
<li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>
<div id=”fragment-2″>
if(function_exists(akpc_most_popular)) {
akpc_most_popular($limit = ’10’, $before = ‘<li>’, $after = ‘</li>’);
else {
$result = $wpdb->get_results(“SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10″);
foreach ($result as $topten) {
$postid = $topten->ID;
$title = $topten->post_title;
$commentcount = $topten->comment_count;
if ($commentcount != 0) { ?>
<li><a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>”><?php echo $title ?></a></li>
<?php } } } ?>
<div id=”fragment-3″>
<?php wp_list_categories(‘sort_column=name&optioncount=1&hierarchical=0&offset=5&title_li=’); ?>
<br class=”clear” />

Download Jtabs Zip