Is Amp plugin is fully compatible with twenty fourteen theme

Yes, all templates in Twenty Fourteen are AMP-compatible and can be used in Standard/Transitional modes.

https://www.creativesystems.com/quote-request-images/non-amp.PNG
please see this link. I have activate amp on local server. My site is broken. also home page is not in showing as amp. Please guide me how to resolve this.

one more thing is this amp only for mobile layout or desktop layout?

AMP is for both mobile and desktop. The AMP plugin takes the active theme’s templates and stylesheets and serves them as AMP. So if you are using a responsive theme, you’ll get AMP pages for both desktop and mobile.

As for your broken template, are you able to validate the URL via the AMP menu in the admin bar? Does it have errors regarding excessive CSS? It seems that the styles are not getting loaded on your environment.

The theme loads properly for me in the latest version of the AMP plugin (v1.4.0).

Check Site Health in the WordPress admin as well, as there may be a server misconfiguration.

There may alternatively be a plugin conflict, so share your active plugins as well.

Hi, I have activated the transitional mode of amp. There are 46 AMP Validation Error Index are showing in amp admin bar. There is only one AMP Validated URLs in admin bar which is “https://localhost/creative-systems/dog-park/”.

This is site health image link.
https://www.creativesystems.com/quote-request-images/site-health.PNG

I have implemented custom js as well on whole site. Because on whole site I have implemented custom js for animations or many other things. and the main thing is that this site is developed so how can i handle the current amp plugin with whole site that is breaking my side so please tell me what is the solution for these pages?

Please also tell me that
1)amp is only for static or content pages not for dynamic pages?
2) Can it be the possibility that only blog or single post page should be in amp?
3) Or blog page for desktop remain non-amp that is currently available and for mobile amp version should be shown.
4) How amp plugin will handle that for desktop non-amp version will show and for mobile amp version will show?
5) For amp version should i need to create separate static page and write all html and inline css as well?

6) Currently i don,t understand how amp plugin will handle with wordpress developed website. Because I have seen amp html guide in which amp tags are different and there is inline css. not external stylesheet. So how this can handle with developed site? Is there any settings for amp version in admin from where it is handling the amp version for developed website. There is a lot of confussion.

7) Is There any live demo of wordpress developed website in which non-amp version is for desktop and amp version for mobile version.

8) One more thing Can it be possible that I have made a static amp hmtl page and develop it in wordpress?

please tell me about all these questions one by one so that confusion will remove? currently client is saying to make blog in amp. I am sharing the link of blog which needs to be in amp so that it will easy for you to understand. This is the link of blog
https://www.creativesystems.com/category/creativesystem-blog/.

Please tell me about all questions?

• This reply was modified 5 years ago by adil1641.
• This reply was modified 5 years ago by adil1641.

@adil1641 Thanks for the additional info. To share your Site Health information see this image, we would require the full details.

Custom JS is restricted in AMP, it seems your site uses it for various purposes. You can checkout the amp-script component for more information, just be mindful of the restrictions.

That’s a lot of questions to answer, but no problem, here goes!
1)amp is only for static or content pages not for dynamic pages? AMP works best for pages with static content. You can use amp-state and amp-bind for toggling HTML classes, but custom JavaScript on the front end of your website is restricted.
2) Can it be the possibility that only blog or single post page should be in amp? There are options to serve AMP based on content types and templates from within the AMP plugin settings. You can also add your own functions for more control.
3) Our blog page for desktop remain non-amp that is currently available and for mobile amp version should be shown. AMP works for both mobile and desktop by default. If you are looking to serve AMP always for mobile visitors then it’s possible by a custom function or a plugin extension.
4) How amp plugin will handle that for desktop non-amp version will show and for mobile amp version will show? For visitors who arrive by organic search on mobile they may land on your AMP pages, search engines can check if there is an AMP version available and serve the AMP version where possible.
5) For amp version should i need to create separate static page and write all html and inline css as well? The plugin does all that hard work for you, inlining all CSS and converting HTML into AMP HTML.
6) Currently i don,t understand how amp plugin will handle with wordpress developed website. Because I have seen amp html guide in which amp tags are different and there is inline css. not external stylesheet. So how this can handle with developed site? Is there any settings for amp version in admin from where it is handling the amp version for developed website. There is a lot of confusion. I would recommend testing the plugin, and seeing how it operates on a smaller website. The plugin will add all the CSS styling to your AMP URLs and convert all tags to AMP tags. It also informs you via the validation tool if there are any non compatible elements, allowing you to “Accept” the plugins removal of this element to ensure AMP validation or to “Reject” this validation error, as you need this feature/element on your site.
7) Is There any live demo of wordpress developed website in which non-amp version is for desktop and amp version for mobile version. When you are using AMP in transitional or reader mode you have an AMP version of your website running alongside a non AMP version. Your non AMP version is not impacted. Many websites or news publishers do redirect visitors to their AMP version on mobile. I would recommend using the AMP validator Chrome extension to check websites and their AMP versions yourself.
8) One more thing Can it be possible that I have made a static amp hmtl page and develop it in wordpress? You can use a static site generator for your WordPress site, although some features may be unpredictable in AMP. You can also use the AMP boilerplate generator.

As mentioned I would suggest playing around with the AMP plugin on a smaller website. The plugin does most of the hard work for you.

Hi, I have activated the transitional mode of amp. And in the amp version for blog page. The mobile menu is not working because it is custom js menu. Please tell me where are the settings for amp version mobile menu or content settings or image settings in amp plugin.
Please tell me about this

@adil1641 I am unable to see any AMP URLs when I check your site.

In relation to the custom JS menu you have a few options:
1. You can use the native menu system that comes with the theme
2. You can follow this guide and make use of amp-bind and amp-state to toggle CSS classes
3. You can implement the amp-sidebar component into your side

If the menu system you are using is a third party plugin you can also reach out to the developer.

Hi @jamesosborne, This is the live link of website
https://creativesystems.0438cfd.netsolhost.com/category/creativesystem-blog/?amp
Please see this mobile menu is not working finely in amp version.

I did not understand from where I can implement amp sidebar for amp version. and from where i can make use of amp-bind and amp-state.

Please also tell me about amp version settings in which i can set the content and styling the content. Is there any settings for amp versions in wp-admin or not?

Please help me in resolving this issue. Client needs to make website in amp on urgent basis.

Please guide me in resolving this isssue. If you need credentials for this, then please send me your email, i will send you.

These are the links
https://www.creativesystems.com/shop/u2-gh2007/
https://www.creativesystems.com/product-category/play-systems/green-house/

Amp version is not available for product listings and product detail page. currently it is showing for category listings on this link
https://creativesystems.0438cfd.netsolhost.com/outdoor-playground-equipment/?amp

please guide me in helping these issues

@adil1641 As you can image we are not in a position to login to others sites, and the request is also outside the bounds of plugin support. You can use the plugins website alongside amp.dev to learn how to get a working navigation menu.

If your theme has been modified and features significant custom JavaScript you can always implement amp in reader mode, and use an extension such as this to implement a navigation menu.

@jamesosborne ,

1)My question is that i will put this code in which file so that menu will work or non-amp version will also not disturbed by adding this code.
Earlier you said that this plugin does all that hard work for you, inlining all CSS and converting HTML into AMP HTML.
so please tell me which code i need to add in which file so that menu will work perfectly.
please tell me about this.

2)One more thing should i need a separate mobile menu for amp version or replace the current mobile menu with amp menu?
please tell me about this thing because currently I have custom html menu. This menu is separate from desktop version.

3)Please also signup in the newslettler in the footer, after that the success message appears from where I can change that. please tell me about this
https://creativesystems.0438cfd.netsolhost.com/category/creativesystem-blog/?amp

4)Should I only need to replace it with amp menu with inline css on header.php file that is described on “Amp dev” website. Please tell me so that confusion will remove.

5)one more thing is there any method that “?amp” will not show in the permalink for mobile versions

please tell me about all these questions as well

• This reply was modified 5 years ago by adil1641.
• This reply was modified 5 years ago by adil1641.
• This reply was modified 5 years ago by adil1641.
• This reply was modified 5 years ago by adil1641.

Hi @jamesosborne , you did not reply to these questions? Please tell me so that I will resolve these issues.

Hi @jamesosborne , you did not reply to these questions?

Hi @adil1641 You don’t need to use a separate AMP navigation menu in AMP. If the amp-sidebar component is working for you then you can keep using that as an alternative. I’ve provided links to documentation on menu options, such as the plugins website, with information on toggling hamburger menus.

If you are using Contact Form 7 for your mailing list you can try this plugin extension, Contact Form 7 doesn’t do a URL redirect by default, which is why you are seeing that notice.

The /?amp reference which is used in transitional mode is used to differentiate your AMP URLs from your non AMP URLs. You would need to move to native mode AMP to remove any AMP reference.

There are multiple support topics in this thread. If you are having any additional issues please open a new support topic.

1)I am using newsletter plugin, when i subscribed then success messgae appears, and there is one help link as well that redirects to amp site. Thats why i am asking about to edit that message that is coming from amp site.

2) One more thing, Please see this link. I have applied amp menu on this
https://creativesystems.0438cfd.netsolhost.com/category/creativesystem-blog/?amp

3) Can i make home page on amp as well? This is the link of home page
https://creativesystems.0438cfd.netsolhost.com/?amp

Please guide me about this so that i will resolve the issue

Hi @adil1641,

1.) The AMP form component allows you to define the success and error message through markup. If you don’t define them, a standard message is produced instead.

See [AMP Form example] for an example of how to define the markup of the success and error messages.

2.) The menu seems to be broken because of CSS that is not adapted to the new structure and its declarative nature. You’ll have to modify the CSS, maybe even provide AMP-specific CSS that overrides the default one.

3.) Yes, that already works out of the box as well. However, on that particular site, there is so much going on that you hit the CSS size limit of 50KB. You can see the CSS size distribution if you use “View page source” on the page. The beginning of the markup will contain a big comment with the CSS size distribution. You’ll see that the main stylesheet does not fit into the 50KB size limit anymore, and that is why the page looks so broken.