Skip to content

How to Remove a Page Title in WordPress

by Scott Chow | July 18, 2014

At its core, WordPress is very much a content management system for blogging, but thanks to its open-source status and the vast database of plug-ins available for it, the platform is versatile enough for just about any type of website. If you want to get more out of WordPress and have it function as a somewhat different type of system, you’ll need to shape it to your requirements, and this may mean making some tweaks and changes which seem counter-intuitive, such as removing headers and page titles.

By default, page and post titles are displayed at the top of the content, and while these are usually considered to be an important design element, there may be other situations where they get in the way. For example, if you are using WordPress for a single landing page, or you are using a static page as your homepage, you may find that having the title in place gets in the way of the customized style you are trying to go for by cluttering up the page with superfluous content.

The easiest way to remove a title of a page or post is to simply avoid entering one. With pages, you’ll need to enter a title initially before going back and deleting it. However, pages without titles will be labelled as (no title) in the administrator dashboard, and this can make life difficult if you have a large number of such pages. There are also various free plug-ins available through the WordPress plug-in database which provide the functionality to remove titles.

How to Remove a Page Title Manually

If you prefer not to install a plug-in to remove page titles, you can do so manually by making a small modification to the HTML code of the page in question. Technically speaking, this does not remove the title, but it will hide it from the page itself. You’ll still be able to see the page title in the administrator dashboard so that you know where to find your content.

 

Step 1 – Locate the Class Name of the Title

1. Open the page in your browser to view it as you would if you were a visitor to your website.
Right-click on any blank area of the page and click “View page source” if you’re using Chrome or “View source” if using Internet Explorer.
Press Control + F to open the Find box and enter “h1” without the quotes. The class name of the title will be specified within the h1 tags as shown below:

<h1 class="entry-title">Sample Page</h1>

Here, the class title is “entry-title,” and it will most likely be the same for you.

 

Step 2 – Locate the Page ID

You’ll now need to find the ID code for the page or post you wish to remove the title for. You can find the ID code either by using a plug-in such as WP Show IDs or by viewing the source code again. If you look at the source code, you should find the ID code just above the class name, such as in the example below:

<div id="post-2" class="post-2 page type-page status-publish hentry">
<h1 class="entry-title">Sample Page</h1>

Make a note of the post ID.

 

Step 3 – Edit the Stylesheet for Your Theme

You’ll now need to add a short line of code to the stylesheet for your current theme. In your administrator dashboard, navigate to Appearance > Editor > Styles > Stylesheet (style.css). Scroll down to the bottom of the code and enter the following, changing the page ID value and entry title using the information that you noted down in the previous steps:

.post-2 .entry-title display: none;

Click on “Update File” to save your changes, and the title of your page or post will now be hidden. You will need to repeat this step if you ever change or update your WordPress Theme.

 

Conclusion

Manually hiding post or page titles shouldn’t take more than a few minutes once you have become accustomed to the steps above. However, a slightly quicker and easier way is to use a plug-in such as Title Remover, Toggle the Title, or Hide Page and Post Titles.

Share This Post

Comments

  1. Pedro says: October 3, 2014

    Thanks for this, Scott: really useful and simple to use! Just a note: I’m not a CSS expert but I do have some custom css in my theme, and in my case it only worked like this:

    .post-(…) .entry-title {display: none;}

  2. Nicole says: April 22, 2015

    Great post! I’ve been making a lot of edits on my blog lately and its a nightmare to go in and edit code for me, thanks for suggesting the plug-ins!

  3. B McNeill says: May 21, 2015

    First answer that actually worked!

  4. Andy says: September 4, 2015

    Thanks Scott. Note that my solution ended up being .post-2 .entry-title { display: none; } rather than .post-2 .entry-title display: none; but this may be because I use the Simple Custom CSS plugin which requires the curly brackets.

Add a Comment