Color Paper Ajax Tabs Fix
Background
For the most part, I have been very happy with the Color Paper wordpress theme. As with anything free, there are usually a few gotchas. The broken ajax tabs were the only technical problem I’ve had with the theme thus far. Since I haven’t spoken with the author, I wasn’t sure what the initial intentions were for the ajax tabs.
It looks like the tabs can be setup to support true AJAX functionality. However, if you look into the sidebar.php file you’ll notice the theme itself includes the HTML contents directly within the initial response, rather than fetched with client side JavaScript via AJAX calls. For me, the additional overhead of loading all three tabs isn’t that bad, and therefore I have decided not to fully implement a true AJAX tab control.
With that said, the below steps will get your side bar tabs up and working in the Color Paper WordPress theme. Kudos to the author and Smashing Magazine for yet another great theme.
As with any javascript, you can choose to either include it in a separate file or directly within the HTML. For several reasons, I would recommend always including the majority of your javascript in an external, browser cacheable, file and reference it from your HTML.
Recommended Fix (external file)
- Download ajax.tabs javascript file.
- Upload the javascript file to your theme’s js folder (wp-content/themes/colorpaper/js).
- Include a reference to the javascript library in header.php as indicated below, or by other javascript include mechanism if installed, such as wp_js.
<script
type="text/javascript"
src="<?php bloginfo('template_directory');?>/js/ajax.tabs.js">
</script>
Quick Fix
- Copy the below javascript into header.php.
- That’s it.
<script language="JavaScript" type="text/js">
jQuery(document).ready(function()
{
jQuery('ul.tabs a.tab').click(function() {
jQuery('div#' + jQuery('ul.tabs a.active').attr('title')).toggle();
jQuery('ul.tabs a.active').toggleClass('active');
jQuery(this).toggleClass('active');
jQuery('div#' + this.title).toggle();
return false; // cancel event bubble
});
});
</script>
Stay tuned over the next few days for another Color Paper theme enhancement guaranteed to increase page load times and improve the overall user experience of your site.Hint: large images.
Drop me a line if you have any questions or problems implementing the fix.
