Custom AMP Theme
-
Hi, My theme requires the official amp plugin, previously I used functions to exclude the core WordPress scripts etc. But it is far more user-friendly if I rely on the official AMP plugin, so if anybody installs any plugins the AMP plugin will exclude scripts automatically. I know the WordPress Theme repo. documentation says the theme cannot require any plugins.. But would this be an exception since its amp? Any thoughts on this?
Many Thanks,
Roland
-
Hello @rolandfarkas
AMP plugin will remove any custom javascript added by theme or plugin to Create Valid AMP pages.
As per WordPress Theme Guidelines, you can not make a plugin absolute necessity and you theme must work without any plugin dependacies.
But you can recommend a plugin perhaps with an admin notice saying “This theme is known to work best with AMP plugin” I will recommend consulting the WordPress Theme review team for the same.
If your theme doesn’t include any custom javascript then you don’t have to worry about another plugin that adds them. you can simply suggest alternative plugins which are AMP compatible (we have listed them on our site )
I hope you find my reply helpful, I will recommend consulting with the Theme Review Team as they have a better understanding and experience in terms of plugin dependencies.
My theme requires the official amp plugin, previously I used functions to exclude the core WordPress scripts etc.
Can you elaborate? Are you referring to the scripts that your theme is enqueueing? You’re saying that you don’t need to bother with checking whether an AMP page is being served when the AMP plugin is active because the AMP plugin will automatically strip out the scripts? This is true, but it is not the ideal. When you have the AMP plugin’s Developer Tools enabled, it will warn that these scripts were removed, as usually they are being enqueued for a reason and their removal means the user should manually check to see if the functionality is broken. If nothing is broken, the user can mark the validation errors caused by the removed markup as “reviewed”. But the ideal is that the validation error not be caused in the first place.
Therefore, you should always check if an AMP page is being served and conditionally enqueue if it is not an AMP page. For example:
add_action( 'wp_enqueue_scripts', function () { if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) { return; } wp_enqueue_script( 'my-script' ); } );
We require themes to not emit any validation errors to be featured on the AMP Themes ecosystem page.
- This reply was modified 3 years, 9 months ago by Weston Ruter. Reason: Fix logic inversion
Hey @milindmore22,
Thanks for your reply. Okay so the best thing to do if I would like to publish a full amp theme to the theme repo to exclude all WordPress scripts, styles, emojies, manually, so it works without the amp plugin, and then recommend it. It just seemed unnecessarily with this plugin installed, as some of my functions will run and do nothing as this plugin will overwrite everything anyway..
I haven’t actually seen any full amp theme available yet, have you? Do you think there is a reason for this?
Re: Theme Review Team, I wrote to @westonruter on Slack and he asked me to post the question here. So I am patiently waiting for them to get to this post ??
Thanks again!
- This reply was modified 3 years, 9 months ago by Roland.
Okay so the best thing to do if I would like to publish a full amp theme to the theme repo to exclude all WordPress scripts, styles, emojies, manually, so it works without the amp plugin, and then recommend it. It just seemed unnecessarily with this plugin installed, as some of my functions will run and do nothing as this plugin will overwrite everything anyway.
I’m not entirely sure what you mean here. What will be overridden?
Note that even though a site may be using an AMP-compatible theme, there may be pages that they don’t want to be served as AMP. Maybe there is a shopping cart page which they want to disable AMP on, for example. Some sites may only want AMP enabled for the Singular template, and leave AMP off for homepage and archive templates. Other users may want to use Transitional mode to have AMP and non-AMP available for all pages. In these cases, a theme needs to work even when the AMP plugin is not processing the page.
Please note that this is going to be made much easier for you later this year with the arrival of Bento AMP: https://blog.amp.dev/2021/01/28/bento/
You’ll be able to bundle AMP component scripts with your theme, like
amp-sidebar
, and use them on non-AMP pages, even when the AMP plugin is not running. Then we’ll make sure that the AMP plugin respects those scripts and automatically converts them into their CDN equivalents on valid AMP pages, so you won’t have to do anything. Once that happens, the intention is that you’ll be able to write only one version of the interactive features of your theme and have it work in AMP and non-AMP alike.Hey @westonruter,
Thanks for the speedy response to this. My theme is fully amp. I have built a number of sites using only amp, and I really liked everything about it and I am sure our users too. I do not use any custom scripts, all pages are amp and the user don’t have a choice to actually opt out, its fully amp. I first used wp_dequeue_script for the default WordPress scripts, emojies which i mentioned above, but then I have started to test compatibility and kept using the amp plugin to exclude any scripts including the core WordPress scripts. I have also tried to make WooCommerce work this way, and still the amp plugin have to strip out scripts which WooCommerce uses, so ideally I would require the users to use this amp plugin nothing else and they can also use WooCommerce which is a bonus. Now I think I have to use wp_dequeue_script for all the WooCommerce scripts as well. So the theme can be used with or without this plugin, but in the documentation I will mention to use this plugin if they would like to use different plugins and make sure the page stays valid amp. Is there a full amp theme in the WordPress repo? I only found a few amp ready themes, but havent seen any full amp themes yet. Would this be actually possible?
@westonruter re bento, i have seen it I am very happy about it as this might allow us to use amp (like carusel etc) in the Gutenberg editor? Re homepages and WooCommerce, I already thought about them, I have managed to make WooCommerce fully work with my theme, and its all amp. Re homepages, if the whole site skeleton is built on amp, you can just use the Gutenberg editor to build your pages/posts including the home page, so don’t need page builder plugins. Any thoughts on this?
Even though the theme may be fully AMP, there’s no telling what the user may do to add invalid AMP markup to the page. This could either be via a plugin like WooCommerce or via Custom HTML block in which the user puts in custom JS. Therefore, I don’t think a theme should be trying to serve valid AMP on it own, as otherwise it will almost always end up serving invalid AMP. A theme should rather be concerned with only using AMP markup for its own functionality. I don’t believe it is good to prevent a user from opting out of valid AMP since there are going to scenarios where it is needed.
Our themes ecosystem page has a few dozen examples of themes that are fully AMP compatible.
Bento is going to open opportunities for you to use AMP components on non-AMP pages which is what your theme should be aiming for. It’s then the AMP plugin’s responsibility to enforce that the pages are valid if that is what the user desires.
The intention with Bento is to allow the components to be used in Gutenberg, yes. You should be able to use them in your edit functions.
Got ya, I’ll update my code to use bento and the theme will not serve amp on its own so its the users choice to use the amp plugin or not. (I started this pre bento so I was just happy that I can use it in Gutenberg, but now I understand what did you mean by the above, just tested it with twenty twenty one) Thanks for all the help @westonruter this makes complete sense and I hope it helps fellow developers! I am closing this.
Please let us know when your theme is published so we can feature it on the theme ecosystem page!
- The topic ‘Custom AMP Theme’ is closed to new replies.