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.

With Wordpress’s one-click update, it’s so easy and I HIGHLY recommend that you upgrade to the latest version of Wordpress.  Previous versions have major security holes in them that are actively being exploited en masse by online hackers.

Go Download Wordpress 2.8.5 Now!

You can read more about the security updates in the latest Wordpress release, which gives a great list of all the bugs and exploits that they fixed up.

If you need help in upgrading (especially from an older install), I can jump in an help as well.

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.

WP Spam Free

WP-SpamFree is the worlds greatest (in my opinion) anti-spam plugin for Wordpress.  No signups or registrations, no captcha forms, no configuration, and works with most comment forms and contact forms that I’ve ever used.  Prevents trackback spam, comment spam, and contact form spam.  Just install and you’re done.  The nifty little widget on the admin dashboard even tracks how many spam messages were blocked by the software.

WP Super Cache

WP Super Cache is a nice little plugin that helps speed up a site by caching pages, and making it act just like a static page.  Speed is a major factor to visitors of your site.  If the site loads slow, they may not ever return – no matter how good your message is.  This plugin does require a bit of setup, but makes you look like a star in the end for developing such a fast site.

DB Backup

Stuff Happens! (Or something like that).  The point is, always be prepared for the worst. Database backups that can be emailed to you  on a daily basis are a lifeline when your hosting companies machines suddenly fall ill.  Yes, it happens, but it doesn’t have to be the end.  This is always a major comfort to clients knowing that a backup is only an email away.

Google Sitemap Generator

Sitemaps are collection of all your posts and pages rolled up into one really nice XML file that Google, and the other major search engines recognize, and even look for, to help put your site into the search engines.  The really great thing is that after every post, your site will have a brand new sitemap file created, and will notify the major search engines that your sitemap file has been updated.  Hows that for convenient?

CFormsII

Contact forms are essential to a Wordpress blog or website.  I chose CForms II, not because of it’s simplicity, but because of it’s advanced layout and design.  There is a bit of legwork involved in setting up a new form,  but since I’m the admin of the blog, I never worry about it for clients.  But if you’re thinking of setting up a CForms II contact form, it’s a bit clunky at first, but the CSS styling & designs make it completely worth it.

Forms can be set to auto-respond a message to the form reader, a captcha form can be included (but if you use the WP SpamFree plugin, you won’t need it),  you can use it for your comment forms, you can install a Tell-A-Friend, and many other features.  The help page is extensive, and there is an active forum that CFormsII hosts as well for support.

HeadSpace2

There are only 2 real contenders in the Wordpress SEO plugin category, and I always use HeadSpace2 because of it’s ease of use, and expanded functionality.  Making Titles and Meta information unique and relevant is swift and painless with this little plugin.

StatPress SEOlution

Everyone likes stats, and real time complete stats are even better.  StatPress SEOlution is a branch of the original StatPress plugin, but includes some extra information and charts that the original didn’t have.  At a glance a client can determine how many visitors they’ve had, page views, spiders, referrers and what search terms are being used to find their site.

I also recommend clients have a Google Analytics account if they are serious about stats/tracking, but most have found that this plugin gives them all the information they need.  It also is one less username and password to remember, which is a big bonus for many as well.

WP Security Scan

In todays world, you can never be too secure.  In the online world, it’s not a matter of “If” it’s a matter of “When” your site will get hacked.  This plugin makes sure that your site is up to snuff to beat back a majority of the hacking attempts that will happen.  Things like file permissions, Wordpress version and more.  And remember, from a security standpoint, use the latest version of Wordpress.  Often times the updates are security enhancements that hackers have found and are exploiting.  Not upgrading leaves your site easy to compromise.

TinyMCE Advanced

This neat little plugin makes Post and Page writing in Wordpress a breeze.  If you understand the MS Word interface (or similar WYSIWYG ), then this will make creating pages/posts more intuitive than what the default visual editor can give you.

All of these plugins can be found on the Wordpress Plugins page, with the exception of CFormsII, which prefers to leave it’s plugin on it’s own site.

There are many other plugins that can be installed, but I consider these to be the core plugins that every client gets because of the versatility,functionality and value that each one of them provides clients.

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!

HeadSpace2 is simple to use, and provides a reliable mechanism to change meta data on a per group basis, or on a finer grained per-post basis.

Titles of a page are about as important as important gets in SEO, so making sure that each page has the right title is important, but sometimes one doesn’t have the time to create a title every time, so a generic backup title is in order, and HeadSpace delivers beautifully.

You can set defaults for the following groups of Wordpress writings:

• Global (default if nothing else fits)
• Homepage
• Posts
• Pages
• Categories
• 404 (not found)
• Search Pages
• Tags
• Archives
• Authors

And besides title tags, HeadSpace2 allows one to modify data for:

• Tags/Keywords
• Titles
• Description
• Site Name
• Site Description
• Custom ‘More Text’
• Noindex & Nofollow Tags
• Robots.txt
• Custom Themes
• Custom Plugins
• And More!

There is also the ability to use some advanced features like Google Analytics, though I’ve never used any of the advanced solutions.

For the most part, I just use the defaults in case I forget to set a title tag and description, and use the text boxes inside of each page and post that reminds me that I need to add the proper title tags to each page and post.

HeadSpace2 gets two thumbs up from me, as I’ve found it easy to install, and use.   And having used it for more than a year, I’ve seen the plugin continue to be supported by the author, which is another huge bonus to have plugins continue to be supported by the author.  If you have a chance to, I highly recommend that you stop by the  HeadSpace2 site, and drop a few dollars his way to let him know you find his plugin useful as well.