(For more resources on WordPress and jQuery, see here.)
Two ways to “plugin” jQuery into a WordPress site
You’re aware that WordPress is an impressive publishing platform. Its core strength lies in its near perfect separation of content, display, and functionality. Likewise, jQuery is an impressive JavaScript library with a lot of effort spent on making it work across platforms, be very flexible and extensible, and yet, elegantly degradable (if a user doesn’t have JavaScript enabled for some reason).
You’re aware that WordPress themes control the look and feel of your site and that WordPress plugins can help your site do more, but we’re going to take a look at exactly how those two components work within the WordPress system and how to use jQuery from either a theme or a WordPress plugin. In doing so, you’ll be better able to take advantage of them when developing your jQuery enhancements.
Speaking of jQuery enhancements, jQuery scripts can be turned into their own type of plugins, not to be confused with WordPress plugins. This makes the work you do in jQuery easily portable to different projects and uses.
Between these three components, themes, WordPress plugins, and jQuery plugins, you’ll find that just about anything you can dream of creating is at your fingertips. Even better, you’ll realize that most of the work is already done. All three of these component types have extensive libraries of already developed third-party creations. Most are free! If they aren’t free, you’ll be prepared to determine if they’re worth their price.
By understanding the basics of editing themes and creating your own WordPress and jQuery plugins, you’ll be ready to traverse the world of third-party creations and find the best solutions for your projects. You’ll also be able to determine if it’s better or faster to work with another developer’s themes, plugins, or jQuery plugins, versus creating your own from scratch.
WordPress themes overview
A WordPress theme is, according to the WordPress codex, a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. Themes comprise a collection of template files and web collateral such as images, CSS stylesheets, and JavaScript. Themes are what allow you to modify the way your WordPress site looks, without having to know much about how WordPress works, much less change how it works. There are plenty of sites that host free themes and or sell premium WordPress themes. A quick Google search for “wordpress themes” will give you an idea of the enormity of options available. However, when first looking for or researching themes, a good place to start is always WordPress’ free theme gallery where you can easily review and demo different themes and styles: http://wordpress.org/extend/themes/. The next screenshot shows the main page of the WordPress theme’s directory:
(Move the mouse over the image to enlarge.)
Once you’ve selected a theme to use or work with, you’ll activate the theme by navigating to Administration | Appearance | Themes in the left-hand side panel of your WordPress installation’s administration panel. The next screenshot displays the Manage Themes panel:
That’s the minimum you need to know about themes as a WordPress user.
The basics of a WordPress theme
The WordPress theme essentially contains the HTML and CSS that wrap and style your WordPress content. Thus, it’s usually the first place you’ll start when incorporating jQuery into a site. Most of the time, this is a good approach. Understanding a bit more about how themes work can only make your jQuery development go a little smoother. Let’s take a look at how themes are structured and best practices for editing them.
Want to know more about WordPress theme design?
This title focuses on what you most need to know to work with jQuery in WordPress. If you’re interested in WordPress theme development I highly recommend April Hodge Silver and Hasin Hayer’s WordPress 2.7 Complete. Along with covering the complete core competencies for managing a WordPress site, it has an overview on editing and creating standard themes for WordPress.
If you want to really dig deep into theme design, my title WordPress 2.8 Theme Design will walk you through creating a working HTML and CSS design mockup and coding it up from scratch.
Understanding the template’s hierarchy
We’ve discussed that a WordPress theme comprises many file types including template pages. Template pages have a structure or hierarchy to them. That means, if one template type is not present, then the WordPress system will call up the next level template type. This allows developers to create themes that are fantastically detailed, which take full advantage of all of the hierarchy’s available template page types, to make the setup unbelievably simple. It’s possible to have a fully functioning WordPress theme that consists of no more than an index.php file!
To really leverage a theme for jQuery enhancement (not to mention help you with general WordPress troubleshooting), it’s good to start with an understanding of the theme’s hierarchy.
In addition to these template files, themes of course also include image files, stylesheets, and even custom template pages, and PHP code files. Essentially, you can have 14 different default page templates in your WordPress theme, not including your style.css sheet or includes such as header.php, sidebar.php, and searchform.php. You can have more template pages than that if you take advantage of WordPress’ capability for individual custom page, category, and tag templates.
If you open up the default theme’s directory that we’ve been working with, you’ll see most of these template files as well as an image directory, style.css and the js directory with the custom-jquery.js file. The following screenshot shows you the main files in WordPress 3.0’s new default theme, Twenty Ten:
The next list contains the general template hierarchy rules. The absolute simplest theme you can have must contain an index.php page. If no other specific template pages exist, then index.php is the default.
You can then begin expanding your theme by adding the following pages:
- archive.php trumps index.php when a category, tag, date, or author page is viewed.
- home.php trumps index.php when the home page is viewed.
- single.php trumps index.php when an individual post is viewed.
- search.php trumps index.php when the results from a search are viewed.
- 404.php trumps index.php when the URI address finds no existing content.
- page.php trumps index.php when looking at a static page.
- A custom template page, such as: page_about.php, when selected through the page’s Administration panel, trumps page.php, which trumps index.php when that particular page is viewed.
- category.php trumps archive.php, which then trumps index.php when a category is viewed.
- A custom category-ID page, such as: category-12.php trumps category.php. This then trumps archive.php, which trumps index.php.
- tag.php trumps archive.php. This in turn trumps index.php when a tag page is viewed.
- A custom tag-tagname page, such as: tag-reviews.php trumps tag.php. This trumps archive.php, which trumps index.php.
- author.php trumps archive.php. This in turn trumps index.php, when an author page is viewed.
- date.php trumps archive.php. This trumps index.php when a date page is viewed.
You can learn more about the WordPress theme template hierarchy here:http://codex.wordpress.org/Template_Hierarchy.
A whole new theme
If you wanted to create a new theme or if you’ll be modifying a theme considerably, you’ll want to create a directory with a file structure similar to the hierarchy explained previously. Again, because it’s hierarchal, you don’t have to create every single page suggested, higher up pages will assume the role unless you decide otherwise. As I’ve mentioned, it is possible to have a working theme with nothing but an index.php file.
I’ll be modifying the default theme, yet would like the original default theme available for reference. I’ll make a copy of the default theme’s directory and rename it to: twentyten-wp-jq. WordPress depends on the theme directories namespace. Meaning, each theme requires a uniquely named folder! Otherwise, you’ll copy over another theme. The next screenshot shows this directory’s creation:
I’ll then open up the style.css file and modify the information at the beginning of the CSS file:
/*
Theme Name: Twenty Ten – <b>edited for Chapter 3
of WordPress & jQuery</b>
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team <b>& Tessa Silver</b>
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width,
custom-header, custom-background, threaded-comments,
sticky-post, translation-ready, microformats, rtl-language-support,
editor-style
*/
…
My “new” theme will then show up in the administration panel’s Manage Themes page. You can take a new screenshot to update your new or modified theme. If there is no screenshot, the frame will display a grey box. As the look of the theme is going to change a little, I’ve removed the screenshot.png file from the directory for now, as you can see in the next screenshot:
The Loop
We know how useful it is when jQuery “loops” through selected elements in a wrapper for you. WordPress does a little looping of its own; in fact, it’s important enough to be named “The Loop”. The Loop is an essential part of your WordPress theme. It displays your posts in chronological order and lets you define custom display properties with various WordPress template tags wrapped in HTML markup.
The Loop in WordPress is a while loop and therefore starts with the PHP code: while (have_posts()): followed by the template tag the_post(). All the markup and additional template tags are then applied to each post that gets looped through for display. The Loop is then ended with the PHP endwhile statement.
Every template page view can have its own loop so that you can modify and change the look and layout of each type of post sort. Every template page is essentially, just sorting your posts in different ways. For example, different category or tag template pages sort and refine your posts down to meet specific criteria. Those sorted posts can appear different from posts on your main page, or in your archive lists, and so on. The next example is a very simple loop taken from WordPress 2.9.2’s default Kubrick theme:
…
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h2>
<a href=”<?php the_permalink() ?>”
rel=”bookmark” title=”Permanent Link to
<?php the_title_attribute(); ?>”>
<?php the_title(); ?>
</a>
</h2>
<small><?php the_time(‘F jS, Y’) ?>
<!– by <?php the_author() ?> –>
</small>
<div class=”entry”>
<?php the_content(‘Read the rest of this entry »’); ?>
</div>
<p class=”postmetadata”>
<?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’); ?>
Posted in <?php the_category(‘, ‘) ?> |
<?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?>
<?php comments_popup_link(‘No Comments »’,
‘1 Comment »’, ‘% Comments »’); ?>
</p>
</div>
<?php endwhile; ?>
…
The loop is tucked into a large if/else statement that most importantly checks if there are posts to sort. If there are no matching posts to display, a “Sorry” message is displayed, and the searchform.php file is included with the get_search_form() include tag.
The new WordPress 3.0 Twenty Ten theme has its loop separated out into its own template page called loop.php, and it has quite a few more if/else statements within it so that the same loop code can handle many different situations, instead of writing individual loops for different template pages. On the whole, the same basic template tags as well as conditional and include tags are used in the new theme as they were before in the previous default theme. There are now just a few new template and include tags that help you streamline your theme.
Let’s take a closer look at some of these template tags, include and conditional tags, and the API hooks available to us in a WordPress theme.
