Pin It

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]
<?php wp_enqueue_script("jquery"); ?>
[/php]


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]
<?php the_post_image(‘medium’);?>
the_post_image(); // without parameter -> Thumbnail
the_post_image(‘thumbnail’); // Thumbnail
the_post_image(‘medium’); // Medium resolution
[/php]

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]
<?php the_post_thumbnail(array( 200,200 ), array( ‘class’ => ‘alignleft’ ));?>
[/php]

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:

[php]
<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>
[/php]

An then just include this in your theme sidebar :

[php]
<?php include (‘sidebar_tabs.php’) ?>
[/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


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • http://paintndesign.com PHILIP

    YOUR A GENIUS THANKS SO MUCH, 3HOURS OF SEARCHING

  • Mahesh Rao

    I am going to implement the tabs in a Thesis theme. thanks for the handy note.

  • Nina

    Hello,

    Do your sidebar tabs also work with WordPress 3.1.3. ?
    I downloaded it.
    Then I did: Plugins –> Add new –> Upload –> Selected the file –> activate plugin
    Afther that I get the folowing Error: The plugin does not have a valid header.

    When I return to the plugin page, I can’t see your plugin.
    What am I doing wrong?

    Thank you,
    Nina

  • http://interviewpuzzle.blogspot.com Adhi

    Nice useful article keep posting like this.. Thanks for sharing this info.
    My Blog

  • http://www.oriium.com.au IT Solutions

    Thanks this is very helpful and has resolved my problem

  • http://www.TheHungryI.org @KarmaTiger

    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

    • Nathan

      Did you get this sorted out? Curious for my own site.

      • http://desizntech.info Kawsar Ali

        I have updated the file name, Now it should work. Sorry for the trouble.

    • http://desizntech.info Kawsar Ali

      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

      • http://www.pubsforplebs.com Nathan

        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.

  • Nathan

    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.

    • http://desizntech.info Kawsar Ali

      Fixed, Thanks for pointing out

  • Hermitbiker

    …. excellent tutorials and trouble-shooting for jQuery and WordPress, thanks “Desizntech” !!

  • http://www.animhut.com/ sriganesh

    thanks for sharing this tutorial, ill try to apply, i always like tab option and it reduce the space in the sidebar.