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