Bali Web – Images of Bali – Simple Photo Blog
Indonesia Travel,Bali Trips,Tropic Vacation, Tutorial,Photos of Bali
Implementing jquery tabs into 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-1.1.3.1.pack.js
- 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”>
<![endif]–>
<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/jquery-1.1.3.1.pack.js’;?>” 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 });
});
</script>
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”>
<ul>
<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>
</ul>
<div id=”fragment-1″>
<?php rewind_posts(); ?>
<ul>
<?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; ?>
</ul>
</div>
<div id=”fragment-2″>
<ul>
<?php
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 } } } ?>
</ul>
</div>
<div id=”fragment-3″>
<ul>
<?php wp_list_categories(’sort_column=name&optioncount=1&hierarchical=0&offset=5&title_li=’); ?>
</ul>
</div>
</div>
<br class=”clear” />
<ul>
<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>
</ul>
<div id=”fragment-1″>
<?php rewind_posts(); ?>
<ul>
<?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; ?>
</ul>
</div>
<div id=”fragment-2″>
<ul>
<?php
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 } } } ?>
</ul>
</div>
<div id=”fragment-3″>
<ul>
<?php wp_list_categories(’sort_column=name&optioncount=1&hierarchical=0&offset=5&title_li=’); ?>
</ul>
</div>
</div>
<br class=”clear” />
Comments are closed.
