Clicky

  1. Home
  2. Developer Docs
  3. Hooks in AMPforWP

Hooks in AMPforWP

The list of hooks and their functionality:

Sitewide { These hooks will run throughout the AMP website }

  • amp_post_template_head

  • amp_post_template_css

  • ampforwp_body_beginning

  • ampforwp_after_header

  • below_the_header_design_1 [ Design-1 only ]

  • amp_post_template_above_footer

  • amp_post_template_footer

  • amp_experiment_meta

  • amp_meta

  • ampforwp_after_amp_menu

  • amp_sidebar_start

  • amp_sidebar_end

  • pre_amp_render_post

single.php { Posts and Pages }

  • ampforwp_post_before_design_elements

  • ampforwp_post_after_design_elements

  • ampforwp_below_author_box

  • ampforwp_push_notification_widget

  • ampforwp_single_design_type_handle_d1

Note: In Swift pages are served through page.php 

archive.php { These hooks will execute on Archive Pages }

  • ampforwp_post_before_loop / amp_before_loop [ Swift ]

  • ampforwp_between_loop

  • ampforwp_post_after_loop / amp_after_loop [ Swift ]

  • ampforwp_loop_before_pagination

frontpage.php { These hooks will run on Custom FrontPage of Design 1,2 and 3 only }

  • ampforwp_frontpage_above_loop

  • ampforwp_frontpage_below_loop

header-bar.php { These hooks runs in the “<header>” section }

  • ampforwp_header_top_design{designno}

  • ampforwp_header_search [ Design 1,2,3 ]

  • ampforwp_call_button [ Design 1,2,3 ]

  • ampforwp_header_bottom_design{designno}

index.php { These hooks will execute on HomePage }

  • ampforwp_area_above_loop [ Design 3 ]

  • ampforwp_home_above_loop / amp_before_loop [ Swift ]

  • ampforwp_post_before_loop / amp_before_loop [ Swift ]

  • ampforwp_between_loop

  • ampforwp_post_after_loop / amp_after_loop [ Swift ]

  • ampforwp_home_below_loop / amp_after_loop [ Swift ]

search.php { These hooks will run on Search Pages }

  • ampforwp_post_before_loop / amp_before_loop [ Swift ]

  • ampforwp_between_loop

  • ampforwp_post_after_loop / amp_after_loop [ Swift ]

Elements

comments.php { Comments in Single }

  • ampforwp_before_comment_hook
  • ampforwp_reply_comment_form
  • ampforwp_after_comment_hook

content.php { Content of Post }

  • ampforwp_before_content_hook [Design-1]
  • ampforwp_inside_post_content_before [Design-1]
  • ampforwp_before_post_content
  • ampforwp_after_post_content

featured-image.php { Featured Image of Post }

meta-info.php [ Author, categories list etc ]

  • ampforwp_before_meta_info_hook [ Design 1,2,3 ]
  • ampforwp_after_meta_info_hook [ Design 1,2,3 ]

meta-taxonomy.php [ Author box, Tags etc ]

  • ampforwp_before_meta_taxonomy_hook [ Design 1,2,3 ]
  • ampforwp_after_meta_taxonomy_hook [ Design 1,2,3 ]
  • ampforwp_above_related_post
  • ampforwp_between_related_post
  • ampforwp_below_related_post

social-icons.php { Social Icons in Single }

  • ampforwp_before_social_icons_hook
  • ampforwp_after_social_icons_hook

title.php { Title of Single Post }

  • ampforwp_above_the_title
  • ampforwp_below_the_title

Functionalities

amp_post_template_head:
It is used to add extra things in Head section of AMP which will come in handy if you want to add extra metas, JS of AMP components etc..,

amp_post_template_css:
It is used to add extra CSS to your AMP pages

ampforwp_body_beginning:
It is executed right after the beginning of Body tag which can be very useful to add things like Analytics.

below_the_header_design_1 [Design-1] / ampforwp_after_header:
It is executed right after the header section of AMP

ampforwp_post_before_design_elements:
This hook runs before the elements like breadcrumb, title, content meta-info etc which are present in elements folder of each design.

ampforwp_post_after_design_elements:
This hook runs after the elements like breadcrumb, title, content meta-info etc which are present in elements folder of each design.

amp_post_template_above_footer:
It executes right before the footer.php

amp_post_template_footer:
It executes after the footer and just before the end of body tag.

ampforwp_global_after_footer:
This hook executes at the end of the footer i.e., footer.php

ampforwp_post_before_loop / amp_before_loop [ Swift ]:
This hook executes before the loop (Home and Archive). It can be used to add anything just above the loop.

ampforwp_between_loop:
This hook executes in between the loop (Home and Archive). It can be used to add anything in between the loop. It has $count variable as a parameter which can be used to count the number of posts which can help greatly to decide where exactly you want to use this hook in the loop.

ampforwp_post_after_loop / amp_after_loop [ Swift ]:
This hook executes after the loop (Home and Archive). It can be used to add anything just below the loop.

ampforwp_frontpage_above_loop:
This hook executes before the content of Frontpage.

ampforwp_frontpage_below_loop:
This hook executes after the content of Frontpage.

ampforwp_header_top_design{designno}:
This hook executes at the beginning of Header

ampforwp_header_bottom_design{designno}:
This hook executes at the end of Header.

ampforwp_header_search:
It executes with the search button present in the header. You can use it to add your own search button as well.

ampforwp_call_button:
It executes with the call button present in the header. You can use it to add your own call button as well.

ampforwp_home_above_loop / amp_before_loop [ Swift ] :
This hook is used to add the things above the Homepage loop.

ampforwp_home_below_loop / amp_after_loop [ Swift ] :
This hook is used to add the things above the Homepage loop.

ampforwp_before_comment_hook:
This hook executes right before the Comments.

ampforwp_reply_comment_form:
This hook executes right after the content of each comment.

ampforwp_after_comment_hook:
This hook executes right after the Comments.

ampforwp_inside_post_content_before [Design-1]:
This hook executes befote the content. It works in Design-1 only.

ampforwp_before_post_content:
This hook executes befote the content.

ampforwp_after_post_content:
This hook executes after the content.

ampforwp_before_featured_image_hook:
It executes right before the featured image in Single and Custom FrontPage.

ampforwp_after_featured_image_hook:
It executes right after the featured image in Single and Custom FrontPage.

ampforwp_before_meta_info_hook:
It executes right before the Meta info in Single.

ampforwp_after_meta_info_hook:
It executes right after the Meta info in Single.

ampforwp_before_meta_taxonomy_hook:
It executes right before the Meta taxonomy in Single.

ampforwp_after_meta_taxonomy_hook:
It executes right after the Meta taxonomy in Single.

ampforwp_above_related_post:
This hook executes right above the Related Posts in Single.

ampforwp_between_related_post:
This hook executes between the Related Posts in Single. It can be used to add things like Ads in between the related posts of single.

ampforwp_below_related_post:
This hook executes right below the Related Posts in Single.

ampforwp_before_social_icons_hook:
It runs before the Social icons in Single.

ampforwp_after_social_icons_hook:
It runs after the Social icons in Single.

ampforwp_above_the_title:
This hook runs before the Title in Single.

ampforwp_below_the_title:
This hook runs after the Title in Single.

pre_amp_render_post:
This hook will only work in AMP environment.

ampforwp_single_design_type_handle_d1:
This hook executes after the Next-Previous Links.

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on July 3, 2019

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support

Comments

  1. I’m running newspaper by tadgiv theme which has inbuilt smartlist post option. Now the smartlist automatically adds stylish numbering to subheadings meaning that i don’t have to manually input numbering for my list subheadings (I write listicles for 70% of my content). My problem now is that when that post is viewed in amp, the smartlist numbers disappear leaving my subheadings without numbering. I want the amp page to include the smartlist style of numbering subheadings, what do i do please?

  2. Hello. I am trying to use amp_post_template_css and add different css code for each page, what is the correct way to do it? should I create an if to validate the page and include the specific css code?

    thanks

Leave a Comment