Tutorials

WordPress: Hide Page Title or Post Title on a Case by Case Basis

by 34 Responses

WordPress Hide Page Title - Featured Image: Dog Under Blanket
Those of us who want WordPress to be more than a blogging system often find that we need to bend and twist and shape it to do things that might at first seem counter-intuitive: hide a Page title, for example, or even remove a Post title.

There are all sorts of good reasons to want to do one of the above. A common one might be that you’re using a Page as your homepage instead of the default stream of posts that many themes use, and you don’t want a title getting in the way of your custom look. Another might be that you’re using a Page as a landing page, and again, the out-of-the-box title simply gets in the way.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

How to Hide Your WordPress Titles on Pages or Posts

If you’d like to remove your titles on specific Pages or Posts, then there are a few different ways to go about it.

The Quick, Easy, Dirty Way

The easiest way, of course, is to simply not put a title in the title box. Yes, this is actually possible, but there’s a trick to it.

If you try to publish a Page without a title, it won’t publish. A Post, on the other hand, will publish without a title.

So the way to get around a Page not publishing is to first publish it with a title and then go back and simply delete the title. Problem solved.

When you do this, of course, in your Admin area you get the (no title) place holder where your title is meant to go.

No title in the Amdin Area

 

While this works, let’s be honest: it’s pretty artless. And we’re better than that, aren’t we? … AREN’T we???

That’s better.

But seriously, while this trick does work, who knows if one day it suddenly won’t. WordPress has already made it so that you can’t publish a Page without a title straight away, and so the time may come when even a pre-published Page without a title will revert to an unpublished state. In addition, of course, you’re stuck with “no title” as your title in the Admin area. If you have more than one of these, it will add yet one more small pain to your admin life.

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

A Better Way to Remove Page and Post Titles

While it is possible to dig into your theme’s files and change some title tag code to something conditional (if “Page X” then don’t show, if not then show), perhaps a better way is to hide the title of specific Pages or Posts with CSS in your stylesheet.

Step 1 – Find the Title Class Name

The first thing you will want to do is to find the name of the “class” associated with your title tag.

Maybe the easiest way to do this is to simply navigate to an already published Page on your site, and then look at the source code.  (Right click on the page and then go to “View source/ page source.”)

From there, search for the title of your post. You will likely come across it a number of times before you find the section you need, which is the title that sits just above your content, most likely wrapped in h1 tags.

It will look something like the following.

WordPress Page Title CSS Class Code

The class in the example above is “entry-title.” There is a very good chance that yours will be named the same, but it can be different if your theme developer decided to give it a different name.

Once you have the name of the class, note it down. You’ll be using it in a minute.

 

Step 2 – Find the Page or Post ID

Next you’ll want to find the ID of the Page or Post that you want to remove your title from.

If you’re unsure how to do that, then see the following post: How to Find the IDs of WordPress Categories, Posts, Pages, and More. You can also find the ID by looking in the same area where you found the name of your class above.

Finding Post ID

Once you have that, note it down.

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

Step 3 – Insert Code into Stylesheet

Next you’ll want to go to your theme’s stylesheet. (Appearance > Editor > Stylesheet – style.css)

 

FOR PAGES:

At the bottom of the stylesheet, use the following CSS example for Pages:

.page-id-1826  .entry-title {display: none;}

As you can see, I’ve used my Page ID (1826) and the name of the class for my title (entry-title). Don’t forget to include the dots as you see in the example.

 

FOR POSTS:

The CSS code for Posts is similar, but it’s not the same. Here’s an example for Posts:

#post-1773 .entry-title {display: none;}

Again, you’ll notice that I’ve included my Post ID (1773) and the class name for my title (entry-title).

Once you put this code in your CSS file and save it, the title on that page will disappear.

 

The Result

And that’s it. Here’s a look at my before and after (with title and without title).


Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

Photo: a chihuahua mix dog under a red blanket from BigStock

Comments (34)

  1. Joseph, Thanks so much for putting this post up. I looked for hours and hours to try to figure this out. Most importantly it worked! All the titles on pages are gone now. So thanks. One question: What would be the equivalent of .page-id-1826 .entry-title {display: none;} and #post-1773 .entry-title {display: none;} for getting rid of titles on categories? Many thanks, Mark

  3. This is great. On a sort-of similar note, do you know if it’s possible to hide the blog title from the home page, but have it show up on individual posts and pages?

      • Hi Joseph:
        After 4 days of searching I came across this post and you are explaining exactly what I am needing to do (remove titles from all pages). YEA!!! However, when I look up my class name and page id (right click- view source) this is a little of the page source I see on EVERY page I right click(no numbers for page id, Class name: customize-section-title and no content underneath…..)

        Static Front Page

        <li id="customize-control-show_on_front"

        BAD CODE???
        So, I put at the end of the style.css the following:
        .customize-section-static_front_page .customize-section-title {display: none;}

        and NOTHING…..
        not sure what else to do. Any advice would be appreciated.
        Thank you for your time and your promising post solution to this daunting dilemma!!!

  5. Dis-regard last post!!
    I searched more pages and found the class name and page id and it is working! The titles are disappearing! Thank you so much! And what is even better, is I just put in .entry-title {display: none;} at the bottom of the style.css and ALL OF THE TITLES DISAPPEARED!!! OMG. Fantastic. Thank you again.

    • I have spent several hours trying to figure this out with every technique offered and Rhonda’s worked but I had to put it in differently, like this:
      .page-title {display: none;}
      and it worked for all the pages which is what I wanted. I also put it in at the near top of the stylesheet-style.css in WordPress. Again thank you Rhonda.

  7. Not sure what I might be doing wrong. I add the new info to CSS Stylesheet Editor and nothing happened. It does look like the title is going away when I refresh, it blinks but then its there! UGH! Been trying for over a year to get rid of the titles. I had it once by adding a new page template but lost that when I tried to update my site. Any help is greatly appreciated. ToughTalkRadioNetwork.com I would like to get rid of the titles on the hosted shows page.

    • Wendy,

      OK, so I’ve looked at one of your hosted show pages, this one:

      http://toughtalkradionetwork.com/our-hosted-shows/corporate-talk/

      It seems that your “class” in this case is “title” .. and the id for that page is 923.

      I don’t know if you’re using Pages or Posts for this, so I’ll include what *should* work for each.

      For a Page:

      .page-id-923 .title {display: none;}

      For a Post:

      #post-923 .title {display: none;}

      Is that what you have in your CSS file? If it is, I’m afraid I’m not sure what the problem is. You probably have a slightly more complex CSS file that is controlling the titles in another way somehow and overriding things. If that’s the case, you might try asking in the wp.org forums. There are often people there with lots of CSS knowledge (much more than me). Or you can try stackexchange.com.

        • Wendy,

          That one seems a little different. Usually you can find the id by searching for:

          id=”post

          But in this case, it didn’t turn anything up.

          I did find the following id which seems to be the id (maybe you have a special template for that):

          page-6

          So I would try playing with that as your id — maybe something like this:

          .page-id-page-6 .title {display: none;}

          or maybe this:

          .page-id-6 .title {display: none;}

          • Thanks again Joe. Unfortunately I tried all of that with no luck. I’ll keep trying different things. If you think of something let me know! I appreciate your time!

        • If you do have a special template for that page, you could go into the template and remove the code for the title tag. Also, as mentioned in the post above, one option is to delete the title. That looks messy in the backend, but it’s an option.

    • No, the code is not in your sidebar. And I only suggest removing it if you have a special template dedicated to that particular page you’re having problems with.

      If you have someone who has built your site for you or has done special thing to it, then you’ll want to ask them. If no one else has built the site, then you this will not be your case. The “template” I’m talking about would have to have been specially made.

  9. Excellent walk-through – I have been working within the WP CMS for a good number of years now and have used it for everything from a basic blogging platform to a full-out secured private member portal – as you mentioned, those who do like to bend and shape WP to function to needs beyond (or away from) blogging have to go through hoops to make things happen, but it’s worth it in the end.

    I’ve used your (excellent and easy-to-follow) walkthrough above for another one of those issues on a project: much appreciated – and all without plugins :)

    Thanks again – Until next time, keep tweaking WP for more than blogging :)
    Roger Sanchez

  10. Hey wonderful it worked and I’m not even a coder! Just one question- it leaves a space where the title would otherwise be. I want to put my image at the top of the page as the new title. How can I get rid of this space on the top? Thanks so much for any advice, and this tutorial :)

    • As you can see in my example, I didn’t get any space left at the top. You can see that the text moved up for me, so I’m not sure what’s going on. It might have something to do with the theme you’re using. You’ll probably need to ask someone who knows more about CSS than I do. You might try on the wordpress.org forums or in the WordPress section of Stackexchange.

  11. Hey Joe,
    Ok great, thanks for the suggestion. I tried putting the title back and away again to see how the conent moved- it only nudged up slightly but there’s still a big space. I am asking a coder friend and will try forums too. My theme is Twenty Twelve and I made a child theme to play with. Here is the page if you want to take a look (test phase) http://dev.trilodeon.com/shop/
    Thanks again

  12. Hi Joe,

    I didn’t know the quick, easy and dirty way… :)
    always good to know in case you need to have a quick preview of how the post or page will look without the title.

    Thanks for the tip.

    cheers, Sidonia

  13. Hi Joe: Thanks for this elegant solution. I used it to hide the title “Home” on my home page and it worked great; but when I went to hide About on the about page, the page id came up as a post id.
    Anyway, I added your code both as a page id and a post id (independently and together), but the page title remains firmly in place. I need it for the menu, but don’t want to see it on the page. Here’s the site,
    http://www.pamelamohan.com. Any recommendations?

Participate