Justin Tadlock

Using WordPress Custom Fields: Subtitles

This article, or series of articles, is long overdue. I’ve been using custom fields to make “little” fixes around this site for a while now. They are probably the most powerful feature of WordPress, yet the least used. Maybe that’s because they’re hidden away at the bottom of the “Write” page. I want to share some of the things I’ve learned with you. Maybe I’ll even learn a thing or two while doing it.

This is the first post in what I hope to be an ongoing series of how to use WordPress’ custom fields. The inspiration for finally getting my butt in gear and writing the first post was Nick La’s post, WordPress Theme Hacks.

This post will serve as a quick tutorial on a simple use of custom fields. I will later get more in depth with the “why” and “how” of using these things. So, to get your feet a little wet…

Today, I will show a simple solution to fixing your title tags (those words at the top of your Web browser when you visit a site). This will also help a little in optimizing your site for SEO. Basically, we’re going to create a subtitle to each post or page we create. This subtitle will be displayed with the title at the top of the browser.

The first thing you need to do is open “header.php.” Simple enough, right? Find:

<title>
</title>

We will only be working between the title tags today.

Nick gives us a nice starting point in fixing your title tags. Here is the code:

<?php
if (is_home()) {
    echo bloginfo('name');
} elseif (is_404()) {
    echo '404 Not Found';
} elseif (is_category()) {
    echo 'Category:'; wp_title('');
} elseif (is_search()) {
    echo 'Search Results';
} elseif (is_day() || is_month() || is_year() ) {
    echo 'Archives:'; wp_title('');
} elseif (is_tag()) {
    echo 'Tag:'; wp_title('');
} else {
    echo wp_title('');
}
?>

Obviously, you can play around with this a little and do what you like with it. Now, we will figure out how to optimize for SEO by inputting extra information with custom fields.

Save your copy of “header.php.” Open your WordPress dashboard and go to “Write Post” or “Write Page.” After writing your post, scroll down to the box labeled “Custom Fields.” Add a new “Key” named “subtitle.” Write your subtitle in the “Value” box.

How to input a subtitle into the custom field box for use with the title tag

Now, you are almost ready to see your efforts in all their beauty. Open “header.php” again (it should still be open). Below the last echo wp_title(''); add the following code on the next line.

$subtitle = get_post_meta
($post->ID, 'subtitle', $single = true);
if($subtitle !== '') echo ': ' . $subtitle;

This code pulls your custom field key of “subtitle” out and displays it on whatever pages have a subtitle. Your final code should look like this:

<?php
if (is_home()) {
    echo bloginfo('name');
} elseif (is_404()) {
    echo '404 Not Found';
} elseif (is_category()) {
    echo 'Category:'; wp_title('');
} elseif (is_search()) {
    echo 'Search Results';
} elseif (is_day() || is_month() || is_year() ) {
    echo 'Archives:'; wp_title('');
} elseif (is_tag()) {
    echo 'Tag:'; wp_title('');
} else {
    echo wp_title('');
    $subtitle = get_post_meta
    ($post->ID, 'subtitle', $single = true);
    if($subtitle !== '') echo ': ' . $subtitle;
}
?>

Yes, simple, yet useful. You don’t need a plugin for this task. You can see how I’m putting it to use on this page. The title is “Using WordPress Custom Fields,” and the subtitle is “A series of tutorials on WordPress’ most powerful feature.”

I hope you continue to follow this series, as I hope to continue to learn and develop. Subscribe to my feed to keep updated or bookmark this page because I’ll provide a link here to the next tutorial. In the next article, I will talk more about what custom fields are and why we need to use them.

Do you have any ideas on what would make a useful function using custom fields, but you’re just not sure how to implement it?