Deprecated Google Fonts Filter

From the Astra theme version 2.5.0, we are making some changes on how the Google Fonts file will be served. Previously, this used to cause a rare error with WP_Filesystem() on some servers.

For the same, we are deprecating the filter: astra_google_fonts_json_file

Now, instead of the above filter, users will now be using new filter: astra_google_fonts_php_file

Note: For users who are getting this PHP Notice after the update –

Deprecated: astra_google_fonts_json_file is deprecated since version 2.5.0! Use instead. `astra_google_fonts_php_file`.

If you need to switch their Google Fonts file from JSON to PHP you can simply do it using this new filter –

add_filter('astra_google_fonts_php_file', 'asrta_add_new_google_php_file');

function asrta_add_new_google_php_file() {
return get_stylesheet_directory() . '/google-new-fonts.php';
}

And here』s the link to the demo fonts file and the array how you should add and insert new Google fonts. You can modify the file path in the above filter based on the file name – google-new-fonts.php.

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

Change the 「Shopping Cart」 Text for WooCommerce & EDD Mobile Header Cart

If you have the WooCommerce or EDD cart added to your websites』 mobile header, you might want to modify the cart title. Since Astra Theme version 3.5.0, this can easily be done.

With Astra Theme versions 3.5.0 and above you can change the default 「Shopping Cart」 text to anything you need to. 

To do this, you would need to add a filter to the functions.php file in your Astra Child Theme. Please add the following code:

add_filter( 'astra_header_cart_flyout_shopping_cart_text', function() {
return 'My Shop Flyout Cart';
} );

You can change the title to any text you want – just modify My Shop Flyout Cart text in the code above.

Note:

For additional details on how to add a custom code to the functions.php file please see this article: How to Add Custom PHP Code?

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.

How to Change HTML tag for Site Title and Tagline?

From Astra customizer settings ( Customize > Header > Site Identity > Site Tagline / Site Title ), you can add the Title or a Tagline for your site. A Site Title is the name of your side, and the tagline is a small catchy descriptive line for your site.

By default, the Title has Heading 1 tag

while tagline has paragraph tag

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;
}

Note:

1. Above filter will change tag to tag. You can update it as per your requirement.2. Paste the above code in the child theme』s functions.php file.

This is how your Default tag looks in your code:

And this is the change from

to

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;
}

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?

Custom Layout not Rendering Correctly with Beaver Builder?

This is a rare scenario, and to resolve such an issue try inserting the following filter in the child theme』s functions.php –

add_filter( 'astra_bb_render_content_by_id', '__return_true' );

Refer this doc on How to Add Custom PHP Code?

How to Design Bullets & Lists?

WordPress Block Editor by default provides a simple design for bullets and lists. Below is the screenshot of how you can add a simple code for lists with WordPress Block Editor. We used the 「HTML」 blocks for adding the codes, and the 「Paragraph」 blocks for adding the regular text:

This is a screenshot of how this would look on the frontend:

If you would like to add some style to bullets and lists, you can use the following CSS. Below are the steps that show how to use CSS.

Step 1 – Add the following CSS classes to ol (ordered lists) and ul (unordered list) with the following HTML codes:

Code for ol (ordered lists) – 『ast-content-ol-list』

1. One
2. Two
3. Three
4. Four
5. Five

Code for ul (ordered lists) – 『ast-content-ul-list』

• Red
• Blue
• White
• Yellow
• Green

You can modify the number of list items by removing lines or adding new ones (

ITEM_NAME

).

Step 2 – Now it』s time to style your lists. Navigate to the Customizer and copy the following custom CSS to your website』s 「Additional CSS」.

/* Order list style */ .entry-content ol.ast-content-ol-list {
counter-reset: my-ol-counter;
margin-left:1.4em;
}
.entry-content ol.ast-content-ol-list li {
position: relative;
padding-left: 30px;
list-style: none;
}
.entry-content ol.ast-content-ol-list li:before {
position: absolute;
top:50%;
left: 0;
width: 20px;
height: 20px;
margin-top: -10px;
color: #fff;
text-align:center;
background-color: #0274be;
content: counter(my-ol-counter,decimal);
counter-increment: my-ol-counter;
font-size: 11px;
-webkit-border-radius: 50%;
border-radius: 50%;
}

/* Unordered list style */
.entry-content ul.ast-content-ul-list {
margin-left:1.4em;
}
.entry-content ul.ast-content-ul-list li {
position: relative;
padding-left: 30px;
list-style: none;
}
.entry-content ul.ast-content-ul-list li:after{
position: absolute;
top: -webkit-calc( 50% - -1px);
top: calc( 50% - -1px);
left: 0; width: 20px;
height: 20px;
margin-top: -10px;
padding-top: 2px;
color: #fff;
text-align:center;
background-color: #0274be;
content: "e900";
font-size: 10px;
font-family: 'Astra';
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}

If you』re not sure how to do this, please check this article on adding s custom CSS.

The result of adding the above CSS is the following look of your bullets and lists:

You can modify the color, font, spacing, and size of the elements by modifying the appropriate lines of the CSS code.

How to Display the Post Category as a Related Posts Title?

The Astra Theme comes with the Related Posts feature, which helps you engage your visitors for a longer time. This feature displays posts within the related category, suggesting that your visitors read more content related to their topic of interest. 

Further, you might want to change the Related Posts section title and show the Post Category name instead. You can do this by adding a custom code (filter). 

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

add_filter( 'astra_related_posts_title', 'astra_related_poat_title' );
function astra_related_poat_title() {
return sprintf(
'

',
'h2',// enter your custom string here
esc_html__( get_the_category()[0]->name, 'astra' )
);
}

Once the filter is added, the Related Posts section title will display the category name of the current post:

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 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.