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.

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.

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.

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.

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.