Custom Fields for HTML Post Titles
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.
About the author
Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.
15 responses
-
Already thought of incorporating tags to the title but never this way. Another great use of custom fields, thanks for the tip!
-
karinneOh well this is a neat tip indeed! Thanks!
-
Design InformerThanks for the tip. I was looking for something like this, and I went to DigWP and there you have it.
-
Ben WilliamsI 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.
-
-
So far I’ve done this using a custom function that strips html tags from
the_title()and adds that tothe_title(). So that by default any use ofthe_title()is without HTML.Then using an if statement (
is_singular,is_homeetc.) 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.
-
-
HiranthiYou 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
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 havethe_title()return the value instead of echoing.
-
-
-
Steven RossiGreat idea. I’m definitely going to incorporate that.
-
McometaCool!!! Thanks for this one!
-
Greg de LimaAll this is in the tag where would I replace with the suggested code??
Thanks!
-
Greg de Lima
Oh sorry it didn’t go correctly….
-
-
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?
-
Eddie GieseFor 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.
