BugWP logo BugWP
Back to Community
Home / Community / Plugin → Amp

Troubleshooting Common AMP Plugin Issues: From Invalid Scripts to Custom Code

35 threads Sep 16, 2025 Plugin → Amp

Content

Working with the AMP plugin for WordPress can sometimes lead to unexpected validation errors and compatibility issues. Based on common community support threads, this guide addresses the most frequent problems and provides clear, actionable solutions.

Why Do These AMP Errors Occur?

The core principle of AMP is to create fast, secure, and streamlined mobile pages. To achieve this, AMP enforces strict content restrictions. The most common source of conflicts is the prohibition of most custom JavaScript, which is a standard AMP requirement, not a bug in the plugin itself. The AMP plugin sanitizes content to meet these standards, often removing or modifying non-compliant code.

Frequent Issues and Their Solutions

1. Invalid Script Errors with Code Snippet Plugins

Problem: Plugins like WPCode Lite that add custom code to your header or footer often inject JavaScript. This triggers validation errors such as "Invalid inline script" or "Invalid script: admin-bar.js".

Solution: Since AMP pages do not allow custom JavaScript, you must find alternative methods to add functionality:

  • Use AMP-compatible components to recreate the desired feature.
  • For analytics or other scripts, use the dedicated amp-analytics component.
  • If the code is not essential for the AMP version, use PHP conditionals like if ( ! is_amp_endpoint() ) { ... } to prevent it from loading on AMP pages.

2. Adding Custom HTML or Ads to AMP Templates

Problem: Users often struggle to insert custom HTML, text banners, or ad codes into the header or other parts of their AMP template.

Solution: The method depends on your AMP mode (Transitional or Legacy Reader):

  • Transitional Mode: Your active theme's templates and stylesheets are used. Modify your theme's files directly or use the WordPress Customizer. To hide an element only on AMP pages, use the is_amp_endpoint() function in your PHP or add a specific CSS body class for AMP.
  • Legacy Reader Mode: Create a template override. Copy the template file (e.g., header-bar.php) from wp-content/plugins/amp/templates/ to wp-content/themes/your-child-theme/amp/ and modify the copied file.
  • Use the amp_post_template_head or wp_head action hooks to inject content.
  • For ads, consider using the amp-auto-ads component or manually placing amp-ad components in your template overrides.

3. AMP Components Not Working as Expected

Problem: Components like amp-script or amp-recaptcha-input may not function or may cause validation errors.

Solution:

  • amp-script Limitations: amp-script runs in a web worker and has no access to the main DOM. This means certain actions, like window.location redirection, will not work. Alternative AMP components or state management (amp-bind) must be used instead.
  • Component Nesting Rules: AMP has strict rules about where components can be placed. For example, an amp-recaptcha-input must be a descendant of a form tag and cannot be placed inside an amp-mega-menu. Carefully review the official AMP documentation for each component's requirements.
  • Content Sanitization: The WordPress editor (TinyMCE) may strip out valid AMP component tags like <amp-carousel>. To avoid this, use a custom HTML block or a shortcode to output the required code.

4. CSS and Styling Issues

Problem: CSS styles might appear to be missing, especially when using amp-bind to toggle classes dynamically.

Solution: The AMP optimizer performs "tree shaking" to remove unused CSS. If a class is hidden by default (e.g., display: none) and then revealed later via amp-bind, the optimizer might remove it. A workaround is to use the :not() selector to hide elements without setting them to display: none initially, preventing the style from being considered unused.

Key Takeaways

  • AMP is JavaScript-Light: The most common conflicts arise from trying to use custom JavaScript. Seek out AMP-specific components for functionality.
  • Validation is Key: Use the AMP Validator (often available in your browser's Developer Console when on an AMP page) to identify the exact source of errors.
  • Theme Compatibility Matters: Some themes may handle AMP templates better than others. If you encounter persistent issues in Transitional mode, reaching out to your theme's support for guidance is recommended.
  • Consult the Documentation: The AMP project website is the definitive resource for understanding component behavior and specifications.

By understanding the rules of the AMP ecosystem and using the correct methods to add customizations, you can resolve most common issues and ensure your pages are both valid and functional.

Related Support Threads Support