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.
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?
The one problem I see with the subtitle is that it doesn’t show up in the actual post, just in the browser title bar. I’m sure that’s fine for SEO, but it doesn’t add anything for the reader unless they look up, which a lot probably don’t.
Still and interesting idea, and I’ll be watching to see how else you implement the custom fields – I’m sure there’s some great uses yet to be figured out.
Yeah, stay tuned. We could add the same snippet of code used to show the subtitle in the browser bar to show it in the actual post.
Hi Justin,
Does your code go between the ? So I delete what is inside of title now? Or do I delete title all together? Thanks!
whoops looks like it didn’t like my explanation because it mistook some of the HTML. Any, does your code go between the open and close of title, or do I delete the title code, or? thanks again!
David, this code goes between the opening and closing
<title>tags. You should delete anything else between those tags.Thanks for this tip and the “costum field” series!
I believe that custom fields could be used for creating a ‘Classified Ads’ area in a blog/cms site. Plugins like the Custom Write panel and the custom_field_gui could be used to make advert placement easy for users.
I haven’t found any workable plugin as yet for a free classifieds
Any thoughts?
Sweet! I’ve been looking for some code to help me on my site. You saved the day!
Obviously I’ve not done something correctly. Followed the steps in the tutorial, published this post: http://webarts.net.au/wordframe-demos-soon-for-europe-and-asia-time-zones/
and got the subtitle but multiplied twice – i.e. three iterations
A little tweak to this, and you can have post subtitles working as well (see example here, below the title in italics). Many thanks for the good information above.
Note: I’ve attempted to format this a bit. Apologies if it ends up ugly.
1 – Add a custom field entitled ‘subtitle’ to a post, as described above.
2 – From the Theme Editor, open the Main Index Template (index.php)
3 – Search for the opening paragraph declaration entitled class=”post-info”
4 – Paste the following BEFORE (immediately after the Title): ID, ‘subtitle’, $single = true); if($subtitle !== ”) { ?>
5 – Save and open the Single Post Template (single.php)
6 – Repeat Steps 3/4
7 – Save and open Stylesheet (style.css)
8 – Search for post-info
9 – Wherever you have your post-info defined (look for font-size, color, margin, etc), add , #content. subtitle before the opening bracket ({)
10 – Immediately below (after the closing bracket), paste in the following: #content .subtitle { color: #265e15; font-style: italic; padding-bottom: 10px; }
11 – Of course, change the color/font to match your theme…
12 – Now, test! Open up your main page (index.php), and ensure all is displayed correctly. Also, open up a single post and make sure it is also displayed correctly.
Trying again… I feared something would be stripped. Didn’t realize the ‘code’ tag worked here… oops.
Step 4 should be as follows…
4 – Paste the following BEFORE (immediately after the Title):
ID, 'subtitle', $single = true); if($subtitle !== '') { ?>Jeez dude, u save my day:) thanks
Looks good, but I’m having a little problem with post, if there is no subtitle custom field it’s show only blog title. How to make if else or whatever if I forget to fill title in custom field?