Custom template documentation

Have you considered Transitional mode? This allows you to re-use your active theme’s templates in AMP, so you can do things as you do normally in WordPress themes. There is some documentation about that at https://amp-wp.org/documentation/how-the-plugin-works/amp-plugin-serving-strategies/

@westonruter thanks for fast reply.

Yeah, I was trying it, when I was testing different modes. And I saw a page without theme’s CSS, so I just turned “reader mode” back.

But now I tried again and some pages are working quite good and this mode seems cooler!
Now I need to manage this issue with the styles. It’s interesting that there is no any logic in this issue.

Pages that has styles:
– 1 archive (projects) with posts of this type
– 2 pages with custom template
– 1 simple page

Pages has NO styles:
– Home page with custom template
– 2 more archives with posts of this type
– even simple post categories
– and posts!

Maybe you have some suggestions?
Thanks.

Also I see extra code on working pages that moves content down from top for about 10-20px

<amp-img height="1" width="1" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXXXX&ev=PageView&noscript=1" class="amp-wp-enforced-sizes amp-wp-6a19fc1 i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" layout="intrinsic" i-amphtml-layout="intrinsic"><i-amphtml-sizer class="i-amphtml-sizer"><img alt="" role="presentation" aria-hidden="true" class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;1px&quot; width=&quot;1px&quot; xmlns=&quot;https://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>"></i-amphtml-sizer><noscript><img height="1" width="1" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXX&ev=PageView&noscript=1" class="amp-wp-cb45893"></noscript><img decoding="async" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXX&ev=PageView&noscript=1" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>

As I get I also need to turned off “Supported Templates” because it make my website AMP as default? (This will allow all of the URLs on your site to be served as AMP by default.)

Interesting fact about Transitional mode.
I’ve described behavior of pages (without css) on my lacalhost, but on web server (it’s locked with folder password? if it helps) all pages gives blank page.

Maybe better way is to show me how queue script to the reader mode template? ??

Thanks.

@westonruter any ideas?

Sorry, this will probably need to wait until next week for a follow up.

/cc @jamesosborne

@nikitasp Sorry for the delay. To add a script to the Reader mode templates, you can use code like this in your theme’s functions.php:

add_filter(
	'amp_post_template_data',
	function( $data ) {
		$data['amp_component_scripts'] = array_merge(
			$data['amp_component_scripts'],
			array(
				'amp-carousel' => true,
			)
		);
		return $data;
	}
);

This won’t be necessary once this is resolved: https://github.com/ampproject/amp-wp/issues/2202

@westonruter thank you!
I will try this and give a response.
Thanks.

@westonruter thanks, all works, except amp-accordion.

I have FAQ on pages and they wrapped by accordion. So I’ve added it to scripts, but nothing works…

add_filter('amp_post_template_data', function($data){
	$data['amp_component_scripts'] = array_merge(
		$data['amp_component_scripts'],
		array(
			'amp-carousel' => true,
			'amp-accordion' => true,
		)
	);

	return $data;
});

what’s wrong with merge?

Works only:

add_filter('amp_post_template_data', function($data){
	$data['amp_component_scripts'] = array_merge(
		$data['amp_component_scripts'],
		array(
			'amp-carousel' => true,
		)
	);
	
	$data['amp_component_scripts'] = array_merge(
		$data['amp_component_scripts'],
		array(
			'amp-accordion' => true,
		)
	);

	return $data;
});

Thanks.

• This reply was modified 5 years, 2 months ago by Nikita_Sp.

I’m not sure. Those should have the same exact result.

@westonruter please, check that, because it’s not ??
Anyway, seems the topic could be closed as we’ve got all the answers we’re looking for.

Thank you very much for your help!