Free AMP Themes for WordPress and How to setup AMP theme ?

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,

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.

Related :   How to add a website to Google Search Console ?

Login to WordPress Admin panel, and from left sidebar, click “Appearance -> Themes”

amp-theme1.png

From opened, page click on “Add New” and type “Astra” in the search window, which will show theme as below,

amp-theme3.png

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,

amp-theme4.png

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

lynxbee_ezoic

Subscribe with Valid Email Id to receive updates in Inbox. ( Secured by Google FeedBurner )

   


Leave a Comment

Android Android Build system Android Commands Android Java Applications Application Libraries Application Stack / User Interface Bash / Shell Scripts Bluetooth driver Cloud Technologies Commands and Packages Compilation Content Management System Core Kernel C Programs Development & Build Development, Debugging and Performance Tools Development Environment Setup Django & REST Api Errors & Failures Git Hardware Platforms HTML JAVA Programs Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL Multimedia Audio, Video, Images NDK / Middleware / HAL OS Concepts PHP Programming Languages Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Source Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized Web design and development Website Hosting Wordpress Yocto / Bitbake / Openembedded