Hide Page Titles From Displaying On Specific Pages & Posts Using CSS Code

The easiest way to hide the title of your page or post is to simply remove it after publishing.

You could then add the title at the top of the page/posts content area and use the Heading (H1) tags.

Your theme should also offer a field for your title which will still display in the search results as well as your source code.

Otherwise, install the Yoast’s SEO plugin and add your title to the General SEO Title field.

SEO Title

Another option is to add CSS code to your child theme’s style.css file.

Hide Titles Using CSS

This is an example of what the code looks like. Change the page I.D to match the page you wish to hide the title.

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

Add more unique page i.d’s to hide more page titles

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

First you’ll need to find your:

  1. Page Title Class: Generally this is .entry-title for both pages and posts
  2. Page or Post I.D: You can find this in the source code by right clicking your mouse on the page you wish to hide.

Find Entry Title

Here’s a short tip written earlier about how to find your page i.d.

Another option is to use Firebug.

Highlight the title you want to hide and click Inspect with Firebug.

In the left window that pops up you’ll see both your:

  • h1 class and
  • Above that your post or page i.d

Firebug displaying page I.D and Class

Hiding Post Titles

Edit this code and paste it into your child theme’s style.css file to hide a specific post title:

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

Hiding Multiple Specific Post Titles

Simply add each unique post i.d and title class tom the code:

#post-007 .entry-title, .page-id-001 .entry-title {

display: none;

}

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.