WordPress and jQuery: Troubleshooting, Implementing Sidebar Tabs and More
WordPress and jQuery can work effectively if implemented correctly. It can enhance your blogs functionality and usability. In this post we will look at some wordpress-jQuery troubleshooting tips, techniques and also how to add tabs to your sidebar.
Troubleshooting jQuery
Let’s start from the top. I did not realize many people also had the same problem until I googled about it. Is jQuery not working with your wordpress theme? There could be several reasons. First, make sure your calling your jQuery the right way, as Jeff Star point out here, which is :
<?php wp_enqueue_script("jquery"); ?>
Put this code right before your wp_head. What this code is, it is calling for the jQuery that is included in your wp-includes folder. The benefit of calling jQuery like this, you do not have to update jQuery every time and you are not calling same file twice. What if your jQuery is not still working? My jQuery was not still working either. I put a test function to check it, the test function work but other scripts were not working . After googling for a while I found out , after updating to wordpress version 2.9, you have to call jQuery in a different way. You have to replace every “$” with jQuery . Here is an example:
This seemed to fix my jQuery problem. All my scripts were working after this. I faced this problem after updating to worpdress 2.9. Before that all the scripts were working. Regardless you should call wordpress with wp_enqueue_script. Also, to make your site faster, here is an old tip. Include all your scripts right before the wp_footer, because if you include them in the header they must load before the body and sidebar can load.
WordPress 2.9 features
There has been already so many post about wordpress 2.9 features such as global undo, included image editor and more. One feature I would like to mention is the_post_image() features. Before we would usually add thumbnails for the post with custom fields hacks. As WordPress Enginner mentions, now we can add the support for thumbnail in our theme by adding this:
<?php the_post_image('medium');?>
the_post_image(); // without parameter -> Thumbnail
the_post_image('thumbnail'); // Thumbnail
the_post_image('medium'); // Medium resolution
When you upload any image and you want to set it as thumbnail you should see an option to set it as thumbnail . What if you want a custom size , you can do it so by following
<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' ));?>
If you want to more customization head over to Webbbzone’s and Kremalicious post for details.
Adding Sidebar Tabs
I mentioned in a previous post how you can add sidebar tabs to your wordpress theme. Up until recently, here at Desizn Tech I was using sidebarTabs . As far as I know, that is only the plugin for tabbed sidebar and there is some tabbed widgets. The problem with that plugin and other Tabbed widgets sometimes plugin do not play nice with each other and some of them do not work. Moreover, you cannot add anything custom. I was looking around the web to see if there already something pre-made for wordpress already. However, I could not find one. That is why I decided to make something that works with wordpress . The original script is from a Nettuts tutorial by Dan Harper. I am just porting it to wordpress. This script uses jQuery UI Tabs. The current effect is ‘”toggle”, you can change it to whatever you prefer. If you want to add this to your website, you would just have to upload the files to your wordpress theme folder. Makes sure jQuery is called and add the following files in your header:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/sidebar_style.css"/>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/sidebar_tab.js"></script>
An then just include this in your theme sidebar :
<?php include ('sidebar_tabs.php') ?>
By default it shows your 5 popular posts, categories, tags. You can also change that to what you want to show. For example:
List pages:
<?php wp_list_pages('title_li='); ?>
Display Archive By Month:
<?php wp_get_archives('type=monthly&limit=12'); ?>
You can also call a plugin to show whatever you want it to show. If you want to style it differently reference to tabs_style.css and style to however you want. You can see a preview of the sidebar working on Desizn Tech’s sidebar.
If you find any bugs or have suggestions please add it in the comments
Thanks the author for article. This is a great post.
Everything works great except the CSS. Even correcting the sidebar_style.css to tab_style.css, the styling works for the tabs themselves but all 3 kinds of information are shown in a conventional, top to bottom linear UL list.
I can’t for the life of me get it to recognisz the .tabdiv class
Did you get this sorted out? Curious for my own site.
I have updated the file name, Now it should work. Sorry for the trouble.
Did you uploaded in the same directory? Make sure it is on the same directory and you can also try hard liking in to test it
I’m having trouble getting -any- jquery tabs to work. When I couldn’t get yours to work, I tried some others, but I keep having the same problem, so I think I’m doing something very basic wrong (which is definitely possible since I’m new to all this). The tabs themselves are there and styled, but nothing gets hidden. Instead, everything gets listed below the tabs.
I still have yours up on my sidebar, so if you get a chance, could you (or anyone who knows what they’re doing, really) take a look and see if you can tell what I’m missing?
I’d very much appreciate it.
Don’t know if this has been pointed out yet, but the example you give for the header uses sidebar_style.css, but the file in the download is actually tabs_style.css. I couldn’t figure out what I was doing wrong until I saw that. Some things still aren’t quite right on mine, but at least now I know why nothing was styled.
Fixed, Thanks for pointing out
Thanks the author for article. The main thing do not forget about users, and continue in the same spirit.
I like this tabs thanks
Nice brief and this enter helped me alot in my college assignement. Say thank you you as your information.
Really useful post. Ive never really got wordpress and jquery to get along. Ill be using this on my next project!
…. excellent tutorials and trouble-shooting for jQuery and WordPress, thanks “Desizntech” !!
These are great. I have just really started with JQuery and this will help a lot. Thanks and keep it up!
Just a note: you don’t have to replace all the $ with jQuery if you use them inside a function called in the following way:
jQuery(document).ready(function($) {
});
Note the $ as a parameter of the function.
You have to use jQuery instead of $ once in calling that function, but then the $ will work inside that.
Stephen Cronin´s last blog : The Solution To The Lack Of WordPress Beta Testing
This is a great post. I’ve always had a bit of trouble implementing jQuery with wordpress. Its good to see this practical examples. I will indeed build off these concepts.
Cheers!!
This surely will come in handy.
Bariski | TutZone.net´s last blog : Winners Of 5 Pro Licenses from Oops!Backup
thanks for sharing this tutorial, ill try to apply, i always like tab option and it reduce the space in the sidebar.