How to Hide the Page Title in WordPress

How to Hide the Page Title in WordPress

Due to the flexibility of WordPress, there are a large number of scenarios where you might require your blog to do something unusual and out of the ordinary. For example, under normal circumstances you would never need to remove the post title – after all, it happens to be the most important and visible indicator of what your post is about, not just from a visitor’s perspective but from that of SEO as well! But what if you’re not utilizing WordPress as a blog, but rather as a website builder? In that case, the page title might not make much sense. It may not fit in with your design to have a huge “About Us” title at the top of your introduction. Or you may have a different reason altogether.

For whatever reason, we’re going to look at removing the page titles from WordPress posts or pages. You might think that the answer is as simple as not filling a title into the WordPress editor in the first place! That would work, sure. But how would you identify your posts and pages in the dashboard if you were to do that? Don’t worry – there are more effective means to removing the page titles. I’m going to start with WordPress hooks and then show you how to do it with CSS both for posts as well as pages.

Using WordPress Filters to Remove the Page Title

So let’s open up a sample WordPress post on my test blog. As you can see below, the title is displayed nice and prominently.

want to remove this title

Using WordPress hooks, I can change it to whatever I like or even remove it completely. We’re looking for a solution that has the following properties:

  1. Works on all themes;
  2. Doesn’t require a plugin;
  3. “Plug and Play”.

I prefer not to install plug-ins if I can avoid them. They quickly become unmanageable and when the function is highly specific, I prefer to write a snippet of code myself. In this situation, we’re going to make use of a WordPress filter known as “the_title”. In your functions.php file or in the place where you normally keep your custom PHP code, copy and paste the following snippet:

function change_the_title( $title) {
     $title = '';
      return $title;
}
add_filter( 'the_title', 'change_the_title', 10)

code for no title

With this, we hook into “the_title” with a function of our own called “change_the_title”. This accepts the variable $title which we simply set to nothing and return it. Just a few lines of code wipe out page titles across the site. Here’s what my post looks like as soon as I’ve implemented it:

title removed

But wait! What if I don’t want to remove titles across the site, but only on pages? Well then, the answer is simple. Simply include a check for a page before setting the title to an empty string. Our “change_the_title” function then becomes:

function change_the_title( $title) {
     if (is_page()) {
          $title = '';
      }
      return $title;
}

You can grant this even more flexibility by assigning those posts and pages for which you want to remove the title to a separate category or custom post type and then perform a check for that condition in the function.

Using CSS to Remove the Page Title

If for whatever reason you prefer not to mess around with PHP code, we can achieve the same effect – albeit with a little less flexibility – via CSS instead. Also, since themes differ so widely in their structure, what works for one may not work for the other. But still – this should account for the vast majority of themes. The first step is to find out what classes identify your page title. For example, using the Google developer tools, I find that mine can be uniquely referenced via the “.entry-title” class:

entry-title css

For this, I simply add the following CSS either to style.css or another theme independent location.

.entry-title {
     display: none;
}

change css

And if you want to hide only the page titles, find out what unique class applies to that subsection of them. In my blog (and probably most of the others), the following code works just fine:

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

So there you have it! Two easy and flexible ways to remove page titles across various types of posts and pages in your WordPress blog in a scalable manner.

4 Comments on “How to Hide the Page Title in WordPress”!

  1. Avatar

    I want to remove my home page title (set as static home page), so I tried:
    function change_the_title( $title) {
    if (is_page(‘home’)) {
    $title = ”;
    }
    return $title;
    }

    This is removing my home page title, but it is also removing all my Menus!!! Though, it appears to be fine for other pages. I’m using Mystile theme. Any help??? Thanks :)

    • Avatar

      function add_text_to_page_title( $title ) {
      global $id;
      if( is_page(‘home’) && $id)
      $title = ”;

      return $title;
      }
      add_filter( ‘the_title’, ‘add_text_to_page_title’ );

  2. Avatar

    This code works on all pages except my Default Posts page. Is there something different I need to add for it to work there too? I’m using the twenty seventeen theme

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.