Skip to content

Adding Custom Shortcodes And Widgets

Weston Ruter edited this page Jul 6, 2018 · 7 revisions

Widgets are now supported when adding theme support, and shortcodes have always been supported. Here are some considerations for creating custom shortcodes and widgets:

  • No inline scripts, as this plugin will strip <script> tags on the front-end. Consider using amp-bind instead. While script elements will be stripped in AMP, if you have fallback content in accompanying noscript tags then (as of 1.0-beta1) they will be unwrapped so their contents will be served in AMP. For more, see Implementing Interactivity.
  • While it is a best practice is to enqueue stylesheets with wp_enqueue_style(), this plugin will also recognize inline styling, and it automatically to the <style amp-custom> element. If the stylesheet causes the total page CSS size to go over the 50 KB limit, it might be stripped. But a new feature as of 1.0-alpha1 reduces the need to reduce additional CSS by automatically tree-shaking the CSS added to the page.
  • You can use is_amp_endpoint() to output different markup for AMP and non-AMP pages, such as when you are using the paired mode (doesn't apply to Native AMP). For example, a social sharing widget or shortcode might output the amp-social-share component on the AMP page:
<?php if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) : ?>
        <amp-social-share type="twitter"></amp-social-share>
<?php else : ?>
        <a href="https://twitter.com/intent/tweet/?url=http%3A%2F%2Fexample.com">Share</a>
<?php endif; ?>
  • The plugin will automatically output the required scripts for any AMP components that you output. In the example above, the plugin will recognize the amp-social-share component and output the required script.