{"id":1297,"date":"2016-12-23T11:08:46","date_gmt":"2016-12-23T11:08:46","guid":{"rendered":"https:\/\/ampforwp.com\/?p=1297"},"modified":"2020-04-27T08:22:48","modified_gmt":"2020-04-27T08:22:48","slug":"extend-amp-plugin","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/extend-amp-plugin\/","title":{"rendered":"How to modify AMP plugin and make it update proof"},"content":{"rendered":"<p>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.<\/p>\n<h3>Our Goal: Create an Extension<\/h3>\n<p>In this example, we will cover how to add Custom banner at the end of the post content.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1304\" src=\"https:\/\/ampforwp.com\/wp-content\/uploads\/2016\/12\/How-to-modify-AMP-plugin-and-make-it-update-proof.png\" alt=\"Create an extension\" width=\"914\" height=\"970\"><\/p>\n<h3>Let&#8217;s start writing our plugin<\/h3>\n<p>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.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/MohammedKaludi\/31e577ecf37b327bf5048191793234b1.js\"><\/script><\/p>\n<p>Let&#8217;s go to our plugin page and see what we have got.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1311\" src=\"https:\/\/ampforwp.com\/wp-content\/uploads\/2016\/12\/how-to-modify-ampforwp-plugin-and-make-it-update-proof-plugin-check-1024x867.png\" alt=\"Plugins\" width=\"1024\" height=\"867\"><\/p>\n<p>Now AMP Custom Banner Extension plugin is ready, let&#8217;s add the code that will add the banner after the post content.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/MohammedKaludi\/a951d09b883ca543261b439d0c232eff.js\"><\/script><\/p>\n<p>I&#8217;ll go through the code once and explain to you what it does.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1315\" src=\"https:\/\/ampforwp.com\/wp-content\/uploads\/2016\/12\/how-to-modify-ampforwp-plugin-and-make-it-update-proof-plugin-explain-abspath-1024x581.png\" alt=\"exit if accessed\" width=\"1024\" height=\"581\"><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1317\" src=\"https:\/\/ampforwp.com\/wp-content\/uploads\/2016\/12\/how-to-modify-ampforwp-plugin-and-make-it-update-proof-plugin-explain-create-markup.png-1024x581.png\" alt=\"Image Markup\" width=\"1024\" height=\"581\"><\/p>\n<p>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.<\/p>\n<p>If you are wondering what Hooks are? Then check out this very good article by <a href=\"http:\/\/blog.teamtreehouse.com\/hooks-wordpress-actions-filters-examples\">TreeHouse<\/a>.<\/p>\n<p>Our plugin is ready, let&#8217;s activate it and see how it looks.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1319\" src=\"https:\/\/ampforwp.com\/wp-content\/uploads\/2016\/12\/how-to-modify-ampforwp-plugin-and-make-it-update-proof.gif\" alt=\"\" width=\"1024\" height=\"761\"><\/p>\n<p>Now we can see the banner below the post, Yay!!!<\/p>\n<p>Banner is looking great, but it is aligned left, its time to add some styling and make the banner look prettier.<\/p>\n<h3>Styling the banner<\/h3>\n<p>This will insert the styling code to align the banner in the center.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/MohammedKaludi\/583f78d43251ad9dbb4e3e83de8ec50c.js\"><\/script><\/p>\n<p>Let us check how the banner is looking now.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1327\" src=\"https:\/\/ampforwp.com\/wp-content\/uploads\/2016\/12\/how-to-modify-ampforwp-plugin-and-make-it-update-proof-after-styling.gif\" alt=\"Layout responsive\" width=\"1024\" height=\"738\"><\/p>\n<p>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 <code>layout=\"responsive\"&nbsp;<\/code>in&nbsp;image markup.<\/p>\n<p>Here is the final code also I&#8217;m adding it in the GitHub ( <a href=\"https:\/\/github.com\/MohammedKaludi\/amp-custom-banner-extension\/\">https:\/\/github.com\/MohammedKaludi\/amp-custom-banner-extension\/<\/a> ), do feel free to contribute it.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/MohammedKaludi\/435536072d98412f64f9a8023b2795d8.js\"><\/script><\/p>\n<h3>Over to you.<\/h3>\n<p>Please do let me know your thoughts and was this tutorial helpful? Also, I&#8217;m going create more tutorials like these so your feedback will help me improve the articles.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":[],"ht-kb-category":[183],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/1297"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=1297"}],"version-history":[{"count":3,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/1297\/revisions"}],"predecessor-version":[{"id":15946,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/1297\/revisions\/15946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=1297"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=1297"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=1297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}