Skip to content

How to hide post titles in WordPress

For a site I’m working on I needed a way to hide the post title, but only on specific posts. This particular post was a quote with a big image on top, and it looked better with the image, but no heading text.

Google brought me a few options, but I ended up doing it myself.

Plugin

My first thought was to look for a plugin. And sure enough there’s one called Hide Title which seemed like a perfect fit.

And it was so close. It added a meta box to the post edit screen where you could toggle whether you wanted the post title to show.

The problem was that it used JavaScript so the post title showed up, and then hid. And it also used jQuery. Not a problem for my theme since jQuery was already loading, but if you’re using a theme that’s not loading already loading it, jQuery seems like overkill to just hide a DOM element.

CSS

The other common solution was to add custom CSS for each post.

When WordPress builds a page it adds a CSS class postid-ID for each single post, where ID is replaced by the actual ID. For example, the post with ID of 123 would have postid-123 as one of the CSS classes in body. We can use this to target the title. This does make an assumption that your page title has the CSS class page-title, although most themes do this.

Here’s the CSS you’d want to add to your theme to get the title on post 123 to hide.

The problem here is that I’d have to do this for every post. For now there’s just the one. But this would get pretty tedious.

WordPress Actions

What I ended up doing was using the wp_head action along with custom fields to automatically add the CSS when needed.

What this does is look for a custom field named hide_title. If that field exists, it will output a bit of CSS in the header, but only if it’s in the single view. I didn’t want to also strip out the title on archive pages since the title is usually also the link to permalink.

Now when I want to hide a title I just add that custom field with any value and the title won’t show up.

Where it goes

I put the code in the functions.php file for the theme I’m using.

I also put together a quick plugin on GitHub if that’s easier.

Published inWordPress

One Comment

  1. CJ CJ

    Hi,

    I want to hide post titles on a particular Archive page, how can I do this?

    *I have a writer website. Posts are into categories; Short Stories, Editorials, Interviews, etc. The Short Stories have the eBook covers as featured images. The images have the title and all so having the titles show again as text is redundant, also, I’m using Masonry display for Stories so the title is displayed on, not under the picture.

    Please how may I achieve this? Note, I only wish to hide this only on the page where I display posts under Short Stories. It’s a regular page.

    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *