Filters to Support CPTs for Blog Meta and Single Blog Meta

You can add the following filters to insert Blog Meta and Single Blog Meta to the Custom Post Types ( CPTs ) in the child theme』s functions.php –-

/*
* Filters to support meta-structure for CPT Single Posts & Archive
*/

add_filter( 'astra_blog_archive_post_type_meta', 'astra_blog_archive_post_type_meta_func' );

function astra_blog_archive_post_type_meta_func( $post_type_array ) {
array_push( $post_type_array, 'movies' ); //Here movies is the slug of CPT, you will need to update with the respective slug of your CPT
return $post_type_array;
}

add_filter( 'astra_single_post_type_meta', 'astra_single_post_type_meta_func' );

function astra_single_post_type_meta_func( $post_type_array ) {
array_push( $post_type_array, 'movies' ); //Here movies is the slug of CPT, you will need to update with the respective slug of your CPT
return $post_type_array;
}

Note

Refer this doc on How to Add Custom PHP Code?

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.

Modify font-display Property Value

The font-display CSS property defines how font files are loaded and displayed by the browser. Read an informative article by CSS-TRICKS here.

You can modify the value for this property using the following filter

add_filter( 'astra_fonts_display_property', 'astra_replace_fallback_with_swap' );
function astra_replace_fallback_with_swap( $property ) {
$property = 'swap';
return $property;
}

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

To check the font-display property, you can go to a page and press Ctrl+U OR Right-click > View Page Source.

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.

How to Update Responsive Breakpoints for Tablet+Mobile in Astra?

Previously in Astra, we had default breakpoints i.e. 544 for Mobile and 768 for Tablet devices. In the Astra v2.4.0, we are providing the feature to set the Responsive breakpoint in Astra and match them with your page builder.

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.

How To Hide Quantity Number When the Woocommerce Cart Is Empty?

Astra』s Header Footer Builder comes with the WooCommerce Cart element that allows you to add the mini-cart to your header. By default, the mini-cart displays a number of items added to the cart together with the icon.

The mini-cart will show the number 「0」 until the first product is added to the cart. 

In case you would like to hide this number, you can do it by adding a custom code (filter). Adding the filter will hide the number of products while the mini-cart is empty.

To do this, you would need to add the following filter to the functions.php file of your Child Theme:

add_filter('astra_woo_header_cart_total', 'remove_cart_count');
function remove_cart_count( $default){
if(0 == WC()->cart->get_cart_contents_count()){
return false;
}else{
return $default;
}
}

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.

Change Footer Widget Title』s Heading Tag

When you add a widget in the footer, a default heading tag that will be applied to widget title is H2

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'] = '

';
$atts['after_title'] = '

';
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'] = '

';
$atts['after_title'] = '

';
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'] = '

';
$atts['after_title'] = '

';
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'] = '

';
$atts['after_title'] = '

';
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'] = '

';
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'] = '

';
$atts['after_title'] = '

';
return $atts;
}

Note:

If you have built the Footer using the Footer builder of Header Footer builder, please use the below code –

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

function widget_title_footer_1_tag( $atts ) {
$atts['before_title'] = '

';
$atts['after_title'] = '

';
return $atts;
}

Note:

Please note, that you pick the correct filter having the number and update the heading tags h4 or other as required.Refer this doc on How to Add Custom PHP Code?

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.

Filter to Add Support for Gutenberg Cover and Group blocks

Are you looking to add support for the Cover and Group blocks? Now with the Astra Theme version 2.5.0, it will be resolved –

For New Users:

On your fresh or new installations, compatibility for Cover and Group blocks will be provided by default.

For Existing Users:

You can use the following filter in the child theme』s functions.php to provide Support for the Cover and Group blocks –

add_filter( 'astra_gtn_group_cover_css_comp', '__return_true' );

Compatibility to Remove Margin-top and Bottom

We have provided another compatibility to remove the margin-top and bottom in case of Full Width – Contained / No sidebar & when No header is selected.

If the users want the top and bottom margin, you can use the following filter in the child theme』s functions.php –

add_filter( 'astra_content_margin_full_width_contained', '__return_false' );

Note

Refer this doc on How to Add Custom PHP Code?

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.