Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Hide Page Title in WordPress

How to Hide Page Title in WordPress

In WordPress, a title appears on every page or post by default. On one hand, this is understandable, since WordPress originally used to be a blogging platform. Thus, it was only logical to have a title on every page, as different blog posts would have to have unique titles. The use of blogs has only expanded over time, which makes Blog WordPress themes as popular as ever. However, on the other hand, WordPress and its themes don’t only serve the purpose of blogging anymore. That’s because WordPress as a platform has developed and grown into a CMS giant capable of serving large-scale websites and different types of pages that don’t require a page title. Take Home Page, for example. Having a title with the name “Home” wouldn’t look that well. Another example of not needing a title is when creating a landing page. Of course, having a title on every single page of a huge business website wouldn’t make much sense either.

Home Page with the title

Home Page with the title

Home Page without the title

Home Page without the title

Fortunately, hiding the page title in WordPress is quite simple. We’ll show you different ways in which you can do it.

Hiding the Page Title in WordPress by Not Adding Titles

The title which shows up on every page or post is located in the field marked in the picture below. It’s the first field you can see on the Page/Post backend.

Title field

To hide the title, the first thing you can do is simply not insert any text in this field at all. You should insert the rest of the content into the page as usual.

When it comes to the creation of permalinks in WordPress, it can be done based on the page title. Every time you don’t insert the page title, an automatic number is added to the permalink after it’s published. Of course, this number can be edited and you can change your permalink in any way you like.

Creation of permalinks

If you ended up deleting the title of an already existing page, the only thing you have to do is click on the Update button. In that case, the permalink which is created based on the title will remain unchanged.

Update your page

You should pay attention to the following:

If you deleted or ended up not giving any title to the page that is located in the menu, then you have to give a new title to that page. Head over to Appearance > Menus, and find the menu item that has no title.

Find the unidentified menu item

Once you find the unidentified menu item, the only thing you have to do is give it a custom name in the Navigation Label field, and your problem in the menu will be resolved. Just make sure to save your changes in the end.

Also, you should also pay attention to the fact that the pages and posts listed in your backend won’t have any names either, so it could be difficult to manage your way around the website’s backend if there are many pages and/or posts like these.

Pages without name

Luckily, this has no influence on the user experience whatsoever – it just makes it a bit harder to navigate the backend.

Another thing you should consider is adding a title for the sake of getting a higher ranking on Google, but making it invisible to the visitors. You can do this by installing one of the WordPress SEO plugins which will allow you to enter the title for Google without it interfering with your page content and remaining invisible to the users.

Hiding the Title of All Pages/Posts by Using CSS

Before applying this method, keep in mind that by adding a few lines of code, you will hide the titles of all existing pages and posts. Of course, in case you need a title for a particular page or post, you can always make the title a part of that page’s content. Just make sure to take care of Google as well by using one of the SEO plugins.

What you should do in order to add the code is to check all the title classes, which means you have to inspect website elements first.

Inspect title class

You need to check the class both for the page title and the post title. These classes can either be the same or completely different. In our case, the name of the Page class is page-title, while the Post class is post-title.

The line of code you should insert is the following:

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

In your case, you will change the class names to how they are displayed in the inspect element tab. If there’s only one class for all the titles, you only need to insert the code once:

.your-title-class {
display: none;
}

In case the code is not working on your theme even though you’ve written your class properly, try adding !important;:

.your-title-class {
display: none !important;
}

You can insert the code in two places, and it’s up to you to decide where you will do it.

The first place where you can insert the code is in the theme’s style.css. You will find it by heading to Appearance > Theme Editor.

Theme Files

After that, insert the code at the end of the file and click on Update File.

Insert the code

The other place is located in Appearance > Customize. Once you access it, find the Additional CSS option and insert the code there.

Additional CSS option

Hiding the Title of a Specific Page/Post by Using CSS

We showed you in the previous example how to hide the title of pages/posts with no exception. But in case you want to hide only a specific page or post by using CSS, the principle stays the same – you only have to add the class for that particular page or post.

This is what the code will look like:

.your-title-class {
display: none !important;
}

Like we already mentioned above, you can check the class of the element through inspect elements. The page class has a .page-id-367 format, whereby the number itself is the page/post ID. Find the page or post ID and change it within the code. In our case, the code would look like this:

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

Remember – for each page, you have to insert the code which prevents the title from appearing individually.

Hiding the Specific Page/Post Title with the Help of a Plugin

For this purpose, we will use the Title Remover plugin, which has over 100.000 active installations. This plugin can be used to prevent the page or post title from appearing individually. It works on the principle of adding a simple meta box alongside the post creation form in the WordPress admin interface, which allows you to toggle the title’s visibility. What’s great about this plugin is that, compared to other similar plugins, it removes the title completely instead of hiding it with CSS or JavaScript. The plugin works with all post types, and it doesn’t affect the menus or the title area.

Title Remover plugin

Once you download and install the plugin, a checkbox for making your page/post hidden will appear on the page/post itself, named Hide Title. Marking this checkbox makes the title disappear from your page or post. You can check or uncheck this box according to your preferences.

Hide Title checkbox

Bottom Line

Finally, we have to note that you should check if the theme itself has the hiding option first. If not, you have all these different methods we listed above at your disposal.

And that’s how you hide the page or post in WordPress. We hope you will successfully manage to take care of all the pages or posts whose title you do not wish to display with the help of our guide!

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply