Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 24, 2023 04:33 am

How to Hide or Remove the Title on a Page in WordPress (3 Techniques)


Titles are an important part of many webpages on a website. They help readers and search engines know the main topic or content of 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 25 January 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 ones.


There are quite a few themes available in the WordPress theme directory now that support full site editing.


Full Site Editing ThemesFull Site Editing ThemesFull Site Editing Themes

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 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.


WordPress Site EditorWordPress Site EditorWordPress Site Editor

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:


Editing Single PageEditing Single PageEditing Single Page

You might need to scroll down a bit to find the template titled Single. The description of the template indicates 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 the template that displays a single post.


Click on Single, and you should see something like the image below. The actual layout will vary based on the theme you have installed. Select the top block, and a floating menu will pop up. Click on the three dots on the right, and you will see some more options.


Remove Cover OptionRemove Cover OptionRemove Cover Option

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 the duplicated 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.


Remove Featured ImageRemove Featured ImageRemove Featured Image

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 pages, 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 like best is 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 it and check if it works in your case. This could be because 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.


Hide the Title (Meta Box)Hide the Title (Meta Box)Hide the Title (Meta Box)

Reload your page, and you will see that the post title is now gone. I would like to reiterate 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 from the post or 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 selecting Inspect. This should open up a new window with content that looks like the image below.


Page Source InspectionPage Source InspectionPage Source Inspection

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.


Site CustomizerSite CustomizerSite Customizer

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.



Original Link: https://webdesign.tutsplus.com/tutorials/how-to-hide-or-remove-title-on-a-page-in-wordpress-3-techniques--cms-106756

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code