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.
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.phptrumpsindex.phpwhen a category, tag, date, or author page is viewed.single.phptrumpsindex.phpwhen an individual post is viewed.search.phptrumpsindex.phpwhen the results from a search are viewed.404.phptrumpsindex.php, when the URI address finds no existing content.page.phptrumpsindex.phpwhen looking at a static page.category.phptrumpsarchive.php. This then trumpsindex.phpwhen a category is viewed.A custom category-ID page, such as:
category-12.phptrumpscategory.php. This then trumpsarchive.php, which trumpsindex.php.
tag.phptrumpsarchive.php. This in turn trumpsindex.phpwhen a tag page is viewed.A custom tag-tagname page, such as:
tag-reviews.phptrumpstag.php. This trumpsarchive.php, which trumpsindex.php.
author.phptrumpsarchive.php. This in turn trumpsindex.php, when an author page is viewed.date.phptrumpsarchive.php, This trumpsindex.phpwhen a date page is viewed.
Note
You can learn more about the WordPress theme template hierarchy here: http://codex.wordpress.org/Template_Hierarchy.
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 |
|---|---|---|
|
Sample:
|
Displays your blog's information supplied by your user profile and general options in the Administration Panel. More Info: |
Any text characters you want to appear before and after the tags, as well as to separate them —
Default: No parameters will display anything. You must use a parameter. |
|
Sample:
|
Displays the title of a page or single post. Note: Use this tag anywhere outside The Loop. More Info: |
Any text characters you want to use to separate the title—(" You can set up a Boolean to display the title—
As of version 2.5+: You can decide if the separator goes before or after the title — Default: No parameters will display the page title with a separator if a separator is assigned its default to the left. |
|
Sample:
|
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: |
Any text characters you want to appear before and after the title — You can also set a Boolean to turn the display to false — Default: No parameters will display the title without a markup. |
|
Sample:
|
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: |
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— You can also set a Boolean to turn the display to false — Default: No parameters will display the content for the post with a generic "read more" link. |
|
Sample:
|
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: |
You can include text separators in case there's more than one category — Default: No parameters will display a comma separation if there is more than one category assigned. |
|
Sample:
|
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: |
This tag accepts a large amount of parameters. They are covered in the previous sections you can also check out the codex. |
|
Sample:
|
Displays a list of WordPress pages as links. More Info: |
The other parameters can be set by separating with an "
Default: No parameters will display each title link in an |
|
Sample:
|
Displays a list of menu items assigned to a WordPress 3.0+ menu, as links. More Info: |
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 Please see the codex for more parameters. |
|
Sample:
|
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: |
Any markup and text characters you want to appear—(
Default: No parameters will display the next post title as a link followed by angular quotes ( |
|
Sample:
|
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 —
Default: No parameters will display the previous post title as a link preceded by angular quotes ( |
|
Sample:
|
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: |
Lets you specify how to display if there are 0 comments, only 1 comment, or many comments— You can also wrap items in additional markup— Default: No parameters will display: No comments, or 1 comment, or ? comments. |
|
Sample:
|
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— Default: No parameters will display the same default information as the |
|
Sample:
|
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: |
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— Default: No parameters will display a link that says "edit" with no additional markup. |
|
Sample:
|
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: |
This tag has no parameters. |
|
Sample:
|
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: |
This tag has no parameters. |
|
Sample:
|
Displays a date-based archives list. More Info: |
You can set parameters by separating them with an " The other parameters are Default: No parameters will display a list of all your monthly archives in HTML format without before or after markup and |
|
Sample:
|
Displays the current month/year calendar. More Info: |
A Boolean value can be set which will display a single-letter initial Default: No parameters will display the single-letter abbreviation. |
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:
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.
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 |
|---|---|
|
|
This function checks to make sure that there are posts to display. If so, the code continues onto the next function below. |
|
|
This function shows the posts that are available and continues onto the next function below. |
|
|
This function closes the |
|
|
This function ends the |
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.
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.