the_title() vs the_title_attribute()

Standard

You might be doing the_title() wrong.

If you have much experience with WordPress, you’ll be familiar with the_title(). This template tag is simply used to generate the title of whatever page or post you’re working with at the current point in The Loop.

Basic Usage of the_title()

    //Inside the Loop

    //Common usage
    <h2><?php the_title() ?></h2>

    //or better yet...
    <?php the_title( '<h2>', '</h2>' ) ?>

Another Common Use of the_title()

Usually a post’s title is wrapped in a link (usually rendered by the template tag the_permalink), and it makes sense to use the post title as the link’s title attribute. So, this is what’s commonly done to generate the link’s title attribute:

    //Inside the Loop

    //Common Post Title Linkage 
    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>" ><?php the_title() ?></a></h2>

    //Just for clarity, this will output the following markup
    <h2><a href="http://mywebsite.com/my-post" title="My Post">My Post</a></h2>

The Problem

The HTML Spec restricts the characters that can be used in HTML attributes (title="" is an example of an attribute). For instance, ampersands (&) are not allowed to be used in attribute values, so you can’t do something like this:

<h2><a href="#" title="Dog & Pony Show">Dog & Pony Show</a></h2>

(It’s important to note that only the first ampersand in this statement is a problem. The second one is just part of the text as far as the browser’s concerned.)

So what can you do if your post title has one of the illegal characters (less than, greater than, ampersand, double quote and single quote) in it?

The Solution

Savvy WordPress devs know to use esc_attr() when outputting a string into a HTML attribute, which is what we just did above: We output the string “Dog & Pony Show” as the value of the attribute ‘title’. esc_attr() converts illegal characters into their HTML Entities, meaning “&” would be encoded to &amp;, then rendered as the correct character by the browser.

This is where the_title_attribute() comes in.

the_title_attribute() basically does two things with your post title: it runs the title string through PHP’s stripslashes() (a common security procedure), then it gets sent through esc_attr() to encode illegal characters. The effective line in WordPress Core literally looks like this:

// From wp-includes/post-template.php
$title = esc_attr(strip_tags($title));

In the end, your post title is all cleaned up and rendered as valid HTML.

Proper Usage

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute() ?>" ><?php the_title() ?></a></h2>

//Which will render
<h2><a href="http://my-website.com/dog-pony-show" title="Dog $amp; Pony Show" >Dog & Pony Show</a></h2>

Conclusion

the_title_attribute() is a little-known tool in the developer’s toolbox, but it sure is handy. Be sure to include it in your next Plugin/Theme files.

What other little-known helper functions do you know? Share them in the comments!

Make Relative URLs with home_url()

Standard

Let me start this one by explaining how I discovered its use. I was building a theme for a customer for use on their existing WP site, and they wanted a custom menu designed that pointed to specific pages, meaning the links had to be hard-coded into the theme.

(I know… this isn’t optimal, but it was actually more efficient to do it this way than to design custom widget areas in this case. You can see the mega menu in action here, at Frederick Boulevard.)

Regardless, I found a neat trick with home_url(). Normally people use it to simply point to the home URL of a site, so it is used like this:

<a href="<?php echo home_url(/); ?>">

When used in this manner, it will point to the base URL of the site using the theme, which, for instance will return

<a href="http://frederickboulevard.com">

Now, if you want to point to a specific page on the site from your theme, pass the page’s path as an argument in the function. It will look something like this:

<a href="<?php echo home_url(/i-am-new/); ?>">I Am New</a>

Which will output

<a href="http://frederickboulevard.com/i-am-new/">I Am New</a>

Add and Customize a WordPress Search Form

Standard

To add the default search form to any theme, simply add the template tag
<?php get_search_form(); ?>.

It will output a basic search form that looks like this:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

If you want your own custom search form, create searchform.php and include something like this:

<form action="/" method="get">
<fieldset>
<label for="search">Search in
<input type="text" name="s" id="search" value="" />
<input type="image" alt="Search" src="/images/search.png" />
</fieldset>
</form>

WordPress will check for the existence of searchform.php before it includes the default search form.

More from the WordPress Codex.

Get specific with CSS by using body_class()

Standard

body_class() is a template tag that can be a very useful tool to target content on specific pages.

How it works

Adding it to a theme is pretty easy. In header.php it goes along with the <body> tag thusly:

<body <?php body_class(); ?> >

and it outputs something like this (depending on what page you are viewing):

<body class="home blog">

…and the output changes to indicate if you are on pages, posts, archives, etc.

How This is Useful

Let’s say the text on your site is black, but you want it to be blue on just the home page. By adding body_class() you can target your home page, and your CSS will look something like this:

body {
color: black;
}

body.home {
color: blue;
}

Of course, there are many other (more useful) applications for this tool. It can also help out when writing jQuery scripts that use CSS classes to perform actions.

Other Helps

Here is a list of possible classes output by body_class().

If you want to do the same thing but with posts instead of your whole body, you can use post_class().

body_class() is great for CSS and jQuery, but if you are trying to target your home page in PHP, you can use is_home()… but that’s information for another post.