So you have a page that you have a title on it, but you have decided that that title doesn’t need to be shown on the page. Well, you might be shocked to learn that WordPress does not allow you to hide the title.
How to hide a page title in WordPress? The most simple and effective way to hide the title is to give the title a class with the display: none property. This solves two problems, it removes any space that the title took up and also is easy to do with a simple tag that could be added to the website. CSS is also a better option than using a plugin which will slow the website down slightly.
If you would like to learn more about how to do this, we will talk about using plugins and why use code if you can help it. We will also talk about some free tools you can use to edit the code on your website.
Page Titles and WordPress
When you first start using Gutenberg and WordPress, you are likely to find yourself in a bit of a pickle. WordPress does not natively hide the page titles, depending on the theme you are using. The title is often whatever the page is named which can be a problem because sometimes you don’t want something like contact form 4 as a page title.
The first step to solving this problem and probably the easiest method above all else is use an excellent theme. Something like Astra or OceanWP allows you to edit the titles of pages without having to code or use any plugins.
But what happens if you have a page that has a title and you a theme that you can’t change? Well, at the point you will need to try one of the two methods below to fix your problem. Not all themes include the ability to hide page titles.
Some page builders will allow this in their options, Elementor can help with this problem. They have an option inside of Elementor which allows you to completely turn off the page titles.
So the first step before you start coding or using a plugin should be to turn to you already installed plugins and analyze them. Do any of them can turn off the page title without you doing anything else? If so, then great and if not, then follow below.
Why use code rather than a plugin to hide the title?
Coding is something that is faster than a plugin will ever be. While a plugin isn’t the worst thing you can do for turning off a title, it’s not the best.
Using a plugin to solve the problem of something that CSS can solve with one line of code is like using a shotgun to kill a fly. It’s too strong and getting rid of something like a page title does not require that much work.
Plugins can also increase the number of request that a website has which can cause slow down. If you want to read more about this, check out our article on Why is WordPress so slow?
How to use code to hide the title of your page
The easiest and most effective way to hide the title is to create a class that you can use to hide anything on your website. CSS has a specific setting that allows to hide things but not only hide them but remove them from the page itself.
If you wanted, you could always turn a title white or the same background color and it will look invisible.The problem with this method is that it still in the document flow.
The CSS class display: none removes that Title or anything else from the documents natural flow, which means that it is removed from the page.
So if you want to remove a title, the first thing you need to do is find the class of the title. We can do this with any popular browsers of today’s time. The reason we use a browser is that all themes will call titles different things. You can’t assume that your title class is just called title.
Some themes use original naming schemes that you can’t guess without looking and reading the code. Luckily modern browsers have a set of what we call developer tools to make this much easier.
When you are looking at the website itself, I want you to highlight the title and right click. Somewhere on the list you will see the name Inspect. Click on this and it will bring up a window of code.
If you highlighted the title of the page then you should see:
.class=”name of your title”
The name in the brackets is what you need to change to hide the page title. Write this down and then let’s exit the page and login to WordPress. From the WordPress admin menu click appearance and the customize.
Once you are inside of the customizer, scroll down to the area that says Additional CSS. Inside of the customizer you will see an input box that will allow you to write code. If you have never coded, don’t worry, this will be very easy, I’ll give you a template.
.name of your title { display: none }
Make sure you include the period at the beginning for the class and make sure the name is just like you saw it on the website. Inside of the customizer, you should see the title disappear from the website. You might have to click publish for some themes but most will update in real time.
If this worked, congratulations, you just coded and hid your title. If this didn’t work then keep reading below for another method to hide the page title.
If all else fails, use a plugin to hide the title
So now that you have had three very good options for hiding a page title, I wanted to supply you with one last option. A plugin will give you the functionality to turn off page titles and while not all plugins work the same. There are a few good ones that I can recommend.
Title Remover by WPGurus is one option that you can use. While the plugin has been updated in 9 months, I don’t expect there is a lot you can update when you plugin does one very specific thing. This plugin has over 100,000 active installs, which is always a great thing for a plugin.
Hide Page and Post Title by Arjun Thakur is another great plugin which allows you to hide the page title. This one has less active installs only about 40,000 but has been updated in the last month, which is always a plus.
You will need to follow the instructions that come with these plugins. Most of them will allow you to edit the page title on the page or post itself.
Related Questions
Can I hide more than the title? Yes. If you wanted to you could create a class using the code below:
.hide { display: none }
Just add the class .hide to whatever you want to hide and it will force anything to disappear.
I can’t find the name of the title that the theme uses? Then use one of the plugins, they work as well. We just don’t recommend using a plugin if you don’t have to because themes and other plugins can sometimes fix your problem.
Conclusion
I hope that this has helped you hide your title. If you run into a problem with this contract us and we will see if we can help.
I hope you have liked this article and if you want more WordPress content, then check out our website.
