As we have seen in our another post “How to setup Accelerated Mobile Pages (AMP) for WordPress” we can convert our existing website to make it AMP compatible for faster loading but since our theme was not actually AMP compatible, the performance still varies depending upon the theme. Hence, it is always better to have AMP compatible theme for our wordpress website and then do any further improvements with AMP Plugin if required.
Currently as per amp-wp.org ecosystem website, there are 5 Free themes which are AMP compatible, The links to those themes are as below,
- Astra – This seems to be most downloaded theme https://wordpress.org/themes/astra/
- Neve – https://wordpress.org/themes/neve/
- Twenty Fifteen – https://wordpress.org/themes/twentyfifteen/
- Twenty Sexteen – https://wordpress.org/themes/twentysixteen/
- Twenty Seventeen – https://wordpress.org/themes/twentyseventeen/
- Twenty Nineteen – https://wordpress.org/themes/twentynineteen/
From this all free themes, Astra looks more better and can be customized as we want, Although other “Twenty” named themes are most downloaded since those comes with default wordpress installation.
Below, we will see how to install and configure the Astra Theme which we installed for one of our wordpress based website.
Login to WordPress Admin panel, and from left sidebar, click “Appearance -> Themes”
From opened, page click on “Add New” and type “Astra” in the search window, which will show theme as below,
Click on “Install” and then “Activate” this will install and activate the theme and we can see an added optioned named “Astra Options” below theme in “Appearance” settings as,
Customize the settings to add logo etc.
NOTE: During the installation of this theme, we faced an issue that we were not able to update Logo using settings, hence we changed the following code from wp-content/themes/astra/inc/extras.php as,
// Site Title.
$site_title_markup = apply_filters(
'astra_site_title_output',
sprintf(
'<%1$s class="site-title" itemprop="name">
<a href="%2$s" rel="home" itemprop="url" >
%3$s
</a>
</%1$s>',We changed this to,
// Site Title.
$site_title_markup = apply_filters(
'astra_site_title_output',
sprintf(
'<%1$s class="site-title" itemprop="name">
<a href="https://www.mywebsite.com" rel="home" itemprop="url" >
<img src="https://www.mywebsite/images/logo.png" alt="My website Blog">
</a>
</%1$s>'