[Resolved] Enable AMP With Generate Press

[Ryan]

Yes at least on desktop it seems to work with the regular menu just not the mobile menu. If I click on it, it will not open the menu. I actually had the menu hidden on amp pages because it wasn’t working, but if you want to check it out now you can here https://www.ryansmithphotography.com/?amp

[Tom]

Your site seems to be missing some of the CSS essential for it to work. AMP will limit the amount of CSS on the page, so maybe you’re hitting your limit before it’s getting to the mobile menu CSS. Does it work if you deactivate your other plugins?

[Ryan]

Great thanks, I should have tested before but actually if I disable my child theme then the menu works. So maybe I have too much custom css and it’s over the amp limit. Do you have the necessary css that I could add to the top of my child theme css to make sure it’s not dropped? Thanks!

[Ryan]

What I can’t figure out is even if I remove all my custom css from my child theme the menu still won’t work. However if I switch to the default generatepress theme it does. The only other thing I can think is the customizer options are pushing amp over the limit. Is there a way I can reduce the size of the inline css added from the customizer, or maybe you have another solution? Thanks.

[Tom]

Interesting – are you using a lot of the Customizer options? What happens if your child theme has no custom CSS?

It may be easier to start a new topic so you can share your URL (if possible).

Thanks!

[Ryan]

No it’s pretty minimal actually because I like to customize in the css of my child theme. My website is just https://www.ryansmithphotography.com.

[Ryan]

Also that is what I was saying I deleted all my child theme css and it still wouldn’t work. If you need to login to check it out let me know.

[Tom]

Hmm, there’s not much on the GP side of things that can be disabled any further without losing design. There seems to be a lot of WP Forms CSS happening as well. Does deactivating that plugin temporarily make any difference?

[Ryan]

I actually tried that again just to make sure, but I had also disabled all plugins that would affect the front end and it still didn’t help. I actually don’t think it’s the css being too large now, I’ve tried reducing everything I can and it still doesn’t work. I noticed you can actually see the css files being loading in the source of the amp page if you are logged in, I’ll paste this info below. I just can’t figure out anything possible that would be different in my child theme causing the issue.

The style[amp-custom] element is populated with:
     0 B: style
   565 B (11%): link#dashicons-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-includes/css/dashicons.min.css?ver=5.2.2][type=text/css][media=all]
    75 B (24%): link#amp-default-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.2.0][type=text/css][media=all]
  1261 B (12%): link#wp-block-library-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2][type=text/css][media=all]
  7269 B (52%): link#wpforms-full-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/wpforms-lite/assets/css/wpforms-full.css?ver=1.5.3.1][type=text/css][media=all]
 11388 B (55%): link#generate-style-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/themes/generatepress/css/all.min.css?ver=2.3.2][type=text/css][media=all]
  5239 B (85%): style#generate-style-inline-css[type=text/css]
 12918 B (70%): link#generate-child-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/themes/generatepress_child/style.css?ver=1562907725][type=text/css][media=all]
  2183 B (80%): link#yoast-seo-adminbar-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/wordpress-seo/css/dist/adminbar-1160.min.css?ver=11.6][type=text/css][media=all]
   402 B (23%): link#generate-blog-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/gp-premium/blog/functions/css/style-min.css?ver=1.8.3][type=text/css][media=all]
  1336 B (70%): link#generate-navigation-branding-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/gp-premium/menu-plus/functions/css/navigation-branding.min.css?ver=1.8.3][type=text/css][media=all]
  1134 B (88%): style#generate-navigation-branding-inline-css[type=text/css]
   525 B (88%): link#gpamp-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/amp-for-generatepress-master/amp.css?ver=0.1][type=text/css][media=all]
    39 B: style[type=text/css][media=print]
   665 B (6%): link#tt-normal-layout-style-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/testimonials-showcase/layouts/grid/styles.css?ver=5.2.2][type=text/css][media=all]
   348 B (38%): link#tt-global-styles-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/testimonials-showcase/resources/global.css?ver=5.2.2][type=text/css][media=all]
    83 B: amp-img.amp-wp-enforced-sizes amp-wp-6a19fc1[height=1][width=1][src=https://www.facebook.com/tr?id=326917374346566&ev=PageView&noscript=1][layout=intrinsic]
    75 B: img.amp-wp-cb45893[height=1][width=1][src=https://www.facebook.com/tr?id=326917374346566&ev=PageView&noscript=1]
    80 B: h3.has-text-align-center amp-wp-13076d9
    96 B: span.amp-wp-f8850ba
    76 B: span.amp-wp-d5b2775
    79 B: div.amp-wp-9f62b4e
   116 B: div.grid-25 mobile-grid-100 tablet-grid-25 amp-wp-849d5d2
   117 B: div.grid-75 mobile-grid-100 tablet-grid-75 amp-wp-7334c39
    93 B: div.amp-wp-14f4b15
Total included size: 46,162 bytes (48% of 95,079 total after tree shaking)

The following stylesheets are too large to be included in style[amp-custom]:
 16113 B (94%): link#admin-bar-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/amp/assets/css/admin-bar.css?ver=1.2.0][type=text/css][media=all]
   210 B: style#admin-bar-inline-css[type=text/css]
Total excluded size: 16,323 bytes (94% of 17,332 total after tree shaking)

Total combined size: 62,485 bytes (55% of 112,411 total after tree shaking)

[Tom]

Aha, does your child theme have a footer.php file? If so, can you make sure this hook exists in it?: https://github.com/tomusborne/generatepress/blob/2.3.2/footer.php#L59

[Ryan]

Thanks for the help. I only have a functions.php and style.css in my child theme. I even tried disabling the elements module to make sure it wasn’t anything I added to a hook causing the issue.

[Tom]

What version of GP are you using?

[Ryan]

It’s the latest 2.3.2

[Tom]

From what I can do, this element isn’t being added to the page: https://github.com/tomusborne/amp-for-generatepress/blob/master/amp-for-generatepress.php#L229

It’s necessary for AMP to pickup the necessary CSS from mobile.min.css.

Just to confirm, are you using this AMP plugin?: https://wordpress.org/plugins/amp/

[Ryan]

Yes the official plugin on the latest version. If you would like to login let me know. Could I try adding that to my functions.php?

[Author]

Posts