Titles are an important part of many webpages on a website. They help the readers and search engines know the main topic or content of the your page or post.
However, not all webpages need to have a title. One such example would be the home page. Similarly, there can be a duplication of titles in some themes. They could have a title on top of a banner image and then also at the beginning of the post once you scroll down a bit.
In this tutorial, I will show you different methods for hiding or removing the title of posts or pages in WordPress.
Use a Theme with Full Site Editing Capabilities
The WordPress 5.9 version nicknamed Josephine was released on January 25, 2022. It came with a new set of features and one of them was full site editing capabilities.
The site editor allows you to update the design of your entire website from within the admin dashboard. You can make changes to different template files by removing existing elements or adding new elements.
There are quite a few themes available in the WordPress theme directory now that support full site editing.
I am using the Crcote Corporate theme as an example in this tutorial. Blog posts in this theme are designed to have a banner at the top. The banner contains the post's featured image along with the post title over it. The featured image and the post title are then repeated again when you scroll down a bit. We will now get rid of this duplication.
Luckily, this theme supports full site editing which means that we will be able to edit the template file that is used to generate the markup for single posts on the website.
You can navigate to Appearance > Editor from the WordPress admin dashboard in themes that support full site editing. Once you are inside the editor, click on the website logo in the top left and a menu should open up. Select Templates under the Editor section. This will open up the following screen:
You might need to scroll down a bit to find the template titled Single. The description of the template says that it is the default template for displaying any single post or attachment. As you can see in the screenshot, there might be other templates like Single Product in the list. However, we are only interested in a template that displays a single post.
Click on Single and you should see something like the image below. Actual layout will vary based on the theme you have installed. Select the top block and a floating menu would pop up. Click on the three dots at the right end and you will see some more options.
The top block represents the cover or banner image on the single post page. You can remove it if you want by clicking on the Remove Cover menu option. This will solve the issue of de-duplication of the post title.
Another option is to hide the post title and featured image that show up below the cover or banner image. Select the featured image and the post title one by one and then remove them.
Click on the Save button in the top right corner and then revisit any of your published blog posts. You should see that the featured image and the title are no longer shown to readers. You can make some other changes to the template as well. For example, I increased the font size of the title text that appears over the cover image at the top.
Use a Plugin to Remove Post and Page Titles
Let's say that you don't want to hide the titles on all posts or page but only on specific ones. Using a plugin to hide the titles would be your best bet in this case. There are a few plugins that come up when you search for "Hide Post Title". However, the one that I liked best was Hide Page and Post Title.
One drawback of this plugin is that it doesn't work with all WordPress themes and you will have to install and check for yourself if it works in your case. This could be due to the fact that the plugin has not been updated recently.
Unfortunately, almost all plugins that provide this functionality have not been updated for a long time. Once you have installed and activated the plugin, you will see a new meta box on the post editing page. Check the box titled Hide the Title and then click Update.
Reload your page now and you will see that the post title is now gone. I would like to again mention that this won't work with all themes. For example, the title was still visible when I used it with the Crcote Corporate Theme above but it was removed when I used the Storefront theme.
This removal of the title is temporary and you can get the title back whenever you want by simply unchecking Hide the Title and hitting Update.
Hide Post and Page Titles with CSS
If you are not using a theme with full site editing capabilities and couldn't remove the title by using a plugin, you can still do so with the help of CSS.
Using CSS will not actually remove the title form the post page but simply hide it from users. There are a couple of approaches that you can take here.
The first step is to figure out the class or id being applied to the post or page title that you want to hide. We want to be able to specifically select this element using our selectors. One easy way of doing this involves right clicking on the title and then selecting Inspect. This should open up a new window with content that look like the image below.
In this case, the class is entry-title. So, our selector will simply become h1.entry-title and we will use it to hide all post and page titles.
The next step is to navigate to Appearance > Customize from the WordPress admin dashboard. This will take you to the website customizer screen. There are a bunch of options available here for you to make changes to different aspects of your website. This includes the typography, menus, and widgets.
You should also see an option to provide Additional CSS in the list as shown in the image above. Click on it and add the following CSS in the provided editing area.
1 |
h1.entry-title { |
2 |
display: none; |
3 |
}
|
This will hide the title on all posts in your theme if it is using this particular class.
What if you want to only hide the title of a particular post or page? In this case, you will have the option to prepend the CSS class like post-385 to hide the post with ID 385. You can see this selector in the image above. In this case, our CSS would be:
1 |
.post-385 h1.entry-title {
|
2 |
display: none; |
3 |
} |
Hiding the titles for only posts or pages is also possible with the following CSS:
1 |
.post h1.entry-title { |
2 |
display: none; |
3 |
}
|
4 |
|
5 |
.page h1.entry-title { |
6 |
display: none; |
7 |
}
|
Again, I would like to mention that the exact selectors that you need to use will depend on your theme.
You can also use some other CSS properties to hide the elements in such a way that they are still accessible to screen readers. This will make your website more user-friendly if the title you are hiding provides important context to screen readers for accessibility.
1 |
h1.entry-title { |
2 |
position: absolute; |
3 |
top: -9999px; |
4 |
left: -9999px; |
5 |
}
|
Final Thoughts
In this tutorial, we learned about different ways of either removing or hiding post and page titles. You can directly edit the template files to remove the title from the markup if you are using WordPress themes with full site editing capabilities.
You can also use some free plugins to remove post titles selectively. However, those plugins might not work with every theme. In that case, you will have to use CSS rules to hide those titles.
No comments:
Post a Comment