Remember that our final goal is to create a page like this one that we created for Mox & Dom. It has tabs within an accordion.

But for Part III of this series, we’re going to just get the accordion laid out so that it looks something like this:

jQuery Accordion Demo

So let’s get started

There’s 2 parts to any jQuery insertion. The HTML Layout, and the jQuery calls that reference the HTML layout. Let’s start with the HTML layout first.

Here’s the exact HTML code I’m using for the demo above. Just add this into your Wordpress post or page.

Yes, that is the exact code. And yes, it really is this easy!

Basically you have a div with an id of accordion (line #1), the H3 tags (line #’s 2&7) provide the accordion titles, and the href of # in the anchor tags is used by jQuery to open and close the accordion. The div right after your H3 tags is where you put your content.

See? Easy!

Now let’s take a look at the jQuery call.

Remember from the previous post that we created a file called accordion-tabs.js an put it into the /wp-content/themes/theme-name/js/ directory

Inside of the accordion-tabs.js file all we need are the following lines of code:

3 Lines of jQuery code.   Cool, Huh?

And if you want to get fancy, you can add some fun options too like this:

Checkout the jQueryUI docs for more options you can use.

At this point, you should have a working accordion that opens and closes, and displays all the hidden content, one panel at a time. As you can see, this can be a HUGE space saver on a busy website.

This concludes part III, next up is part IV of our five part series, where we will introduce you to tabs. Keep an eye out for it!

To start, we need to insert the jQuery core library and the jQuery UR library into your Wordpress theme, so that we have access to all the pre-built functions that jQuery provides.

There are 2 different libraries that we’ll need to download, the core jQuery library, and the user interface libraries for tabs and accordions. The core jQuery library is included with the jQuery UI library download, so there’s only one file to download.

Go download the jQueryUI libraries here.

There is a long page of options, but if you read the top paragraph, you’ll see that there is a quick download link for the current version (1.7.2 as of this writing).  I recommend the quick download to get started. You can also create your own customized version with a custom css theme and if you choose to go that route, just make sure that you have the accordion and tabs widgets selected.

After the files are downloaded, unzip them into a safe place on your hard drive. We will need 3 files from this download, 2 javascript files and one css file.

The two javascript files we’ll need are jquery-ui-1.7.2.custom.min.js and jquery-1.3.2.min.js, located in the js directory.  The css file we’ll need is called jquery-ui-1.7.2.custom.css, and is located in the css directory of the download.

Next step – upload the files into your theme.

For this tutorial, I assume you know how to use an FTP client like Filezilla and know the location of your theme in wordpress.

I like to create a js and css directories in my theme for my custom javascript and css stylesheets.

I assume for this tutorial that you will be using a structure such as /wp-content/themes/theme-name/js and /wp-content/themes/theme-name/css for the directory location of your uploaded files.

Go ahead and upload the two javascript files and one stylesheet now.

Now we’ll need to modify the header.php file in your theme.  I’ve been told that they need to go below your call to wp_head(), as shown below.

Since you know that you’re going to need to add some custom code, let’s insert the call to where you’ll put that custom code for your accordion and tabs.  Don’t worry about putting anything in it, we’ll take care of that soon.

After you’ve saved the header.php file, load up your site, and look at the source to verify that it’s there, and being found.  Firefox makes the links to .js and .css files hyperlinks, so I click on them and verify that the files are found.

At this point, we’ve downloaded the proper jQuery files, uploaded them into your Wordpress themes directory, and made the proper calls in the header.php, and everything should be ready to go.

In the next part of the series, we’re going to be creating a jQuery accordion with one simple javascript call…. stay tuned!

Before you get all edgy that this whole jQuery / javascript thing is over your head, I want to assure you that this tutorial won’t require you to do ANY javascript programming. Just some cut and paste from my tutorial to your site.

If you can handle HTML and CSS, and know the file structure of Wordpress, you’re golden.

Ready?

Let’s move on to Part II – Inserting jQuery Into Wordpress.

I had at first tried out the FeedBurnerCount wordpress plugin, but I couldn’t ever get it to register my feed count. So after digging a little deeper, I found examples that were similar to what I needed, but not quite what I was looking for.

What I have below is the culmination of several ideas from many authors, and piled them into one conglomeration that works as of Wordpress 2.8.5.

The first thing I did was to add the following into my functions.php file in my theme:

On line 1 we include the snoopy class, which is an open source library of functions to access other networks.

Line 3 declares a new function called feedburner_textcount, that takes an optional argument.  The argument can be anything you want, and if an argument is used, will return the value to be used in functions, otherwise, it will echo the result out, as is usually needed for HTML output.

This is also the function name that we’ll use in a bit to put the feedcount in place.

The rest of the code is mostly for obtaining the feed count and storing it in the database.

Line 18 is what checks for the input arguments.  If an argument was found, it returns the value, otherwise it echos it out (which is what you want most of the time).

Then to display the code in the sidebar, you’ll want to display something like this in sidebar.php:

I chose to have a return value and echo $subs (the number of subscribers), but you should also be able to do this if you want to:

That’s really about it.  Just create your div for images/text (look at the source of mine as a starting point), and insert your feedburner_textcount() function in the right place, and your subscribers will be listed for the public to see just how popular your blog really is.

But how do you load up a special CSS file, without having to create special classes and ids that will muck up the original CSS file?

The answer lies in selective loading of a stylesheet for only the pages, posts, categories or author pages that you want it to load for.  And the great thing is that it isn’t only for pages or posts.

Below are some code snippets of various selective loading for stylesheets, based on what type of selective page you’re looking for.  If you want more functions to help you be even more selective than what I’ve shown you here, checkout the Wordpress Codex page on Conditional Tags.

First, locate your original stylesheet, which will look something like this:

Or possibly even this:

After you’ve located where your style sheet is, then you just need to decide how you want to be selective.

On a Category Archive Page

This is to style category archives of a particular category so that something like www.mydomain.com/category/special-category looks different from your other category archive pages. You can be selective by category id, category name, or category slug (permalink).  This makes use of the is_category() Wordpress function to get the job done.

On a Particular Post

This is for putting a special style on a particular post, and makes use of the is_single() wordpress function. As with other functions, you can select based on ID, Post Name, or post slug (permalink)

Let Author Pages Stand Out

Let your author pages look different by selecting a different stylesheet.  This is just like the other code selections, but uses the is_author() function.

Set Your Pages Apart

Have a special event that doesn’t fit your blog, try using the is_page() wordpress function.

There are many, many more selective functions that you can use, and I highly recommend that you visit the Wordpress Codex on Conditional Tags to see if there’s another selective function that you can use to style your wordpress blog the way you want it to look.

Good luck!