Native AMP Support – Astra https://wpastra.com Fast, Lightweight & Customizable WordPress Theme for Any Website Tue, 22 Feb 2022 18:15:16 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.3 https://wpastra.com/wp-content/uploads/2020/01/favicon-astra2x.png Native AMP Support – Astra https://wpastra.com 32 32 Disable Astra’s Native AMP Functionality https://wpastra.com/docs/disable-astra-amp-support/ Wed, 06 Mar 2019 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=30747 If you want to disable Astra’s integration for AMP, use custom code snippet mentioned below.

Add mentioned filter into child theme’s functions.php file.

// Disable Astra Theme's Native AMP support.
add_filter( 'astra_amp_support', '__return_false' );

Read more about Astra’s AMP integration and other related docs –

]]>
Configure AMP Plugin https://wpastra.com/docs/configure-amp-plugin/ Tue, 05 Mar 2019 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=30651 Configure AMP Plugin Read More »

]]>
AMP plugin needs to be installed in order to enable AMP for your web pages. Read about Astra-AMP Integration. After installing the plugin we recommend you follow the AMP’s Wizard to configure AMP.

Or you can choose from the below settings and that would be all –

From WordPress dashboard navigate to AMP > Settings. Below are the global settings that are recommended with the Astra theme –

  • Template Mode – Transitional: Enable this option. It will create a non-AMP and AMP versions of your content.
  • Advanced Settings – Supported Templates: Disable the first option ( Serve all templates as AMP ) so it will give you a particular post type choice. Select post types where you wish to have AMP.
AMP Settings Page

Apart from the above global settings, you can enable/disable AMP on particular pages/posts.

  • Edit the page.
  • In the right sidebar, you can see a toggle button to enable/disable AMP.
  • If page builder is used to designing a page or post, it is recommended to turn off the AMP.
Enable AMP
]]>
https://player.vimeo.com/video/500774774 Everything You Need to Know about the Native AMP Support in Astra nonadult
Astra Options that won’t work with AMP https://wpastra.com/docs/astra-options-that-wont-work-with-amp/ Tue, 05 Mar 2019 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=30662 Astra Options that won’t work with AMP Read More »

]]>
As we know AMP does not allow JS to render on mobile devices. It also restricts the CSS size to 50 KB. Some advanced options from Astra theme and Astra Pro needs JS and extra CSS to work. With the restriction of JS and CSS, some Astra options will not work when AMP is enabled.

Though some Astra options will not work on AMP pages, switching to AMP with these options will not break anything on your website. These features will be replaced by alternative options from the Astra itself.

Below is the list for the Astra Pro addons that will not work with AMP –

  • Above and Below Header – If above/below header is designed with Astra Pro’s Header Sections addon then it will not appear on AMP pages.
  • Sticky Header – Header designed with Astra Pro’s Sticky Header addon will not work on AMP pages as it needs JS to work.
  • Scroll To Top – If you have enabled Astra Pro’s Scroll To Top addon, it will not display on AMP pages.
  • Mega Menu – The feature offered by Astra Pro’s Nav Menu addon will not work on AMP pages. All menu items will display as a normal drop-down. Template added from the page builder will not display, instead of the template a menu item text will display.
  • Custom Layouts – Layouts designed with page builder in Custom Layouts addon will display without any style. If page builder used is not supported by AMP then only content from the layout will display and AMP will skip the style. So it is recommended to disable custom layout on AMP. You can find a setting on individual Custom Layout (Screenshot).

Apart from the above, some options from other Astra Pro addons will not work. They are as follows –

  • Search Style – Advanced search styles like Full-screen, Header cover search, the Search box will not work on AMP pages. Only slide
  • Menu Style for Mobile Header – Astra Pro’s Mobile Header addon provide options for Menu Style – Flyout, Full-Screen, No Toggle style. These styles will not work on AMP pages. Instead of these styles, a simple drop-down menu will display.
  • Toggle Button Style and color – For Mobile header, Toggle Button styles like outline, minimal and Toggle Button Color will not work. Instead of this a default Fill style will be applied with theme base color.
  • Infinite Scroll on blog/archive page – Astra Pro’s Blog pro addon offers pagination option. If you select Infinite Scroll for blog/archive page, it will not work on AMP pages as it needs JS. Instead of the infinite scroll, pagination will be replaced with numbers.
]]>
Native AMP Support in Astra https://wpastra.com/docs/astra-native-amp-support/ Tue, 08 Jan 2019 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=30074 Native AMP Support in Astra Read More »

]]>
Astra integrates beautifully with AMP (Accelerated Mobile Pages). AMP allows loading web pages faster on mobile devices than their usual speed. This document will help to understand AMP in detail and how Astra works with AMP. Let’s take a look! 

What is AMP (Accelerated Mobile Pages)?

AMP gives faster page loading experience on the mobile web. Your website pages will load on mobile devices without delay. AMP allows restricted HTML and JS to render on mobile devices and so the speed of the pages will be increased.

AMP is an open-source project for the betterment of future web on mobile devices. It is an initiative by Google. It is recommended to use AMP pages as most of your website viewers will be using smaller devices.

What is mean by Native AMP Support in Astra?

As mentioned earlier AMP restricts HTML, CSS, and JS to load on mobile devices. It does not allow more than 50KB CSS to load on mobile. Because of this, you can not see the exact Non-AMP pages design on AMP pages.

Astra’s native AMP support takes care of allowed CSS size and manages the design of the mobile pages accordingly. Astra tries to retain the original design of the pages in AMP mode. So that your AMP pages look much similar to Non-AMP/ original design.

How AMP can be enabled on the website?

To start using AMP, you need to enable it on the site with a plugin. Install the following plugin on your website just like any other WordPress plugin.

AMP: This plugin is freely available on WordPress.org

Read how the AMP plugin can be configured with recommended settings.

Important Note: Due to JS and CSS restrictions by AMP some of the Astra theme and Astra Pro settings will not work. Here is the complete list for the options that won’t work with AMP.

]]>