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

Dim Content on Menu Hover

Liked how the menu is styled on hover in the above GIF? You can add a similar dim effect to the content on the menu hover with the following CSS. With this, visitors will have an increased focus on the navigation menu and it』s better for conversion.

/* Dim content on menu hover */
#masthead:hover~#content {
opacity: 0.1;
transition: all 0.5s linear 0.1s;
}

#content {
transition: all 0.5s linear 0.1s;
}

Above CSS can be added to the customizer under Additional CSS tab or in the child theme』s style.css file.

How to Fix Font-Weight Not Applying To Widget Titles?

Previously, font-weight for widgets (all sidebar, footer, header) titles was applied only as 「normal」 no matter the weight set for the headings, even though this is a heading pattern.

With Astra Theme update 3.6.0, this issue was fixed, and now the heading settings are being appropriately applied to widget titles too.

If this improvement is not applied automatically to your website, this document will help you fix this.

Why Do I Need This Improvement?

So far, if you wanted to set your widget titles weight, you needed to add some custom CSS for this. 

Now this can be done from Customizer (Global Settings > Typography > Headings) by setting the weight for the appropriate heading type with these improvements. 

How To Fix This?

For all new websites, these changes will be applied automatically. 

For the old users, this improvement needs to be activated by adding a filter. This was done to avoid any potential issues with existing websites, which could have appeared in some cases if these improvements would have been applied automatically. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don』t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_heading_fonts_typo_support', '__return_true' );

If you are not sure how to add this code, please check this article.

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.

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

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

How to Add Custom CSS Code Without Editing Theme Files?

Sometimes you may find yourself needing to add Custom CSS in your WordPress site. There are easier ways to add CSS on your site. In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files.

In Customizer

Since WordPress 4.7, users can now add custom CSS directly inside the Customizer which you can find in Customize → Additional CSS. This is super-easy and you would be able to see your changes with a live preview instantly.

It should be noted that the CSS added in this area is theme-specific, so if you switch themes, you』ll lose your CSS.

Using external plugin

Use the external plugin like Simple Custom CSS to add custom CSS.

Using a Child Theme

If you』re already using a child theme, you can use the style.css file to add your custom CSS. Read How to edit style.css in the child theme?

How To Apply New Default Button Padding Values?

Astra Theme version 3.6.3 brought changes to default padding values for buttons to improve the default UI. Furthermore, this update came with the fix for Global padding settings not being applied to Gutenberg buttons. 

Why Do I Need This Improvement?

Previously, the theme default button padding values were 10px on top and bottom and 40px on the left and right sides. These settings negatively influenced the visual appeal of the buttons as they made buttons too wide.

That』s why we updated these values to 15-30px (top, bottom – right, left).

Also, if you used Gutenberg for your posts or pages, you might have noticed that the button padding values you set at Customizer > Global > Buttons didn』t apply and that you needed to set these values manually for each button.

Though these things were changed with Astra 3.6.3 update, this won』t be applied automatically to your website to avoid any adverse effects on your existing websites.

How To Fix This?

For all new websites, these changes will be applied automatically. 

As mentioned, for the existing website, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don』t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_update_button_padding_defaults', '__return_true' );

If you are not sure how to add this code, please check this article.

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.