1. Home
  2. Developer Docs
  3. Extending
  4. How to modify AMP plugin and make it update proof

How to modify AMP plugin and make it update proof

In this blog post, I will cover how to modify AMP plugin (AMPforWP plugin) and preserve those changes and make it update proof. We will create a custom plugin and extend the functionality of AMPforWP.

Our Goal: Create an Extension

In this example, we will cover how to add Custom banner at the end of the post content.

Create an extension

Let’s start writing our plugin

First, create a file in your plugin folder called amp-custom-banner-extension.php and write the plugin header. Or paste this below code in the file you just created.

Let’s go to our plugin page and see what we have got.

Plugins

Now AMP Custom Banner Extension plugin is ready, let’s add the code that will add the banner after the post content.

I’ll go through the code once and explain to you what it does.

exit if accessed

Image Markup

We are hooking the markup function amp_custom_banner_extension_insert_banner to ampforwp_after_post_content, this hook is created in AMPforWP plugin and we are attaching banner markup code to the hook.

If you are wondering what Hooks are? Then check out this very good article by TreeHouse.

Our plugin is ready, let’s activate it and see how it looks.

Now we can see the banner below the post, Yay!!!

Banner is looking great, but it is aligned left, its time to add some styling and make the banner look prettier.

Styling the banner

This will insert the styling code to align the banner in the center.

Let us check how the banner is looking now.

Layout responsive

Looks much better now. The last thing remaining is to make the banner responsive and it will look good on all type of devices. So we need to add layout="responsive" in image markup.

Here is the final code also I’m adding it in the GitHub ( https://github.com/MohammedKaludi/amp-custom-banner-extension/ ), do feel free to contribute it.

Over to you.

Please do let me know your thoughts and was this tutorial helpful? Also, I’m going create more tutorials like these so your feedback will help me improve the articles.

Updated on November 4, 2017

Was this article helpful?

Related Articles

Comments

  1. Great plug-in – thanks for your dedicated work!

    I am ending up with 3 AMP extensions of each post URL:
    Example page: Google Algorithm Updates Impact SEO Tactics

    1. https://www.hillwebcreations.com/google-algorithm-updates-impact-seo-tactics/amp
    2. https://www.hillwebcreations.com/google-algorithm-updates-impact-seo-tactics//amp
    3. https://www.hillwebcreations.com/google-algorithm-updates-impact-seo-tactics/amp/

    How do I remove the first 2? Only the /amp/ version is desired.

    1. Hey Jeannie,

      Thank you for using this plugin, we have fixed some permalink issues in the new update (0.9.31), please update to the latest version and do let me know if that fixed the issue.

      Mohammed Kaludi

  2. Hi,

    Thank you for your valuable information. We tried this way to edit some existing functionality. We need to change the previous/next navigation text on the single post page and the file is located under “/wp-content/plugins/accelerated-mobile-pages/templates/design-manager/design-2/elements/content.php”.

    So, we created a new custom plugin as you mentioned and tried to remove the filter first like this “remove_filter( ‘amp_post_template_file’, ‘ampforwp_design_element_the_title’);” so that we can assign our version of content.php but it doesn’t work. Any idea?

    1. Hey Girish,

      Do you want to change this right http://take.ms/khmaR ?
      If, yes then it doesn’t make sense to remove this filter ampforwp_design_element_the_title to modify content.php

      Please do let me know what exactly you are looking for so I can suggest you how to achieve that.

      Thank you,
      Mohammed kaludi

      1. Hi Mohammed,

        Yes, I want to change the navigation text to “NEXT” and “PREV” instead of post title. Please suggest.

  3. Hi Mohammed,

    Yes, I want to change the navigation text to “NEXT” and “PREV” instead of post title. Please suggest.

  4. Pingback: Removing Fonts from AMP pages – AMP Tutorials

  5. Thanks a lot for this.

    How can I add one more custom banner before the content or above the title?

  6. I would like to add code below <body tag.
    How to do that.

  7. Why is this not as simple as adding the AMP Text module in page builder but for single posts?

Add A Comment