How to Change the Heading Tag for the Page/Post Titles?

A Page/Post title is usually used to let the users know which page they are currently on. You can enable or disable the Page/Post Title for the website in Astra Settings ( Edit Page / Edit Post > Astra Settings > Disable Sections > Disable Title ). By default this Title has heading tag

assigned in HTML structure.

You can modify this tag to any other HTML tag by adding a filter to the functions.php file of your Astra Child Theme. If you don』t have a Child Theme installed and activated on your website, please check this article on how to do this.

How Can I Do This?

If you looking to change the tag of a title (like Page/Post title), you can use the below filter to change the tag for all the titles on your website. Please follow these steps:

Step 1 – Navigate to Dashboard > Appearance > Theme Editor and select the Child Theme

Step 2 – Add the filter below to the functions.php file of your Child Theme. You can check this article on adding code to your Child Theme to help you out.

add_action( 'wp', 'astra_add_title_filter' );

/**
* Function to add filters to change titles.
*
* @return void
*/
function astra_add_title_filter() {
add_filter( 'astra_the_title_before', 'astra_the_title_before_tag', 1, 10 );
add_filter( 'astra_the_title_after', 'astra_the_title_after_tag', 1, 10 );
}

/**
* Function to change tag in all titles.
*
* @param string $tag This contains default tag used for the titles.
* @return string
*/
function astra_the_title_before_tag( $tag ) {
$tag = '

';
return $tag;
}

/**
* Function to change tag in all titles.
*
* @param string $tag This contains default tag used for the titles.
* @return string
*/
function astra_the_title_after_tag( $tag ) {
$tag = '

';
return $tag;
}

Step 3 – The filter will change the default

tag to

tag. Update this by replacing

in the code with any heading tag (or other) needed. Click the 「Update File」 button to apply changes.

Note:

The following functions, astra_the_title_before_tag, and astra_the_title_after_tag, need to contain the same tag, as one function is for the opening tag, and the other one is for the closing tag (just like we have used

for both in the code above).

Default Tag

Heading Tag after adding the Filter

Add Title attribute to Header Background Image as a Substitute for Alt Text

Astra Pro Addon offers the option to set a background image for the header. This image is added using CSS background-image Property. This property does not have an option to add an alt attribute to the image.

So as an alternative to the alt attribute, we can add a title attribute to the div. This will act as an alt text in the background-image property.

The following filter will add a title attribute to the div of the header, where the background image is added using CSS property.

add_filter( 'astra_attr_main-header-bar', 'astra_function_to_add_title' );

/**
* Add Attribute to the Header.
*
* @param array $attr Default attributes.
* @return array $attr Modified attributes.
*/
function astra_function_to_add_title( $attr ) {
$header_bg_obj = astra_get_option( 'header-bg-obj-responsive' );
$image_alt_text = get_post_meta( attachment_url_to_postid( $header_bg_obj['desktop']['background-image'] ), '_wp_attachment_image_alt', true );
$attr['title'] = $image_alt_text;
return $attr;
}

Alt text added for image –

Alt text will appear as title for the image in HTML markup –

How To Remove the Astra Header From Entire Site?

Using the Astra Meta Settings, you can easily disable the Header for each page or post separately. On the other side, if you want to remove the Astra Header from your entire website, this could be a tedious and time-consuming task.

To completely remove the Astra Header in a quick and easy way, you can use a custom code (filter). You would need to add the following filter to the functions.php file of your Child Theme:

add_action( 'wp', 'remove_astra_header_callback');
function remove_astra_header_callback(){
remove_action( 'astra_header', 'astra_header_markup' );
}

If you don』t have your Child Theme installed, please check this article on how to do it. If you are not sure how to add this code, please check this article.

How To Enable Design Options for Header and Footer Widgets in Block-Based Editor

One of the many changes brought about by WordPress 5.8 is Block-Based Widgets Editor. This feature allowed using blocks in your widget areas, next to the older legacy widgets used before. Astra Theme provides support for this feature, including the Header and Footer Builder Widgets too. 

On the other hand, if you would like to continue using Astra』s widget design options for your Header and Footer widgets as before, you can do this by adding a code. This would allow you to keep using the theme widget design settings (font, color), together with the Block-Based Widgets Editor.

If on the other side you would like to completely remove the Block Editor support for Widgets, please check this article.

What Changed And Why Would I Need This?

The Astra theme provides a lot of freedom when building your websites. Header and Footer Widgets come with a number of different color and font settings making customization easy. 

With the introduction of Block-Based Widgets Editor, you can add Blocks directly to your Astra Header and Footer using the Widget Element. Since there are many Blocks, each with its own settings, we removed the Astra widget design options to fully support this WordPress feature.

Instead, you can customize each Block independently using its block editor settings. If you still wish to use Astra options for Header and Footer Widgets, you can do this by adding a filter. This will enable you to use Astra widget design options as before, while still fully benefiting from the improvements brought by Block-Based Widgets Editor.

You will find the needed Astra widget design options under the 「Design」 button of widget elements you add to your Header or Footer Builder.

How Can I Do This?

If you would like to enable Astra』s widget font and color options in Block-Based Widget Editor, you need to add a custom code. Please keep in mind that these design settings may not work for some widget blocks, as these options are deprecated. 

You can add the following custom code to the functions.php file of your Child Theme:

add_filter( 'astra_remove_widget_design_options', '__return_false' );

If you don』t have your Child Theme installed, please check this article on how to do it. If you are not sure how to add this code, please check this article.

How to Disable Primary Header?

You can disable Astra Primary Header from the entire site by adding a filter code to the child theme』s functions.php file. 

If you』re using the Old (Legacy) Astra Header for your website, you can add the following code:

add_action( 'wp', 'astra_remove_header' );

function astra_remove_header() {
remove_action( 'astra_masthead', 'astra_masthead_primary_template' );
}

On the other side, if you』re using the new Header Footer Builder (or decided to switch to it from the Legacy Header), you will need to use a different code instead:

add_action( 'wp' , 'astra_remove_new_header' );

function astra_remove_new_header() {
remove_action( 'astra_primary_header', array( Astra_Builder_Header::get_instance(), 'primary_header' ) );
remove_action( 'astra_mobile_primary_header', array( Astra_Builder_Header::get_instance(), 'mobile_primary_header' ) );
}

How to Change the Destination URL for Website Logo?

By default, clicking on the website logo directs the user to the front/home page. In case, you need to change the destination for the logo use the following custom code.

For users with the Astra theme version below 3.0.0 —

add_action('astra_masthead', 'astra_logo_change_url');

function astra_logo_change_url(){
remove_action( 'astra_masthead_content', 'astra_site_branding_markup', 8 );
add_filter( 'home_url', 'astra_logo_custom_url' );
add_action( 'astra_masthead_content', 'astra_site_branding_markup', 8 );
}

function astra_logo_custom_url( $url ) {
return 'https://google.com';
}
add_action('astra_masthead_content','astra_remove_logo_custom_url',9);
function astra_remove_logo_custom_url(){
remove_filter( 'home_url', 'astra_logo_custom_url' );
}

For new Users with the Astra theme version 3.0.0 and above, using the Header Footer Builder —

add_action('astra_masthead', 'astra_logo_change_url');
add_action('astra_mobile_header_bar_top', 'astra_logo_change_url');
function astra_logo_change_url(){
remove_action( 'astra_masthead_content', 'astra_site_branding_markup', 8 );
add_filter( 'home_url', 'astra_logo_custom_url' );
add_action( 'astra_masthead_content', 'astra_site_branding_markup', 8 );
}
function astra_logo_custom_url( $url ) {
return 'https://google.com';
}
add_filter('astra_logo','astra_remove_logo_custom_url');
function astra_remove_logo_custom_url( $html ){
remove_filter( 'home_url', 'astra_logo_custom_url' );
return $html;
}

If your Astra theme version is 3.0.0. or above, but you are still using the old Astra header and footer options, please use the code for the older theme versions.

Note:

Paste the code to the child theme』s functions.php file.Make sure you replace the test URL (http://google.com) with your destination URL in the above code.

Remove Primary Navigation Menu with Hook

Description

To remove Primary Navigation Menu, you can add the following PHP code –

remove_action( 'astra_masthead_toggle_buttons', 'astra_masthead_toggle_buttons_primary' );
remove_action( 'astra_masthead_content', 'astra_primary_navigation_markup', 10 );

Example

function remove_primary_menu_callback() {
remove_action( 'astra_masthead_toggle_buttons', 'astra_masthead_toggle_buttons_primary' );
remove_action( 'astra_masthead_content', 'astra_primary_navigation_markup', 10 );
}
add_action( 'init', 'remove_primary_menu_callback' );

Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file.

Change the Astra Header Breakpoint Width

In Astra Theme you can modify the screen size when you want to trigger the mobile header using the filter astra_header_break_point The default breakpoint is 921px. That means the mobile header will be triggered at 921px screen size.

Note:

If you are using {Astra』s Header Footer Builder} the below filter will not work, but to change the breakpoint you can go with updating tablet breakpoint as mentioned in this article. [Link here]

To change the default breakpoint use filter. In the below example the mobile header will be triggered at 1120px screen size. Change 1120 to the screen size of your choice.

/**
* Change the breakpoint of the Astra Header Menus
*
* @return int Screen width when the header should change to the mobile header.
*/
function your_prefix_change_header_breakpoint() {
return 1120;
};

add_filter( 'astra_header_break_point', 'your_prefix_change_header_breakpoint' );

Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file. 

Note:

Astra version 1.4.0 and above provides an option to change the breakpoint. You don』t have to use the above filter. Refer to the document here.Further, after Astra 3.0.0 in the Astra』s Header Footer builder, we have provided a Mobile header that can be added for the Mobile devices. [Learn More]

Filter to Remove Link From Featured Images on Blog Page

Do you see the default link on the Featured Image of the Posts on Blog Page?

Why?

The Featured Images added to each post are set a link to the same post.

How to clear?

From the Astra Theme version – 2.2.2 we providing a filter using which the link to the post can be removed.

Filter: The filter has been added to remove the featured image link on the blog page.

/**
* Remove HTML before tag for link.
* @param string $markup markup of post.
* @return string
*/
function astra_remove_link_before( $markup ) {
$markup = __return_empty_string();
return $markup;
}

/**
* Remove HTML after tag for link.
* @param string $markup markup of post.
* @return string
*/
function astra_remove_link_after( $markup ) {
$markup = __return_empty_string();
return $markup;
}

add_filter( 'astra_blog_post_featured_image_link_before', 'astra_remove_link_before' );
add_filter( 'astra_blog_post_featured_image_link_after', 'astra_remove_link_after' );

Note: Add the above filter to your child theme』s functions.php, here』s an article to help you Add Custom code.

How to Change Previous and Next Link Text from a Single Blog Post?

Sometimes you might need to change the navigation (Previous and Next ) links to text on the single blog post. Default strings for navigation links will be – Previous Post and Next Post. You can change it using the following filters.

1. Replace default navigation strings with next/previous post titles

The following filter will fetch the Previous and Next post title and will display them as navigation links.

add_filter( 'astra_single_post_navigation', 'astra_change_next_prev_text' );

/**
* Function to change the Next Post/ Previous post text.
*
* @param array $args Arguments for next post / previous post links.
* @return array
*/
function astra_change_next_prev_text( $args ) {
$next_post = get_next_post();
$prev_post = get_previous_post();
$next_text = false;
if ( $next_post ) {
$next_text = sprintf(
'%s →',
$next_post->post_title
);
}
$prev_text = false;
if ( $prev_post ) {
$prev_text = sprintf(
'← %s',
$prev_post->post_title
);
}
$args['next_text'] = $next_text;
$args['prev_text'] = $prev_text;
return $args;
}

2. Replace default navigation strings with custom text

The following filter will replace Previous and Next links with your custom text. You can replace your text with – 『My Previous Custom Text』 and 『My Next Custom Text』 in the following filter code.

add_filter( 'astra_single_post_navigation', 'astra_change_next_prev_text' );

/**
* Function to change the Next Post/ Previous post text.
*
* @param array $args Arguments for next post / previous post links.
* @return array
*/
function astra_change_next_prev_text( $args ) {
$next_post = get_next_post();
$prev_post = get_previous_post();
$next_text = false;
if ( $next_post ) {
$next_text = sprintf(
'%s →',
'My Next Custom Text'
);
}
$prev_text = false;
if ( $prev_post ) {
$prev_text = sprintf(
'← %s',
'My Previous Custom Text'
);
}
$args['next_text'] = $next_text;
$args['prev_text'] = $prev_text;
return $args;
}

Note: Add the above code in the child theme』s functions.php file.