Astra is one of the most popular themes available in free WordPress theme repository. There are more than 1 million active installation with almost 5 star rating from 5K+ 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.
10 Tips to Customize Astra Theme
Astra offers most of the customizations through “Appearance > 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.
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 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 templates. 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 templates 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 on your site.
Note: We recommend you to choose 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 have to edit the content and publish the 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 manually edit the theme’s template file (mostly single.php or header.php) to insert breadcrumb trail. However, Astra theme resolve this problem for you by offering this option in customizer. Go to “Appearance > Customize” section and select the position for your breadcrumb under “Breadcrumb” section. Click on the “Breadcrumb Source” dropdown and choose “Yoast SEO Breadcrumbs” option.
Similarly, you can also choose Rank Math plugin’s breadcrumb 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.
Related: GeneratePress premium Vs Astra Pro – Which is a best theme for you?
3. Insert Tags at Bottom
The next Astra theme tips is for those want to change the location of tag 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.
Many WordPress bloggers use multiple tags to group the 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.
// 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 . ''; }
}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 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' );
5. Custom Sidebar for Categories
By default, WordPress allows you to use a single sidebar throughout your site. however, this may not be the use case for all site owners. You may have completely different categories and want to showcase different sidebars for each category. Go to “Appearance > Astra Options” section and scroll down to “Extend Astra with free plugins” section.
Click on the “Activate” link against “Sidebar Manager”. This will install and activate the plugin on your site and navigate to “Settings” page of the plugin. Here you can create new sidebar 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 using on the navigation icons. 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' );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. 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 addon 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 addon, navigate to “Appearance > Customize” section and start building your header and footer builder sections.
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 tips is for those interested in inserting code snippets on their site. Pro theme users can use Custom Layout option to insert Google Analytics and other layout insertion. If you are a free theme users, 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.
Related: Top 7 WordPress portfolio themes.
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 “Custom Layouts” option, you can create layout section and insert based on rules. You can insert Google Analytics code using wp_head action. 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.
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.
2 Comments
Leave your reply.