Getting the most out of WordPress

Those are the top elements that you'll need to know for jQuery, now lets take a look at what can be done to keep things running smooth on the WordPress side. First up, the more you know how to leverage your theme's hierarchy the more easily you can create views and pages to leverage with jQuery.

The WordPress template hierarchy

Need to work with the theme a bit? Understanding the Template Hierarchy can really help you create the view you need with minimal programming headaches. The following list contains the general template hierarchy's 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. This 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.

  

  Note

  You can learn more about the WordPress theme template hierarchy here: http://codex.wordpress.org/Template_Hierarchy.

Top WordPress template tags

The following are the top WordPress template tags that I find most useful for helping out with jQuery and theme development:

Template Tag	Description	Parameters
bloginfo() Sample: bloginfo('name');	Displays your blog's information supplied by your user profile and general options in the Administration Panel. More Info: http://codex.wordpress.org/Template_Tags/bloginfo.	Any text characters you want to appear before and after the tags, as well as to separate them —name, description, url, rdf_url, rss_url, rss2_url, atom_url, comments_rss2_url, pingback_url, admin_email, charset, version. Default: No parameters will display anything. You must use a parameter.
wp_title() Sample: wp_title('——',true,'');	Displays the title of a page or single post. Note: Use this tag anywhere outside The Loop. More Info: http://codex.wordpress.org/Template_Tags/wp_title.	Any text characters you want to use to separate the title—("--"). You can set up a Boolean to display the title— ("--", "false"). As of version 2.5+: You can decide if the separator goes before or after the title —("--", true, "right"). Default: No parameters will display the page title with a separator if a separator is assigned its default to the left.
the_title() Sample: the_title('<h2>', '</h2>');	Displays the title of the current post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/the_title.	Any text characters you want to appear before and after the title —("<h2>","</h2>"). You can also set a Boolean to turn the display to false —("<h2>","</h2>", "false"). Default: No parameters will display the title without a markup.
the_content() Sample: the_content('more_link_text', strip_teaser, 'more_file');	Displays the content and markup you've edited into the current post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/the_content.	As you can add text to display the "more link", a Boolean to show or hide the "teaser text", there is a third parameter for more_file that currently doesn't work—("Continue reading" . the_title()). You can also set a Boolean to turn the display to false —("<h2>","</h2>", "false"). Default: No parameters will display the content for the post with a generic "read more" link.
the_category() Sample: the_category(', ');	Displays a link to the category or categories a post is assigned to. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop) More Info: http://codex.wordpress.org/Template_Tags/the_category.	You can include text separators in case there's more than one category —('&gt;'). Default: No parameters will display a comma separation if there is more than one category assigned.
the_author_meta() Sample: the_author_meta();	Displays the author of a post or a page. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/the_author_meta.	This tag accepts a large amount of parameters. They are covered in the previous sections you can also check out the codex.
wp_list_pages() Sample: wp_list_pages('title_li=');	Displays a list of WordPress pages as links. More Info: http://codex.wordpress.org/Template_Tags/wp_list_pages.	title_li is the most useful as it wraps the page name and link in list tags <li>. The other parameters can be set by separating with an "&": depth, show_date, date_format, child_of, exclude, echo, authors, sort_column. Default: No parameters will display each title link in an <li> list and include an <ul> tag around the list (not recommended if you want to add your own custom items to the page navigation).
wp_nav_menu(); Sample: wp_nav_menu( array('menu' => 'Main Nav' ));	Displays a list of menu items assigned to a WordPress 3.0+ menu, as links. More Info: http://codex.wordpress.org/Function_Reference/wp_nav_menu.	This tag accepts a large amount of parameters, the most common parameter is the name of the menu set up in the menu tool in the Administration Panel. If no menu is available, the function will default to the wp_list_pages(); tag. Please see the codex for more parameters.
next_post_link() Sample: next_post_link('<strong> %title </strong>');	Displays a link to the next post which exists in chronological order from the current post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/next_post_link.	Any markup and text characters you want to appear—(<strong>%title</strong>). %link will display the permalink, %title the title of the next post. Default: No parameters will display the next post title as a link followed by angular quotes (>>).
previous_post_link() Sample: previous_post_link('<strong> %title </strong>');	Displays a link to the previous post which exists in chronological order from the current post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/previous_post_link.	Any markup and text characters you want to appear —(<strong>%title</strong>). %link will display the permalink, %title the title of the next post. Default: No parameters will display the previous post title as a link preceded by angular quotes (<<).
comments_number() Sample: comments_number('no responses', 'one response', '% responses');	Displays the total number of comments, Trackbacks, and Pingbacks for a post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/comments_number.	Lets you specify how to display if there are 0 comments, only 1 comment, or many comments—('no responses','one response','% responses'). You can also wrap items in additional markup—("No Comments","<span class="bigNum">1</span> response","<span class="bigNum">%</span> Comments"). Default: No parameters will display: No comments, or 1 comment, or ? comments.
comments_popup_link() Sample: comments_popup_link('Add Your Thoughts');	If the comments_popup_script is not used, this displays a normal link to comments. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/comments_popup_link.	Lets you specify how to display if there are 0 comments, only 1 comment, or many comments—("No comments yet", "1 comment so far", "% comments so far (is that a lot?)", "comments-link", "Comments are off for this post"). Default: No parameters will display the same default information as the comments_number() tag.
edit_post_link() Sample: edit_post_link('edit', '<p>', '</p>');	If the user is logged in and has permission to edit the post, this displays a link to edit the current post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/edit_post_link.	Any text that you want to be in the name of the link, plus markup that you'd like to come before and after it—("edit me!", "<strong>", "</strong>"). Default: No parameters will display a link that says "edit" with no additional markup.
the_permalink() Sample: the_permalink();	Displays the URL for the permalink to the current post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/the_permalink.	This tag has no parameters.
the_ID() Sample: the_ID();	Displays the numeric ID of the current post. Note: Use this tag in The Loop. (See Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for how to set up The Loop.) More Info: http://codex.wordpress.org/Template_Tags/the_ID.	This tag has no parameters.
wp_get_archives() Sample: wp_get_archives('type=monthly');	Displays a date-based archives list. More Info: http://codex.wordpress.org/Template_Tags/wp_get_archives.	You can set parameters by separating them with an "&"—('type=monthly&limit=12'). The other parameters are type, limit, format, before, after, show_post_count. Default: No parameters will display a list of all your monthly archives in HTML format without before or after markup and show_post_count set to false.
get_calendar() Sample: get_calendar(false);	Displays the current month/year calendar. More Info: http://codex.wordpress.org/Template_Tags/get_calendar.	A Boolean value can be set which will display a single-letter initial (S = Sunday) if set to true. Otherwise, it will display the abbreviation based on your localization (Sun = Sunday)—(true) Default: No parameters will display the single-letter abbreviation.

Conditional tags

The conditional tags can be used in your template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog. With the is_home() conditional tag, that task is made easy.

There are conditional tags for just about everything, out of all of them, these are the seven I find I need most in my theme development:

• is_admin()

• is_page()

• is_single()

• is_sticky()

• is_home()

• is_category()

• in_category()

All of those functions can take the following parameters: either the post ID or page ID number, the post or page title, or the post or page slug.

The first conditional tag, is_admin(), you'll notice we used throughout this title, along with is_home() to load up our wp_enqueue_scripts so that we can avoid having the script load if we're looking at some aspect of the theme from the admin panel (reviewing theme's for instance). The scripts could conflict with scripts in the admin panel so it's best to make sure they only load when not loading the theme from the admin panel.

Also, if you have any jQuery scripts that only affects the home page, say, a "sticky post rotator" script or something similar, you might want to consider placing that wp_enqueue_script call inside an if(is_home()){wp_enqueue_script(//)} call. This way, the script will only load up on the page you need it, and not on every page of the site, even when it's not being used.

As for the rest of the conditional tags, as great as theme's are, I'm sure you've run into the conundrum that you or your client doesn't want the exact same sidebar on every single page or post.

I use these conditional tags so that specific pages can have particular styles or divs of content turned on and off, and display or not display specific content. These seven tags really help give my client's custom themed sites a true, custom website feel and not that standard: "nice design, but every page has the exact same sidebar, this is probably another WordPress site" feel.

The conditional tag fun doesn't end there. There are many more that you may find invaluable in aiding your theme's customization, listed here: http://codex.wordpress.org/Conditional_Tags.

Quick overview of loop functions

All those template and conditional tags are one thing, it's another to apply them within the loop. In quite a few chapters of this book, we had to amend the loop in a theme's template file or create a custom one. The following table contains a description for each part of The Loop.

Loop functions	Description
<?php if(have_posts()) : ?>	This function checks to make sure that there are posts to display. If so, the code continues onto the next function below.
<?php while(have_posts()) : the_post(); ?>	This function shows the posts that are available and continues onto the next function below.
<?php endwhile; ?>	This function closes the while(have_posts... loop that was opened above once the available posts have been displayed.
<?php endif; ?>	This function ends the if(have_posts... statement that was opened above once the while(have_posts... loop has completed.

Setting up WordPress shortcodes

This whole appendix has been about useful references. We should take a quick look at shortcodes. They were first introduced in version 2.5. If you're comfortable with writing functions in WordPress, shortcodes can help you take longer bits of code (such as custom loops and complex template tag strings) or even just markup and text that you feel you'd use a lot in your theme (or plugin) and allow you to compress them in to cleaner, simpler bit of reusable code. You can add shortcodes to your theme's functions.php file.

You're probably familiar with shortcodes and may not realize it. If you've ever taken a look at how WordPress's media manager inserts captions into images, you've probably noticed something like:

...
[caption id="attachment_12" align="alignleft" width="150"
caption="this is my caption"]<img src.../>[/caption]
...

That's a built in shortcode for captions and alignment in WordPress.

To create a shortcode, you do need to create a PHP function in your theme's functions.php file. If your theme does not have a functions.php file, simply create a new file and name it functions.php and place it in the root of your theme's directory.

Creating a basic shortcode

We'll start off by opening up our functions.php file and at the end of it, create a simple function that returns a string of text and markup for our shortcode like so:

<?php
...
function quickadd() {
//code goes here
$newText = 'This page is brought to you by
<a href="#">the letter Z</a>';
return $newText;
}
?>

Now, to really take advantage of shortcodes, you do need to know some PHP which, to fully cover, is a bit beyond the scope of this title. But even without much PHP experience, if you follow this example, you'll start to see how flexible this WordPress feature is in saving you time, not just in your theme, but in your day-to-day use of WordPress.

In the previous sample, inside our function brackets {}, I set up a very basic variable $donateText and assigned it a string of text and markup.

The return statement is a very basic PHP function that will make sure our quickadd function passes back whatever has been assigned to that variable.

We're now ready to use WordPress' add_shortcode() function by adding it just underneath our quickadd function that we previously set up. The add_shortcode function has two parameters. For the first parameter, you'll enter in a reference name for your shortcode and in the second, you'll enter in the name of the function that you'd like your shortcode to call, like so:

...
add_shortcode('broughtby', 'quickadd');
?>

Now the fun part: Pick any template page in your theme and use the broughtby shortcode by simply adding in:

...
[broughtby]
...

Wherever you paste that [broughtby] shortcode in your theme's template files, the This page is brought to you by the letter Z text, with a link to the letter's page, will appear!

Bonus: You are not restricted to using this shortcode in just your template files! Paste it directly into a post or page through the Administration panel, you'll get the same result. And, you guessed it, the output from shortcodes are easily leveraged and enhanced by jQuery!

If you have an enhancement that might take a bit more HTML markup than the WYSIWYG editor in WordPress can handle, and the site's content editor is overwhelmed by switching over to the HTML view, creating a solution with a shortcode may be just what you need! For example, it would be much easier for your client to add a set of square brackets with some parameters than mark up a definition list, which the basic WYSIWYG editor doesn't allow for.

This would turn:

...
<dl>
<dt><a href='#'>Event Name and Location</a></dt>
<dl>Event description</dl>
</dl>
...

Into a simpler:

...
[event title="Event Name and Location"
description="Event description" url="#"]
...

In addition to helping out WordPress content editors with markup, shortcodes are a wonderful way to shortcut your time if you're a busy WordPress content author. Even if you're not creating your own theme from scratch, you can easily add your own shortcodes to any theme's functions.php file and ramp up your productivity.

Those of you more comfortable with PHP can take a look at WordPress' Shortcode API and see how to extend and make your shortcodes even more powerful by adding parameters to them: http://codex.wordpress.org/Shortcode_API.