How to hide page and post titles in the Astra theme

How to hide the post title in the Astra Theme

What is the page / post title?

When you create a new post (or page) in WordPress, you supply a name of the post at the top of the screen.  This name is used to create the slug (url) of the post and it is also is often used as the page title

For example, the name that I provided when starting to write this post is "How to hide page and post titles in the Astra theme." That name was used to form the slug address of this post and is also assigned to be the page title at the top of this post.

Sometimes it can be helpful to hide this title.

Post Title Definition

What is the page / post title?

In this image you can see how the post title area is defined.  There is a header area, and within that header area there is a title area and meta area.

Each area can be selected for display or hiding.

So, why would you want to hide the title?

Hey, I'm not sure why you would want to hide the title, but I can tell you a few reasons why I have wanted to hide the title in the past.

First, the theme that I'm using might not put the page title in the location I desire.  Sometimes I want to move the title for aesthetics or clarity purposes. By defult, Astra styles the post title rather blandly at the top of the post.  I like my page tiltles the way I like my coffee - a touch of cream added to remove it from stark black, but far, far away from a liquid candy bar.

Other times I want to have a difference between what I named the post in the WordPress editor, and what I want to display to my readers as the title of the page.  For example, I might be creating a sales page or a review page which needs to have a page title that my copywriter just loves, but is too far removed from a sensible post name that I want to use in WordPress.

It's easy - and not so easy - to hide the title.

There is definately an easy way to hide page titles on individual posts with the Astra theme. On each page / post you can see a meta box (those little boxes with different options or checkboxes in them).  Just tick the checkbox that says "Hide Title" and you're done.

The rub here is that there is no way to globally turn titles on or off as there is in other themes.  At some point, Astra may add the global option but I've seen no indication that is in the works.  The best you can do right now for an out of the box solution is to individually edit each page, or use the Astra Bulk Edit plugin.  This plugin lets you edit the Astra metabox individual page / post settings in bulk.  For a non-box solution there are ways you can hide the title via CSS or PHP.

Note: There is a drawback to most of these methods;  the schema article markup for 'headline' is removed, so be sure to see  the CSS Method for considerations.

Recommended Method for Hiding the Title in Astra Themes

Combining a Custom Layout with CSS.

Astra Custom Layout Settings
Astra Theme Settings

Custom Layout Part

You can create a custom layout part either with Astra or Beaver Themer to get the post title to look the way you want.  Both can achieve the same results.  Access in Astra is via Appearance > Custom Layouts while access in Beaver Themer is via Builder > Themer Layouts.

Then add the following CSS to the site CSS:

header.entry-header .entry-title {
  display: none;
}
Astra Disable Title Metabox
Astra Theme Settings

Built-in Post Metabox

On each post (page) you will have a metabox that has several Astra options in it.  One of the options is to hide the page title. Simply checking the hide option will remove the post title from displaying.

This method only works when you edit the posts one-by-one.

Astra Bulk Edit Options
WordPress Plugin

Astra Bulk Edit

Astra provides a bulk edit plugin that you can get from the WordPress repository.  This plugin creates new panel options in the quick edit link area of the WordPress posts listings and in the WordPress bulk editor.  This is really just a way to apply the post meta method to multiple posts at the same time.  The end result is that the individual posts meta options are set for each single post just as if you had edited them individually.

Either click on the quick edit link of an individual post, or select multiple posts and then select Edit from the action options.  You will then have the normal quick edit fields as well as a new Astra Settings panel with all the various options for the Astra theme.

Astra Custom Header
Astra Pro Feature

Custom Page Header

If you have Astra Pro one of the optional features is to have custom page headers.  Just turn the feature on in the Astra settings (Appearance > Astra > Addons > Page Headers.)

This will create a custom page header under the normal site header.  You can specify some aesthetics such as background color, image, and font color. You can also specify the target for the page header (e.g. all posts or a specific page) and you can design multiple page headers according to your requirements. 

When the custom page header is active on a post, the standard theme post title is removed and it is displayed within the page header area instead.

Astra Hide Title Via CSS
Digging CSS

Hide it via CSS

There is a downside to using the methods above... when using the them, the schema markup for "headline" is removed from the page. While I don't think this is critical for SEO, search engines do use this information to more clearly identify what the article is about and also to taylor the search results display to the end user.

You can remove the page title via CSS in multiple ways.  It is more flexible than some of the other methods, but it does require that you can dig into the CSS of your site a bit. You have to know not only what you want to hide, but also where you want to hide it... all pages?  all posts? Just a few pages?

You can use the display: none property to completely remove the title and meta line from showing but still maintain the SEO headline schema tag within the html markup - which if you are not aware, is good for some SEO purposes. To get this to work, just edit the customizer additional CSS and put in the following code to hide the title on all pages and posts.  If you want to hide on just pages use .page header.entry-header instead, or .post header.entry-header to hide the title on posts only.

To hide the title and meta line.

header.entry-header {
  display: none;
}

To hide the title but display the meta line.

header.entry-header .entry-title {
  display: none;
}
Astra Hide Title Via PHP
Digging PHP

Hide it via PHP Code

Another way to hide the title is via some PHP called in a filter.  Rushi Jagani provided the following code sample which adds a WordPress filter that subsequently calls an added function.

This simple routine checks to see if the post type is "page", and if so sets the page header display to false.

// Page Header Title Disable on Single Page.
add_filter( 'astra_advanced_header_title', 'page_header_title_disable' ); 

function page_header_title_disable( $title ) { 
	// Add your condition where you don't want the Page Header title. e.g - is_page()
	if ( is_page() ) {
		$title = false;
	}
    return $title;
};

.

Leave a Comment

Your email address will not be published. Required fields are marked *