Wordpress Ajax Sidebar Content Manager

WordPress Ajax Sidebar Content Manager

by Chris M on January 11, 2008 in Code with 16 Comments

I’ve noticed that a great deal of WordPress bloggers are starting to make use of ajax and css to reduce the amount of space available on their pages as well as keeping the site simple, neat and minimalist.

I’ve recently added an ajax menu system in my sidebar. It has saved me a great deal of space as well as being very visually pleasing and easy to use. The process of setting this up was quite a mission and there’s a fair amount to do, but don’t worry, I’m going to do my best to explain the process from start to finish. This is what we are aiming to achieve:

Ajax WordPress Sidebar

Let’s get started:

Download, Unrar and Upload these files to the shown locations:

jquery.rar | Theme Folder in wp-content
menu-bullet.rar | Images folder in Theme Folder in wp-content
sidebar-archive.rar | Theme Folder in wp-content
visionary.rar | Theme Folder in wp-content

Next step is to add the css required for all of this:

css.rar | amend to style.css file

Download the css.rar file and extract the .txt file located inside. Copy and paste all the code inside the .txt file into your style.css file. This can be done manually or by using the WordPress built-in Theme Editor under Presentation > Theme Editor.

You will now need to edit your header.php file to include the javascript files you uploaded. Simply click on ‘Presentation’, followed by ‘Theme Editor’ and then click on ‘Header’ located on the right side of your dashboard inside WordPress Admin of course. Once you are at this point, you need to insert the two lines of code below anywhere between <head> and </head>:

Once you have completed the above tasks, the last step is to initiate the sidebar menu system using one line of code, which must be pasted into your sidebar.php file. Once again, this can be done manually or via the WordPress Theme Editor. Here is the code:

<?php include (TEMPLATEPATH . ‘/sidebar-archive.php’); ?>

And that’s it.

Things to note:

You will have to play around with your colours using the code you added to your style.css file
You will have to double check widths to ensure the menu fits correctly on your blog
With a little php/wordpress knowledge, you can adapt the sidebar-archive.php file to display anything you require.

Best of luck, please feel free to trackback to this article or leave a comment!

Chris M

Christopher is the founder of iMod - Most of his time is spent building websites and pushing the limits with Search Engine Optimization. You can follow him on Twitter @ChristopherM