Therefore, this document will help you replace these hooks on your website. Please use the lists below to update your code.

Deprecated Astra Hooks and Their Replacements

In short, further down, you will find lists of functions, filters, and actions. Accordingly, please update hooks if you added any filters, actions, or other functions to your website.

Astra Theme 3.7.4 and Astra Pro 3.6.2 versions are still compatible with old codes to avoid any issues. Although your website will still work well after the update, you should replace deprecated hooks with the replacements below.

Further, to help you with these updates, we added backend notifications:

Hence, you can do this by replacing deprecated hooks in your code with the replacements from the lists. This way, your website will remain fully functional and compatible with future updates.

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.

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.

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?

You can use the filter below to change the tag for the Related Posts Title to any other tag. 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;

// Filter for changing related posts title heading tag.
add_filter( 'astra_related_posts_title', 'update_related_posts_title_markup', 10, 1 );
function update_related_posts_title_markup( $markup ) {
    $markup = '<div class="ast-related-posts-title-section">';
     $markup .= '<h4 class="ast-related-posts-title">'; // Replace H4 with the tag you need.
 $markup .= 'Related Posts';
 $markup .= '</h4>'; // Replace H4 with the tag you need.
    $markup .= '</div>';
    return $markup;
}

Step 3 – The filter will change the default <h2> tag to <h4> tag. Update this by replacing <h4> in the code with any heading tag needed. Click the “Update File” button to apply changes.

Default Tag

Heading Tag after adding the Filter

If you wish to change this heading tag use the following custom code. Add the respective filter code in the child theme’s functions.php file. 

// Footer Widget 1
add_filter( 'astra_advanced_footer_widget_1_args', 'widget_title_footer_1_tag', 10, 1 );

function widget_title_footer_1_tag( $atts ) {
    $atts['before_title'] = '<h1 class="widget-title">';
    $atts['after_title'] = '</h1>';
    return $atts;
}

// Footer Widget 2
add_filter( 'astra_advanced_footer_widget_2_args', 'widget_title_footer_2_tag', 10, 1 );

function widget_title_footer_2_tag( $atts ) {
    $atts['before_title'] = '<h3 class="widget-title">';
    $atts['after_title'] = '</h3>';
    return $atts;
}

// Footer Widget 3
add_filter( 'astra_advanced_footer_widget_3_args', 'widget_title_footer_3_tag', 10, 1 );

function widget_title_footer_3_tag( $atts ) {
    $atts['before_title'] = '<h4 class="widget-title">';
    $atts['after_title'] = '</h4>';
    return $atts;
}

// Footer Widget 4
add_filter( 'astra_advanced_footer_widget_4_args', 'widget_title_footer_4_tag', 10, 1 );

function widget_title_footer_4_tag( $atts ) {
    $atts['before_title'] = '<p class="widget-title">';
    $atts['after_title'] = '</p>';
    return $atts;
}

// Footer Widget 5
add_filter( 'astra_advanced_footer_widget_5_args', 'widget_title_footer_5_tag', 10, 1 );

function widget_title_footer_5_tag( $atts ) {
    $atts['before_title'] = '<div class="widget-title">';
    $atts['after_title'] = '</div>';
    return $atts;
}

You can choose from the required filter for the respective widget and update the tag as per your requirement.

For e.g. You are looking to update the Third Footer widget title for that you will need to copy the code just as below and paste it in your child theme’s functions.php.

add_filter( 'astra_advanced_footer_widget_3_args', 'widget_title_footer_3_tag', 10, 1 );

function widget_title_footer_3_tag( $atts ) {
    $atts['before_title'] = '<h4 class="widget-title">';
    $atts['after_title'] = '</h4>';
    return $atts;
}

add_filter( 'astra_footer_widget_1args', 'widget_title_footer_1_tag', 10, 1 );


function widget_title_footer_1_tag( $atts ) {
    $atts['before_title'] = '<h1 class="widget-title">';
    $atts['after_title'] = '</h1>';
    return $atts;
}

Default breakpoints –

• Mobile Breakpoints – Existing and New – 544px both are the same.
• Tablet Breakpoints – 768 ( Existing ) – 921 ( New Breakpoint )

Why?

• Some users had a requirement for different breakpoints. Let’s suppose you’re building your website with a page builder and the page builder has different breakpoints ( rather than 544 & 768 ).
• When a Menu is created with a breakpoint at 921px, below which our menu turns into a Hamburger Menu so normally the colors for this device should render as Tablet, but in this case, the colors are inheriting from the desktop. Because prior to this version we had a default breakpoint of 768px for tablet. This scenario has been taken care of in this release.

So starting from the Astra v2.4.0 update you can alter Astra theme’s Tablet & Mobile breakpoints with respect to the page builder’s breakpoints.

Solution!

In our Astra v2.4.0, we have introduced new breakpoints for new users they are, for Tablet = 921px, for Mobile = 544px.

What it means for the existing users, the site or any changes won’t be affected, their breakpoints will be 768px & 544px as it worked.

If the existing users want to update their default breakpoints with some different breakpoints, they can use the following filter –

We have introduced two new filters to change the Mobile and Tablet breakpoint numbers.

To change the Mobile Breakpoint:

// Update your custom mobile breakpoint below - like return 544;
add_filter( 'astra_mobile_breakpoint', function() {
    return 544;
});

To change the Tablet Breakpoint:

// Update your custom tablet breakpoint below - like return 921;
add_filter( 'astra_tablet_breakpoint', function() {
    return 921;
});

Note: Follow the steps here in this document to add the above filter or any custom code using the Child Theme or other methods as mentioned.

For existing users, we recommend to please use the same breakpoint value for “astra_tablet_breakpoint” and from the Primary Menu > Menu breakpoint. So when your menu displays a Hamburger Menu it will load the tablet settings for both ( i.e. customizer settings & CSS styling ).

Are you facing style issues on RTL ready website?
=> We would recommend visiting the Astra Options page and refresh the page to resolve style issue. Or if the CSS File Generation is enabled try refreshing the setting.

Recommended: To have the latest version of both the Astra theme and Astra Pro Addon i.e. 2.4.0 and above.

You can change it to any text by adding a custom code. To do this, please add the following code to your Astra Child theme’s functions.php file:

function astra_get_search_form( $echo = true ) {

    $form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
        <label>
            <span class="screen-reader-text">' . _x( 'Search for:', 'label', 'astra' ) . '</span>
            <input type="search" class="search-field" ' . apply_filters( 'astra_search_field_toggle_data_attrs', '' ) . ' placeholder="' . esc_attr_x( 'My custom text', 'placeholder', 'astra' ) . '" value="' . get_search_query() . '" name="s" role="search" tabindex="-1"/>
        </label>
        <button type="submit" class="search-submit" value="' . esc_attr__( 'Search', 'astra' ) . '"><i class="astra-search-icon"></i></button>
    </form>';
  
  // Replace My Placeholder with your desired string.

    $result = apply_filters( 'astra_get_search_form', $form );

    if ( null === $result ) {
        $result = $form;
    }

    if ( $echo ) {
        echo $result;
    } else {
        return $result;
    }
}

To set your desired placeholder text, just replace the words My custom text with your text in the following part of the code:

...
<input type="search" class="search-field" ' . apply_filters( 'astra_search_field_toggle_data_attrs', '' ) . ' placeholder="' . esc_attr_x( 'My custom text', 'placeholder', 'astra' ) . '" value="' . get_search_query() . '" name="s" role="search" tabindex="-1"/>
...

In case you are using Astra Search Shortcodes, or you added the search feature to your Above or Below Header, the code will work only with the “Slide” search style.

If you need to change the placeholder with other Search styles, please add one of these codes instead. Add the code based on the style you want to use:

• for “Full-Screen” Style:

function full_screen_search_placeholder( $strings ) {
    $strings['string-full-width-search-placeholder']   = 'My custom text';
    return $strings;
}
add_filter( 'astra_default_strings', 'full_screen_search_placeholder', 99 );

• for “Header Cover” Style:

function header_cover_search_placeholder( $strings ) {
    $strings['string-header-cover-search-placeholder']   = 'My custom text';
    return $strings;
}
add_filter( 'astra_default_strings', 'header_cover_search_placeholder', 99 ); 

• for “Search Box” Style:

function search_box_placebolder( $form ) {
    $form = str_replace( 'placeholder="Search …"', 'placeholder="My custom text"', $form );
    return $form;
}
add_filter( 'astra_get_search_form', 'search_box_placebolder' ); 

Same as with the first code, to set your desired placeholder text, just replace the words My custom text with your text in the bolded part of the code.

Note: Add the following code in the child theme’s functions.php file.

add_filter( 'astra_the_search_page_title', 'my_function', 10 ); 

function my_function() {
    return sprintf( __( 'Add Custom Text Here: %s', 'astra' ), '<span>' . get_search_query() . '</span>' );
}

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 = '<h4>';
	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 = '</h4>';
	return $tag;
}

Step 3 – The filter will change the default <h1> tag to <h4> tag. Update this by replacing <h4> in the code with any heading tag (or other) needed. Click the “Update File” button to apply changes.

Default Tag

Heading Tag after adding the Filter

By default, the Title has Heading 1 tag <H1> while tagline has paragraph tag <p> in HTML structure. You can change this tag to any other HTML tag using the following filters:

• Change Tag For a Tagline

add_filter( 'astra_site_tagline_tag', 'astra_change_site_tagline_tag' );

/* Function to change tag of Site Tagline.
@param string $tag Default is p tag.
*/
function astra_change_site_tagline_tag( $tag ) {
$tag = 'h6';
return $tag;
}

This is how your Default tag looks in your code:

And this is the change from <p> to <H6> in your code after adding the Filter:

• Change Tag For a Site Title

You can also replace the H1 tag for the Title with span tag using the below filter –

add_filter( 'astra_site_title_tag', 'astra_function_change_site_title' );

/**
* Function to replace h1 tag with span in site title.
*
* @param string $tag This contains the tag used for site titles.
* @return string
*/
function astra_function_change_site_title( $tag ) {
    $tag = 'span';
    return $tag;
}