DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Custom Fields for HTML Post Titles

Posted by on

You don’t want to go putting HTML tags directly into post titles. It might show up OK on your own site, but it can be problematic. For example, your titles through RSS will show the tags as next, not render them. I was wishing for a plugin to handle this better, but until then, here is almost-as-simple way to go about it.

1. Enter title without HTML

2. Create a custom field for the title with HTML

3. Output custom field on pages you want the HTML

For example, on the single.php page where you would have used

<h1><php the_title(); ?></h1>

Now you use

<?php

   $html_title = get_post_meta($post->ID, "HTML_title", true);

   if ($html_title) { ?>
                
      <h1><?php echo $html_title; ?></h1>
                
   <?php } else { ?>
                
      <h1><?php the_title(); ?></h1>
                    
<?php } ?>

This checks and sees if that custom field is set. If it is, it outputs that. If not, it uses the regular function.

Because the RSS templates use the regular the_title() function, your titles are same from being weirdified in feed readers.

Example

The example used here was from my new blog layout, where I’m trying to have as much control as possible for doing interesting post layouts.

15 Responses

  1. Already thought of incorporating tags to the title but never this way. Another great use of custom fields, thanks for the tip!

  2. Oh well this is a neat tip indeed! Thanks!

  3. Design Informer October 28, 2009

    Thanks for the tip. I was looking for something like this, and I went to DigWP and there you have it.

    • I was wondering why on your website did you not chose to make the image a background to a div. Just would make ur site look a little cleaner.

  4. So far I’ve done this using a custom function that strips html tags from the_title() and adds that to the_title(). So that by default any use of the_title() is without HTML.

    Then using an if statement (is_singular, is_home etc.) dont strip them.

    No need to go modify all php-files in your theme this way.

    • @TeMc, Hiranti, Matt
      Can you describe exactly how to use functions.php to strip html from the title tag? That sounds perfect but I don’t know how to do what you describe.

  5. Hiranthi October 28, 2009

    You can use HTML-tags in the title field itself and then use the WP sanitize_title function to strip the HTML out of it.

    • Hiranthi October 28, 2009

      Ah, wait no.. I didn’t mean that one.. (geesh.. pregnancy is doing weird stuff to me.. ;)).. Darn it.. I can’t remember what the correct function was (I read about it on some blogpost about plugins the author wish were available, but ofcourse I can’t remember where I read that either).

      • strip_tags()?

        I don’t know if WordPress has their own function but adding strip_tags() would work — assuming you have the_title() return the value instead of echoing.

  6. Great idea. I’m definitely going to incorporate that.

  7. Cool!!! Thanks for this one!

  8. All this is in the tag where would I replace with the suggested code??

    <h1 id="post-“><a href="” rel=”bookmark” title=”Permanent Link: “>

    Thanks!

  9. I’m new to this. My theme (Thesis 1.6) doesn’t seem to have a single.php page. Would I modify index.php instead?

  10. For some reason this code is creating 2 <h2> tags, one empty and one with the regular title in it. This only happens when I haven’t explicitly defined the custom field. Can someone help me with this? Maybe I’m missing something obvious.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry