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.
Yes, I know iPhone 3.0 was released several weeks ago, it's not late breaking news anymore. Well, I'm not here to post about up-to-the minue product releases, but more just my personal experiences with them. See the post for my son's version of "Take me out to the ball game" as recorded on the iPhone Read entire article
Hey Wosko.
I see the tabs are working on your site. It looks great and the function is excellent aswell. I just can’t get it to work on my sisters blog.
I read your instructions did what you wrote. I’ve been sitting some hours now trying to get it to work.
Any other tips you give me?
Hi Daniel,
To be honest, it depends much upon the environment (I know that’s the easy way out). Are there any javascript errors on the page? Is the script making it to the page and not being interrupted by other widgets you may have installed. The key is figuring out where the problem is actually happening.
A reference point, aka a URL were you’re trying to implement said tabs, would be most beneficial in resolving the issue. I would be happy to take a quick look if you can provide a link to the blog.
Same here I’ve tried every single step as descripted above but no luck!
Maybe its a problem because of running wp 2.8???
Well any suggestions ouwld be nice maybe you can show on which line you have inserted your fix inside of header.php?
Other then that, great article!
kindest regards
s!
The version of wordpress shouldn’t be the issue in this situation. I have upgraded my development edition to version 2.8 and the tabs are still working.
My guess is you have led me to the culprit (which line the script is included on). The ajax.tabs.js include must be after the jquery include. I guess before that, jquery must also be included (typically is in most installs of the template).
In my header.php I have included the script on line 8:
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/jquery.jcarousel.pack.js”>
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/ajax.tabs.js”>
If the above does not help, let me know the URL and I would be happy to take a look for you. Thanks for reading and happy blogging!
Hello again,
thank you for explaining on which line to add the script what shoud I say again, no luck making it work!
Another Idea, the second script you mentioned in your post is on the wrong line in the header.php perhaps?
Maybe you can drop me a mail if you like because my blog is still private so I don’t wanna post the adress here in the moment but via mail if you like we can figure things out more deeply? Would be really nice since I really like that theme but really need the tabs thing working now
kindest regards
s!
Again its me so sorry that I asked so much!
But I made the Tabs working now on my blog this was by accident!
I didn’t not knew at least I didnt seen it mentioned that i need to use the Text widget to make them display’d!
While wathing your sites code I noticed something like:
Categories
Tags
Archives
<a href=…………………………………
What I wonder now due to the problem that I dont knew web programming at all, how can i fill the Tabs with dynamically content now?
So that under the Categorys tab all categorys from my Site are display’d automatically or do i need to hardcode them into the tabs?
Can you show me please how to do that? I basically need the same tabs as you have on your site!
kindest regards
s!
S: glad to see you got the tabs working. Once you go live with your site, please do post a link as I’d like to see another implementation of the Color Paper theme in use.
As for populating the tabs, I used the built in wp functions in my theme file. You can definitely replace these functions with whatever you’d like to include in the tabs, i.e., recent comments (< ?php get_comments($comments_limit); ?>), popular posts (< ?php get_popular($popular_limit); ?>), featured (< ?php get_featured($featured_cat); ?>) and more.
Here are the entire contents of the tab section in my sidebar theme file. You can edit this file directly, or do so using the Theme editor in the WordPress admin area (Admin > Appearance > Editor > Select sidebar).
<ul class=”tabs clearfix”>
<li><a href=”#” title=”content_1″ class=”tab active”>Categories</a></li>
<li><a href=”#” title=”content_2″ class=”tab”>Tags</a></li>
<li><a href=”#” title=”content_3″ class=”tab”>Archives</a></li>
</ul>
<div id=”tabs”>
<div id=”content_1″ class=”content”>
<ul id=”popular”>
<?php wp_list_categories(’title_li=’); ?>
</ul>
</div>
<div id=”content_2″ class=”content”>
<ul id=”comments”>
<?php wp_tag_cloud(’smallest=8&largest=16&order=ASC&’); ?>
</ul>
</div>
<div id=”content_3″ class=”content”>
<ul id=”featureded”>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</div>
</div>
</li>
Hope this helps. Good luck and happy blogging.
Sorry but its getting an endless problem here…
As you descripted I inserted your code into my sidebar.php what should I say? No Tabs anymore no error message nothing….
Btw. I inserted your code at line: 48 in the sidebar.php directly under:
They where acutally code which was involved with tabs but I guess that was the old original code in sidebar.php so I removed it and replaced it with your code above…
Maybe you send me your sidebar.php directly? Or I can send you mine?
regards
s!
worked like a charm, will post the link when I go live. thanks