04 Jun How to Hide Page Title in WordPress
Do you want to hide page title on WordPress? Then, you have landed on the right page. Not every one of us fond of page titles showcasing twice on the post article.
WordPress is a great CMS platform. It provides tons of plugins and themes and its open source nature means that you can easily modify the files according to your requirements. Not every blog or blogger is the same. Many prefer a different way of presenting their blog posts and I also know many bloggers(who are my friend) that never change any default values. Those who prefer to work with the default settings have a low technical knowledge and are not serious bloggers.
Serious blogger, on the other hand, want to tweak every part of the WordPress website, according to their requirements. One of the most asked questions is “How to hide page title on WordPress posts?”
Hiding the page title can be a little tricky, but if you know how to handle simple HTML, CSS, and PHP, you will be able to do it yourself. In this tutorial, we will go through some of the methods to remove the page title from a single post or from all the posts that are available within the WordPress blog.
But, the question remains? Why, even bother to hide the page title? The answer is design aspects. Many landing pages, showcase page title on top. Page Titles are great and tell the whole story in short, but keeping them at unnecessary pages can devalue the blog’s worth and can hamper the visitors liking.
To make everything look smooth, it is always better to remove the page title. Also, WordPress being a CMS offers Plugins that can make the work much easier. Let’s quickly go through the plugins that can help you hide the title from the WordPress pages. After that, we will learn how to remove manually the page title from WordPress posts.
Table of Contents
WordPress Plugins that Support Hiding Title
1. Hide Title
The simple hide title plugins enable the authors to hide the page title on single posts and pages with the edit post screen. All of these done without touching the code. Great plugin for non-coders.
2. Disable Title
Another simple plugin to disable the post title or page title. It can be applied per page.
3. Genesis Title Toggle
Using a Genesis theme? Then, this simple plugin can be your friend in removing the page title(on each page basis). You can also set the defaults from the theme settings.
4. Hide Singular Title
Another great plugin to achieve the desired result. The plugin works with any post or page of your WordPress website. The plugin offers tons of features and you can easily get control of each section of your WordPess website.
How to Hide the Page Title on WordPress Manually
Plugins can make your work extremely easy, but it can also impact the performance of the website. The less plugin, the better. So, that’s why I will show you how to hide the page title on WordPress manually. The manual process is extremely easy and can be done in 5 mins if properly done.
Let’s do in a three step process.
Step 1: Finding the Class
Open the post page in your browser(Chrome or Firefox). Once done, click on the page title and Inspect element. You can also choose to view page source, but that will require more search over the source code.
After opening the view source, press Ctrl+F to open the find box prompt at the top of the web page. Type in “h1″ in the find box. You will get a multiple search result.
But, the first h1 tag is what you are looking for. It will look like below.
<h1 class=”entry-title”> The Page/Post Title </h1>
Take note of the class of the h1 tag. In this case, the class is “entry-title”. With WordPress system, the class of your H1 tag would be similar. If it is different, no point in panicking, just note it down somewhere same.
Step 2: Finding the Page ID
The next step is to look for the page ID that differentiates each post/page of the WordPress website. The database stores the content of the post and hence you can find out the code just by looking at the source code(similar to how we found out the class of the page title).
1. Right click on the page > view source code > look for “id”.
2. The code that you should be looking for will be similar to the following.
<div id=”post-85″ class=”post-89 page type-page status-publish hentry”>
<h1 class=”entry-title”>The Page/Post Title </h1>
This time, take note on the Post ID, i.e., post-85
Step 3: Final Step: Editing the StyleSheet Of the Theme
The final step is also very easy to follow. All you need to do it make sure the WordPress ecosystem not to render the title using the CSS commands.
To go to the CSS editor, move to the Appearance > Editor > Styles > Stylesheet(style.css).
Now, you have to move down the CSS file.
and enter the following code(change code according to the post ID and h1 class).
.post-85 .entry-titile {
display:none;
}
The above code tells the WordPress system to not display the title. Save the file, refresh the page and you are done with hiding the page title on WordPress. Yipee!
Bonus: If you want to disable the page title on all the pages of WordPress, then just enter the following code into the CSS file.
.entry-title {
display: none;
}
Over To You
Today, I listed both the plugins and the manual process of hiding the page title on WordPress. Both the ways takes just a few minutes to complete. I will always prefer the manual process because it saves you precious rendering time taken by the plugin.
Finding difficulty following the tutorial? Comment below and let us know. We will help you and solve your problem. Also, share the article with your WordPress friends!
Joella Molson
Posted at 13:57h, 26 OctoberYour advice for manually changing the post title is accurate. Just one problem, the moment your theme is updated (and we should all keep our themes up-to-date) all your titles will be gone. Your advice to manually changing the post/page title should be executed through a child theme. If a person doesn’t know how to make and use a child theme they should most definitely use a plugin.
Prashant
Posted at 23:29h, 04 DecemberWith the wordpress 2017 theme, I still have a link that says “edit” at the top of the page body. How do I remove that?