Disable Page Title in Astra Page Header: Easy In 5 Minutes

Astra Advanced Headers Module

I love using the Astra Page Header (Advanced Headers) in Astra Pro. However, the page title takes up too much space on the image. Also, the default white text often fails to contrast with photos, especially when they are not dark.

In Astra Page Header settings, you can make the page title colour darker, but it doesn’t look good. You can also add an overlay colour to the image. I don’t like this because my photographs are essential to visitors and should remain clearly visible.

The Astra Page Header module does not natively support a graduated background for the page title, which would help it stand out. I previously used CSS for this effect, but now disable the page title on images and position it below the photographs instead. More about how disabling and repositioning the page title later on in this post.

If you are interested in using CSS to add a graduated background behind the page title, below is an example of how I used to achieve this.

CSS code to add a graduated background behind the page title

/* Target Astra Page Header on name of post - Wide Screens */

@media only screen and (min-width: 1440px) {
.postid-xxxxx .ast-advanced-headers-title {
  font-size: 1.25em;
  line-height: 34px;
  color: #ffffff;
  font-weight: 300;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  margin-left: 15%;
  margin-right: 15%;
  padding-top: 20px;
  padding-bottom: 20px;
   }
} 

/* Target Astra Page Header on name of post - Narrow Screens */

@media only screen and (max-width: 1440px) {
.postid-xxxxx .ast-advanced-headers-title {
  font-size: 1em;
  color: #ffffff;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 5px;
  margin-left: 0%;
  margin-right: 0%;
  padding-top: 15px;
  padding-bottom: 12px;
  line-height: 24px;
  }
}

Disclaimer: I do not consider myself to be an expert in CSS coding. The above CSS is not intended to be an example of best practice in CSS coding.

Disable Astra Page Title and Reposition Below

It is possible to disable the page title in the page headers and instead reposition it below; the process is easy.

The procedure is detailed in an Astra Pro documentation page located here, where you will find two blocks of PHP code.

Copy The Two Blocks of PHP Code

PHP first block of code

add_filter( 'astra_advanced_header_title', 'remove_page_header_title' );
function remove_page_header_title() {
  return;
}

PHP second block of code

add_filter( 'astra_the_title_enabled', 'display_page_title', 999 );
function display_page_title() {
  return true;
}

You can use the Code Snippets plugin for this

I added the above two blocks of code as separate snippets using the Code Snippets plugin. Activate each snippet with the setting Only run on site front end. The link to the Code Snippets plugin is at the foot of this post.

Now go to your post or page that uses an Astra Page Header (or does not use an Astra Page Header), refresh it, and observe that the page title has been removed from the page header image. It has also been repositioned under the image, as in the page header example shown at the top of this post.

The Hidden Catch: Why This Breaks the Block Editor’s “Eye” Icon

On all pages and posts

If you implement the official Astra snippets above, you will notice a strange side effect when editing your pages and posts. In modern versions of WordPress, clicking on your main title block reveals a small Disable Title toggle or Eye Icon designed to let you hide the title on a post-by-post basis.

Once you add Astra’s two PHP blocks, the eye icon stops working entirely. No matter how many times you toggle it to “hidden” and update your post, the title always remains visible on your live site.

Astra page header disable page title toggle. — Infographic: *Disable Title toggle or Eye Icon* *in an Astra Page Header*

This happens because the official snippet uses an absolute command (return true;) running at a massive priority level of 999. It acts as a digital hammer, completely overriding the choices you save in the editor’s settings.

But there is a simple solution to this

The Solution: A Smarter PHP Snippet

Instead of the second PHP block shown in Astra’s documentation (linked to above), use this PHP snippet.

add_filter( 'astra_the_title_enabled', 'display_page_title_except_when_hidden', 999 );

function display_page_title_except_when_hidden( $title_enabled ) {
    // 1. Grab the unique ID of the post currently being loaded
    $post_id = get_the_ID();
    
    if ( $post_id ) {
        // 2. Query the database to see if the Astra Eye Icon has been toggled off
        $title_status = get_post_meta( $post_id, 'site-post-title', true );
        
        // 3. If the user clicked the eye icon, respect that choice and hide it
        if ( 'disabled' === $title_status ) {
            return false; 
        }
    }
    
    // 4. Otherwise, maintain the Advanced Header layout default
    return true; 
}

This solution works perfectly in my WordPress environment.

Have you come across this issue in your Astra Page Header or any posts/pages, and did the solution outlined in this post help you? I would love to hear from you in the comments section below.