How to add AMP on Blog Listing, Category & Archive Pages

@ashishjangra-1 You will need to use the plugin in transitional or standard mode to allow for all content types and templates. You can view the different mode options from the plugins general settings, along with the supported templates for each.

You can find out more on the different serving strategies here.

Hey @jamesosborne Thanks for your reply. I can’t use transitional or standard cause I have multiple content types and I just want AMP on blog only.

As well as When i use any option from both transitional/standard my main wordpress theme front-end visible broken.

Thanks

@ashishjangra-1 You can use the following filter, just paste it into your active themes functions.php file. This will ensure that AMP will be active only for all posts within the blog category. (Ensure you have the slug set as ‘blog’)

add_filter( 'amp_skip_post', function( $skip, $post ) {
        if ( ! has_category( 'blog', $post ) ) {
                $skip = true;
        }
        return $skip;
}, 10, 2 );

will this work on reading mode??

add_filter( 'amp_skip_post', function( $skip, $post ) {
       
		if(is_home()){
			$skip = false;
		}
        return $skip;
}, 10, 2 );

Added but still not working

will this work on reading mode??

Yes, it will work in reader mode. You need to ensure you have replace the blog reference with the slug of your own blog/blog.

Hey James

Added

add_filter( ‘amp_skip_post’, function( $skip, $post ) {

if(is_home()){
$skip = false;
}
return $skip;
}, 10, 2 );

I want amp on blog home page and categories page

@ashishjangra-1 If you are using amp in reader mode you can only have your homepage as amp if it is set to a single post or page. Reader mode provides support for single pages and posts only. Likewise for blog pages, only the individual posts within the blog can have amp versions, not the actual blog URL (which lists all blog posts)

Transitional mode provides support for more content templates. If your theme does not support transitional or standard mode amp then you would need to work though the issues using the validation tool if you are not happy with the plugin automatically accepting validation errors. Or you can look at some of the listed compatible themes here.

Hi James,

Thank you for your response, I have gone through the Documentation again, and i understood that if I want AMP on archive page then I must have to use Transitional mode. I have enable it and added code to my function.php inside main theme

add_theme_support(
			'amp',
			array(
				// Works in Standard and Transitional modes.
				'paired' => true,
				'template_dir' => 'amp',
			)
		);

As I want to have different view for amp and non-amp version so i have to create custom theme for it. So I have used template_dir attribute inside array.

After using this I realize two error

1. Default theme of AMP (/wp-content/plugins/amp/templates) in reader mode is not compatible with transitional mode. In this theme $this is used to initialize the function which is not working.

2. In transitional mode url struction is ?amp which i think We can rewrite using htacess rewrite to make easy like myurl/amp/

I would appreciate if you could help me these two last queries.

Thanks

Hi James,

I have understood how it is working and how to create custom template. So Please ignore above reply.

Only query is When I have Selected Specific Content type “Post” and below that I have selected singular >> Homepage, Blog , Archive then why AMP version on Blog home not working. It is working on All Category, Author, date archive.

Please advise!!

Thank you for you support so far.

Thanks

Hi Ashish,

I suspect your ‘Blog home’ is a page and not a post? Can you confirm this to be the case? If it is a page can you convert it to a post or a category landing page?

Craig

Hey @craigstanfield Its a blog page, In Backend under blog page setting this blog page is selected as well as page is calling from theme index file.

Fixed above one, by hooks

One another error CSS didn’t combine
“The following stylesheets are too large to be included in style[amp-custom]:”

Please suggest as this is the main css.

The error is likely as a result of a combination of plugins in use, all adding to the CSS size, even after treeshaking is applied. You can try and disable some plugins to check, in total the CSS should total under 50KB’s.

Hi James,

I have figure it out, actually our blog is a page and then assigned to post page. On Pages I have enabled Visual composer so there is a default CSS file for visual composer which is already slightly bigger in size. Cause our themes css file is already adding on blog single pages cause Visual composer is not activated on the blog pages.

Please suggest any alternatives. Cause visual composer is the core page builder we can’t disable it.

Thank