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.

Change Sidebar Widget Title Heading Tag

When you add a widget in the sidebar, 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 code in the child theme』s functions.php file. 

add_filter( 'astra_widgets_init', 'widget_title_tag', 10, 1 );

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

';
$atts['after_title'] = '

';

return $atts;
}

In the above code H2 heading tag is changed to H4. You can enter the required heading tag as per your requirement.

Disable Featured Image on Posts, Pages, or Other Post Types

Featured images are an important feature for every post, page, or any other post type you have on your website. At the same time, when you add a featured image to your post or page, it will appear on top of your content.If you want to disable featured images from appearing on your posts, pages, or any other post type, you can add the following custom code to the functions.php file of your Child Theme:

/**
* Disable Featured image on all post types.
*/
function your_prefix_featured_image() {
$post_types = array('page','post');

// bail early if the current post type if not the one we want to customize.
if ( ! in_array( get_post_type(), $post_types ) ) {
return;
}

// Disable featured image.
add_filter( 'astra_featured_image_enabled', '__return_false' );
}

add_action( 'wp', 'your_prefix_featured_image' );

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.

This code will remove featured images on all of your pages and posts. You can apply this code only to pages, posts, any of your other post types, or all of them by modifying the bolded part of the code above. Here are the examples how this should look like:

To remove featured image on all your posts only:

$post_types = array('post');

To remove featured image on all your pages only:

$post_types = array('page');

To remove featured image on all pages, posts and example custom post type. This is the example which you can use to add any other post types you want the above code to be applied:

$post_types = array('page','post','custom-type-1');

Related Article: How to add PHP Snippets

How to Disable the Loading of Astra』s Default Font File? (Astra.woff)

Note:

Since version 3.3, Astra theme default font icons have been replaced by SVG icons. When SVG support is enabled, the astra.woff file is not loaded anymore by default. You can find out more information details in this article.Thus, adding the filter mentioned in this document is no longer needed unless you decide to disable the SVG support.

Astra by default loads a very tiny font icon library from an Astra.woff file. You can see a list of font icons here.

Here is a filter which can be used to disable loading this font – `astra_enable_default_fonts` You can add this filter in the child theme』s functions.php file as shown below. Just copy the following code and paste into the functions.php file.

Example usage –

add_filter( 'astra_enable_default_fonts', '__return_false' );

Read more about adding custom PHP code here.In case you need help with installing a child theme, refer to a link here.

How to Add Custom PHP Code?

In many cases, you will need to add custom PHP code in the theme. In this article, let us explain some ways how you can do so:

1. Custom Layouts module in Astra Pro (Easiest)

Astra Pro Addon is a premium plugin that extends features of Astra theme. If you have purchased Astra Pro Addon, use the Custom Layouts module to add custom PHP code. Below are the steps that show how to add code –

Activate the Custom Layouts module from Astra Pro.Insert the code in the Code Editor.Select Hooks layout and choose the appropriate action / wp_head action.Choose to display it on the Entire WebsitePublish the layout.

Here is an example that shows how to add Google Analytics code. Similarly, you can add any custom code.

2. With Third-Party Plugin

There are free plugins available on WordPress Repository that you can use to add custom PHP code. Below are two of them:

Code SnippetsMy Custom Functions

3. In Child Theme

You can add a filter or custom PHP code through the WordPress Dashboard, follow the steps on how you can do the same –

Step 1: Install and Activate the Astra Child Theme from the WordPress Dashboard > Appearance > Themes > Astra Child Theme.

Step 2: Open the Theme Editor under the Appearance. Not seeing Theme Editor, troubleshoot the same.

Step 3: Navigate to the child theme』s functions.php, from the right-hand section and select functions.php.

Step 4: Add your code at the bottom of the file and click on Update File at the bottom.

Note: If you have the Parent theme active and visit the Theme Editor, you will see the following message, which informs you about how directly editing your theme could crash your website. Click on 「I understand」. 

Or if you have access to cPanel of your website, you can use FTP software like FileZilla. Below are the steps that explain how to do so –

Step 1: Install and activate the Astra Child Theme from the WordPress Dashboard.

Step 2: Open your WordPress site via FTP. We would recommend you to use FileZilla.

Step 3: Navigate to wp-content > themes > astra-child

Step 4: Right-click functions.php and select View/Edit

Step 5: Add your code at the bottom of the file and save it.

How to Self-Host Google Fonts in Astra?

Astra theme introduces a new feature called Self-Hosted Google Fonts available with the free theme version 3.6.0. This feature brings CLS and performance improvements by loading and saving the Google Fonts locally in the 「woff2」 format. You can navigate to Customizer > Performance and enable the 「Load Google Fonts Locally」 option to use the feature. Learn more about Self-Hosted Google Fonts in our Blog article.

Though the feature brings great improvements, you might need to make some modifications in specific situations, where you need to use different font file formats or in case you use Astra』s white-labeling feature.

This document will show you how to do these modifications easily.

How To Modify the Feature

One of the cases where you will need to modify the 「Self-Hosted Google Fonts」 feature is when the 「woff2」 font file format doesn』t suit your needs the best. For this reason, we added a filter to change the format of the font files, which will be locally saved. 

Also, this new feature creates a new local fonts folder and local fonts CSS file. Both have the Astra markings in their names which can be changed if you use the white-labeling feature. You can add a filter to remove Astra markings and assign the names as needed.

By using these filters, you will be able to make the mentioned changes on your website related to this feature while still benefiting from all the improvements it brings.

Before we move to the filters, it』s important to mention that it is advisable to have a Child Theme installed when adding any custom code to your website. If you need more details using a Child Theme check out this article. Also, we suggest you try doing this using a Staging environment and not your live (production) website directly.

How to Load Font File Formats Other Than 「woff2」?

Though the 「woff2」 comes with its advantages, it might not be a perfect fit for every website. 

The 「woff2」 format will work with around 96% of the currently used browsers. However, some browsers like Internet Explorer and Opera Mini do not support it. The solution for this is to load different font file formats.

In this case, you would just need to change the font file format to 「woff」, which is a supported format with these browsers. 

To change the font file format to 「woff」, please add the following filter to the functions.php file of your Child Theme:

// Load font formats other than "woff2"

add_filter( 'astra_local_google_fonts_format', 'update_astra_local_fonts_format' );
function update_astra_local_fonts_format( $font_format ) {
$font_format = 'woff'; // This will change format to "woff" - you can also use other format
return $font_format;
}

You can change the font file format to any other too using the same filter – just replace the 「woff」 with another format in this line of the filter code:

$font_format = 'woff'; // This will change format to "woff"

How to White-Label This Feature?

As mentioned, the 「Self-Hosted Google Fonts」 feature will create the font folder and local fonts CSS file, containing the traces of Astra affiliation in their names. If your clients inspect the website code or the website folders, they will be able to see the mentioned Astra markings (and not your own brand). 

If you wish to change the names of the font folder and/or local fonts CSS file, you can do this by adding the following two filters to the functions.php file of your Child Theme:

To rename the font folder name use this code:

// Update 'astra-local-fonts' directory name where font CSS will be located.

add_filter( 'astra_local_fonts_directory_name', 'update_astra_local_fonts_file_directory_name' );
function update_astra_local_fonts_file_directory_name( $folder_name ) {
$folder_name = 'mysite'; // So finally your local font directory name will be 'mysite'.
return $folder_name;
}

To rename the local fonts CSS file name use this code:

// Update 'astra-local-fonts.css' file name.

add_filter( 'astra_local_font_file_name', 'update_astra_local_fonts_file_name' );
function update_astra_local_fonts_file_name( $file_name ) {
$file_name = 'mysite-font'; // So finally your local font file name will be 'mysite-font.css'.
return $file_name;
}

Once you added the codes, please navigate to Customizer > Performance and flush the local fonts cache by clicking on the 「Flush Local Font Files」 button. This will make the effects of the above-mentioned codes immediately visible.

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

Change Placeholder for Search Box (Old Astra Header)

Using the Astra Theme with old header options (Header Footer Builder is available since Astra theme version 3.0) and Astra Pro Addon, you can add a search box to your Primary Menu. The placeholder that is used here is 「Search」 by default.

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

' . _x( 'Search for:', 'label', 'astra' ) . '

';

// 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:

...

...

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.

Change the String 「Search Results For」

When you execute a search within a website using Astra』s search option, you can see a similar layout as below. In case you wish to alter the default string – 」 Search Results For 「, use the code mentioned below.

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' ), '' . get_search_query() . '' );
}