Clicky

  1. Home
  2. Theming (AMP Theme Framework)
  3. Theme Structure (Hierarchy)

Theme Structure (Hierarchy)

The recommended structure for the theme is the following.

We’ve made a very simple structure where we need only one folder for the theme and inside of it all the files shown above.

AMP Theme Framework Code Explained

In this article, we’ll look into the theme structure and it’s working.

  1. amp-theme.php
  2. archive.php
  3. footer.php
  4. functions.php
  5. header.php
  6. index.php
  7. loop.php
  8. page.php
  9. search.php
  10. single.php
  11. style.php

amp-theme.php

This file is for WordPress to let it know that This is a plugin and treat it as such.

archive.php

  • amp_header() is used to call for getting the post_id, template and its parts (header).
  • amp_archive_title() is used to get the title of an archive.
  • amp_loop_template() is used to load the loop.
  • amp_footer() is used to load the footer.
  • amp_non_amp_link() is used to display the non-AMP version of the site content.
  • amp_footer_core() is used to complete the footer part by loading the template and hook functions.

functions.php

this file is to add the support to all the components present in the AMP Theme Framework.
If you wish to add any component say “search” then you should use the following code.

AMP-search is used to initiate the support for the search component.

following is the list of all the components.

header.php

In this file, you’ll be adding the components like sidebar, search and social icons.

amp_header_core() is a must to add in this file which will get the core of AMP HTML

amp_logo() is used to add the logo component and similarly, the other components can be loaded such as

amp_sidebar()
amp_search()
amp_menu()
amp_social()

index.php

here in index.php

  • amp_header() is used to load the header part.
  • amp_loop_template() is used to load the loop.
  • amp_footer() is used to load the footer.

loop.php

this is one of the most important files for the theme which is responsible to load the content of the loop.

here we check the condition while the loop is start

  • while(amp_loop(‘start’)): we’ll load the following meta information about the post.
  • amp_loop_image() is used to load the image (featured image/thumbnail).
  • amp_loop_title() is used to get the title of the post.
  • amp_loop_excerpt() is used to get the excerpt of the post if any.
  • amp_loop_category()  is to show the category to which this post belongs to.
  • amp_loop_date() is to show the published date.

page.php

It is used to load the AMP content for the page.

  • amp_header() is used to add the header.
  • amp_title() is used to get the title of the page.
  • amp_featured_image() is used for displaying the featured image if available.
  • amp_content() It used to load the AMP content.
  • amp_footer() is used for adding the footer section.

search.php

single.php

this file is responsible for displaying the posts in AMP theme.

We can add any component we want to display in single as per our need.

style.php

this file contains all the css style for the entire theme.

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.

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 March 18, 2020

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. How exactly would one be adding background images to the CSS code? Will it be ok to create an images folder in this folder and add the images therein, and give the path in the css code (style.php)?

    1. Hi Varun Gupta,

      If you want to change the background images of any section then you need to target any specific id or class and past this code in Global -> Custom CSS.

  2. I already have a theme for web version. How can i use this amp theme with other child theme? Or how can i integrate templates of amp in my current child theme?

    1. Hi Akash,

      Yes with the help of our AMP Theme Framework plugin you are design your AMP pages AMP Theme Framework plugin please install and activate it by using this plugin you can change anything in your AMP website.

  3. Hello,

    I’m new with work with AMP.
    Where can i see this path?
    Thank you in advanced

    1. Hi B.K,

      If you install our plugin then we have 4 designs from which you can choose from and if you don’t like them and you want to create your own design then you need to install and activate one more free plugin which you can download from here – https://ampforwp.com/amp-theme-framework/ and in that, you will see the theme structure

  4. Can we have different page templates for our custom pages like the hierarchy WordPress supports for example single-$posttype-.php or page-$slug.php ?

Leave a Comment