If you search for fast-loading WordPress themes on Google, you end up with Astra and GeneratePress. The Astra theme with the WP Rocket and Rank Math SEO plugin combinations works great when you want to build an SEO-friendly, fast-loading WordPress blog. This is my personal experience guide about how to install and customize Astra theme in WordPress.
Note: You can't do most of the them customizations if you only have free Astra theme. If you want to use all theme customization features, you need to purchase the Astra Pro plugin.
How to install the Astra Theme
First, purchase the Astra theme if you don’t have one. Then download the theme files. You need both the free Astra theme and Astra Pro add-ons to run a fully functional Astra theme-based blog.
Upload the theme and plugin to your WordPress admin panel. Then open the Astra Pro plugin “Settings” page and activate the license.
In order to test and customize the blog design, your blog must have at least 4 to 5 blog posts.
Note: If you just want to install and test your blog on the localhost server or you have enabled “Discourage search engines from indexing this site” to practice your WordPress blog customization, then create dummy posts and featured images using the WP Dummy Content Generator and Fake Press plugins.
How to customize the Astra Theme
All Astra theme customization done in Appearance- > Customize settings. But in order to use Astra Pro premium features, you have to activate its functionalities one by one in Astra → Dashboard.
First, enable most essential features we need like
- Nav Menu – To add navigation items in header.
- Blog pro – To customize single post featured image and its size, Author info. Layout width, Meta details and spacing.
- Typography – To change the font and its size for Headings (H1 to H6), blog post titles, content and metas.
How to Enable the 3 Column Grid layout
After you enabled the “Blog Pro module”, go to Appearance -> Customize -> Blog -> Blog / Archive.
Scroll down the page and find “Grid Layout” section.
In Grid layout section, select 3 Columns.
Then click the “Publish” button to activate the changes.
In order to get good appearance (Just thumbnail with Post title in Grid layout)you have to enable the following options in Blog/Archive settings.
- Add Space Between Posts
- Remove Featured Image Padding
In Meta section disable all options like “Comments”, “Author”, “Date”.
In “Post Content” section, set the Except Count to “0” and remove the “Read More Text” in the text box.
Also add the following code to the Astra theme function.php file (Appearance -> Theme File Editor) to remove the Read More text and three dots …
To remove Read More
// Remove "read more" globally
function wp_remove_read_masshelp () {return __ ('', 'astra'); } add_filter ('astra_post_read_more', 'help wp_remove_read_mas');To remove …
function new_excerpt_more($more) { global $post; remove_filter('excerpt_more', 'new_excerpt_more'); return ''; } add_filter('excerpt_more','new_excerpt_more',11);If you can't remove the three dots (…) using the short code, go to Appearance -> Customize -> Additional CSS and add the following CSS code. Then click the Publish button to add the changes.
.blog .entry-content.clear p{
display: none;
}Create Astra Child theme to avoid Theme changes
When you update your Astra theme, the all modification you made on CSS and function.php file will gone. So create a child theme and add your changes in that child theme.
Go to Astra child theme page generate and create a child theme.
Then upload the child theme to your WordPress blog and activate it.
Add every CSS and function.php file change in the child theme.
How to change the Astra theme header design
In the WordPress dashboard, go to the Appearance → Customize option.
Select “Header Builder”.
In the “Header Builder” Right-side column, you will see the long 3 column drag and drop placeholder. These are called “Above header’, “Primary header” and “Below header”.
In the Primary header menu, click the + icon and add the Site Title & Logo. Then on the right side of the three columns, add the Primary menu and search.
How to Change the Header Background Color, Logo and Menu Color
To change the Header Logo Text color, Go to Customize -> Header Builder. In the Elements tab, choose Site Title& Logo. Choose the Design tab and change the Title color to change the text logo color.
To change the Header background, In the right side of the screen, choose the gear icon in the Primary menu.
In the Design tab, change the background color to change the header BG color.
To change the Menu color, in Header Builder, choose Primary menu. Then select the Design tab.
In Menu Color section, change the Text/Link's Normal color to change the menu text color.
If you want to add an extra information box which contains important text, links under the header,
In the third box, add an HTML block. In the HTML box, add the text and insert the link.
If you want to change the background color of the information box, select the setting icon in the left side of the “Below header”. In the DESIGN section, change the background color.
How to Change the Body Font in Astra Theme
Go to Appearance -> Customize -> Global -> Typography.
In the Base Font section, Change the Body Font to whatever you want.
How to Remove Astra Theme Footer Copyright Information
By default Astra theme added its website link in Footer copyright information. You can change this information in Appearance → customize -> Footer Builder.
In “Footer Builder”, select the “Copyright' element. In the visual Editor, remove the old copyright information and add a new one like this.
Copyright [copyright] [current_year] [site_title]
It will automatically update the copyright information when the year changes and you change the current site title.
How to remove Read More and 3 dots “…” in Home & Category Pages
If you want to remove 3 dots and read more text that is automatically generated in the WordPress post loop and displayed in the home page post list and category page post list, then add the following code to your theme function.php file.
