10 Tips to Customize Astra Theme

Astra is one of the most popular themes available in free WordPress themes repository. There are more than 1 million active installations with almost 5-star rating from 6K+ users. You can easily find this theme under “Popular” category when trying to install a theme from admin panel. If you are using free Astra theme with Pro add-on, here are some tips to customize the theme and take your site to next level.

Customizing Astra Theme

Astra is not a block-based theme and hence you will not be able to use the full site editor (“Appearance > Design”) option. Astra offers most of the customizations through WordPress customizer (“Appearance > Customize” or “Astra > Customize”) section similar to any other standard WordPress themes. However, you may easily get lost with hundreds of available options. In addition, there are also additional plugins and layout changes possible with Astra theme. Here, we will list down top 10 tips to customize Astra theme and take your site to next level.

If you are evaluating GeneratePress and Astra, check out our comparison article on GeneratePress Premium Vs Astra Pro – Which is a best theme for you?

1. Download Pages from Different Starter Templates

You will be knowing that Astra offers Starter Templates as a separate plugin. You can use this plugin to install one of the predefined starter templates instead of creating the site from scratch. However, if you like multiple templates, then it is easy to grab only particular pages from that demo. For example, you can pick up “Contact” page from one demo and “About Us” page from another demo.

• After activating Astra Pro plugin, you will see an admin notification on the plugin and other sections to use starter templates. Click on the “Get Started” button to install the Starter Template plugin. Alternatively, you can search and install the plugin from WordPress plugin repository section.

• When you view the demo templates, you can see two options. You can either import the complete template or import the selected page template. In this way, you can import only the pages you like from different demo templates.

• You will see a prompt informing any additional plugins required for the page will be installed when you import the template.
• Proceeding further will import the page template and you will see a success message like below.

• Similarly, choose different templates from different demos to import them on your site.

Note: We recommend choosing templates for the same page builder like Gutenberg or Elementor. This will help you to avoid installing multiple plugins on your site. All imported page templates will be in draft status, you will have to edit the content and publish those pages.

2. Add Yoast SEO or Rank Math Breadcrumb

In most cases, you will be using Yoast SEO plugin with Astra theme for search engine optimization purposes. One of the hassles with Yoast is that you have to manually edit the theme’s template file (mostly single.php or header.php) to insert breadcrumb trail. However, Astra theme resolves this problem for you by offering breadcrumb option in customizer. Go to “Appearance > Customize” section and select the “Header Position” for your breadcrumb under “Breadcrumb” section. After that click on the “Breadcrumb Source” dropdown and choose “Yoast SEO Breadcrumbs” option.

Similarly, you can choose Rank Math option from the source dropdown if you are using that plugin. This is an easy way to make use of the existing breadcrumb from the plugin without editing theme’s file.

3. Insert Tags at Bottom

The next Astra theme tip is for those who want to change the location of “Tags” display on single blog posts. By default, Astra theme allows you to insert post meta details below the title. You can enable or disable meta details like categories, tags, published date, author and comments (tags need to be selected from “Taxonomies” in the latest version).

Many WordPress bloggers use multiple tags to group relevant posts. In this case, displaying all tags under post title may occupy space and look congested. You can easily move the tags below the content by inserting the below code in your functions.php file. Make sure to use Astra child theme and insert the code in your child theme’s functions.php file. You may need to adjust the display with minor CSS styling.

// removes the tags in meta below the title
add_filter( 'astra_post_tags', 'remove_tags_callback' ); 
function remove_tags_callback(){ return ' '; } 
add_action('wp', 'tags_call_back'); 
function tags_call_back(){ 
if( is_single() )
{ add_action( 'astra_entry_bottom' , 'add_tags_callback'); } 
}
// display the tags with link at the respective action hook function add_tags_callback(){ 
$output = '';
$tags_list = get_the_tag_list( '', __( ', ', 'astra' ) ); 
if ( $tags_list ) { $output .= '' . $tags_list . ''; } 
if( ! empty($tags_list))
{ echo 'Tags: ' . $output . ''; }

If the above code did not work, then there is another easy option using Astra Pro add-on.

• Go to “Astra > Dashboard” and turn on “Site Builder” module.
• Now, go to “Astra > Site Builder” and click “+ Create New” button.
• When you are in Gutenberg editor, provide a title and then insert a “Tags” block in content area.
• Change the “Prefix” to “Tags” or any text that you want to show before the list of tag items.
• Click on the Astra icon on top toolbar to open the sidebar. Select “Hooks” for the layout and “After Entry Content” for placement. If required, add other conditions like visibility and priority.
• Publish or save your content.

Now, open any of your existing post and you should see the tags are listed below the main content area. You can decorate the “Tags” block with background, bold the text and insert an inline image like any other Gutenberg blocks. Also, change the hook’s placement and priority to adjust the position to correct place on your layout.

4. Display Last Updated Date

Astra theme offers an option to show or hide published date on your blog posts and archive pages. However, many bloggers prefer to show the last updated date instead of original published date as a meta data. First, disable the published date option and then insert the below code in your functions.php file to show the last updated date.

function your_prefix_post_date( $output ) {
	$output        = '';
	$format        = apply_filters( 'astra_post_date_format', '' );
	$modified_date = esc_html( get_the_modified_date( $format ) );
	$modified_on   = sprintf(
                         esc_html( '%s' ),
               		 $modified_date
	);
	$output       .= '';
	$output       .= ' ' . $modified_on . '';
	$output       .= '';
	return $output;
}
add_filter( 'astra_post_date', 'your_prefix_post_date' );

The latest theme offers this feature in the customizer. Go to “Appearance > Customize > General” section and click on the “Post Title Area” option. Scroll down to find “Meta” section and enable “Date” option. Click on the “Date” dropdown and select “Last Updated” option. You can also change the date format if required.

5. Custom Sidebar for Categories

By default, WordPress allows you to use a single sidebar throughout your site. However, this may not be sufficient for all site owners. You may have completely different categories and want to showcase different sidebars for each category. Go to “Plugins > Add Plugin” and search for “sidebar manager”. Find Lightweight Sidebar Manager plugin from Brainstorm Force and install / activate it.

Once the plugin is activated, go to “Appearance > Sidebars” section where you can create new sidebars and replace your default sidebar. Click on the “Display On” dropdown and select “Specific Pages / Posts / Taxonomies, etc.” option. Then choose “All singulars from your category” to display the sidebar only for that particular category.

6. Disable Font Icons File Loading

Astra theme uses a font file for loading the navigation icons till version 3.3.0. This file can create problem like preload key requests and cumulative layout shift in Google PageSpeed Insights tool. You can easily disable the font file on your site by adding the below code in your child theme’s functions.php file.

add_filter( 'astra_enable_default_fonts', '__return_false' );

Later theme versions use SVG instead of font icons and hence you do not need the above code. However, if you see SVG is not loading, you can enable by adding the below code in functions.php file.

add_filter( 'astra_is_svg_icons', '__return_true' );

If you want all Google Fonts to load locally from your site, go to “Astra > Dashboard > Settings > Performance” section and turn on “Load Google Fonts Locally” option.

7. WooCommerce Caching

If you are using WooCommerce, in most cases it will not work responsively with Astra theme when using with caching plugins like WP Rocket. This will create problems on mobile devices that the product and shop pages will load similar to desktop (with multiple columns). You can check out our article on how to exclude WooCommerce pages from caching to make sure your shop pages load properly on mobiles.

8. Header and Footer Builder

The latest pro add-on has a beautiful header and footer builder. You can use these options to build your header and footer layouts as per your need. After activating Pro add-on, navigate to “Appearance > Customize” section and start building your header and footer builder sections. Note that the free version of Astra theme also has header and footer builders with limited customizations.

In addition, you can also activate “Page Headers” option under “Appearance > Astra Options” section. This will help you to build individual or site wide page headers under ““Appearance > Astra Options > Page Headers > Add New” section.

9. Use Hooks Plugin to Insert Code

The next Astra theme tip is for those interested in inserting code snippets on your site. Pro theme users can use Custom Layout option to insert Google Analytics and other layout insertion. If you are a free theme user, you need to install Astra Hooks plugins to insert code in header and footer section.

After installing and activating the “Astra Hooks” plugin, it will automatically add addition options in WordPress customizer section under “Hooks” section. You can insert sitewide codes on header, footer, sidebar, comment or content area.

10. Use Custom Layout to Insert Sections

Pro users can use custom layout feature to insert HTML and script content anywhere on the site without Astra Hooks plugin. After activating “Site Builder” option, you can create layout sections and insert them based on rules. For example, you can insert Google Analytics code using wp_head hook. Make sure to click on the “WordPress Code Editor” button on the top admin bar when inserting codes. This will help you to use proper single and double quotes in your code.

In addition, you can insert custom sections on any post or page with after certain number of blocks or before certain number of heading blocks. This is useful to insert advertisement or affiliate banners at predefined position on your site’s layout (as explained above for inserting tags).

You can also use the Spectra page builder to create stunning pages using prebuilt blocks for Gutenberg editor.

Final Words

The beauty of Astra theme is that it adds less than 50KB size when loading on the browser. However, it does not mean you need to live with simple minimalistic WordPress site. You can use hooks or custom layouts and import starter templates to build beautiful sites like any other commercial WordPress themes.