WordPress Posts Without Titles

Occasionally, a Nimbus Themes member will submit a support ticket about the way our themes display titles on blog posts or pages that don’t have the title field populated. Often these requests boil down to hiding the title entirely, so in this post we’re going to explore the logic behind our approach to these edge cases and how to hide the title if that’s your ultimate aim.

First, the back-story

When you submit a theme to the theme directory on wordpress.org, you’re asked to import the official Theme Unit Test data XML into your development environment. This is an XML file that contains pages, posts, categories, and tags just like you’d get if you used the Tools >> Export feature on your WordPress Dashboard. The test data provides a suite of example content, including edge cases, that all themes should try to support gracefully.

One of the posts in the Theme Unit Test is a post without a title. The guidance provided by the theme review team is:

This post has no title, but it still must link to the single post view somehow.

This is typically done by placing the permalink on the post date.

Our Approach

Since the goal is to provide a navigation path, I decided to generate a title using the post ID. You can see the logic I used to accomplish this for pages:

$title = the_title('','',false);
if (empty($title)) { 
    echo "Post ID ";
    the_ID(); 
} else { 
    the_title();
} 

And for posts:

$title = single_post_title('',false);
if (empty($title)) { 
    echo "Post ID ";
    the_ID(); 
} else { 
    single_post_title();
} 

These snippets are stored in two template partials, so we’re able to easily pull them into any theme template using the get_template_part() function. For more information on this functions, see our post Why We Use get_template_part().

These act as a placeholder or reminder title in cases when an author has just begun developing content or has forgotten to populate the title field.

What if you don’t want the title to show?

This does create an issue in cases where the author does not want the title to show at all, so we need to look at how to hide the title on pages and posts. We can look at this in two ways:

• When you want to hide all page or post titles.
• When you want to hide a single page or post title.

When you want to hide all page or post titles.

In some of our themes, and in many themes from other theme shops, you will find an option in the theme options panel or in the customizer to turn off the page and post titles. This is always the best option if you have it, but sometimes this is not available and in those cases you’ll want to turn to custom CSS. If you are using a theme that doesn’t offer custom CSS as part of its theme options, you can add this functionality through a plugin appropriately called Simple Custom CSS.

Next, you need to locate the class or ID that will allow you to target the title on the template(s) you wish to effect. Using Developer Tools in Chrome as an example, we can view the rendered page source and see that the post title on this template has the class post_title:

Because we want to prevent browsers from rendering this element, we are going to add the following custom CSS:

.post_title {
    display:none;
}

When you want to hide a single page or post title.

If you only want to target the title on a single post or page, you can do this by including the postid-## class in your custom CSS. The postid-## class is auto-generated as part of the body_class($class) function by WordPress and will be located in the body tag just after the close of the head section. Again, looking at the page source:

Because the postid-## class will be unique to each individual item of content, we can add it to our custom CSS from the last example to target the title on only this page:

.postid-1241 .post_title {
    display:none;
}

Conclusion

The processes we covered in this post – using custom CSS to modify themes – is not restricted to titles only. You can use these principles to modify almost any element in any theme.

If you’re a theme developer or web professional and have a different approach to working with titles, leave a note in the comments. I’d love to hear about other ways to tackle this.