In this article we’ll look into the theme structure and it’s working.<\/p>\n\n\n\n
<?php\n\/*\nPlugin Name: AMP Theme Framework\nPlugin URI: https:\/\/wordpress.org\/plugins\/accelerated-mobile-pages\/\nDescription: This is a custom AMP theme built to show how easy it is to make custom AMP themes.\nVersion: 1.0\nAuthor: Mohammed Kaludi, Ahmed Kaludi\nAuthor URI: http:\/\/ampforwp.com\/themes\nLicense: GPL2\nAMP: AMP Framework \n*\/\n\n\/\/ Exit if accessed directly.\nif ( ! defined( 'ABSPATH' ) ) exit;<\/pre><\/div>\n\n\n\nThis file is for WordPress to let it know that This is a plugin and treat it as such.<\/p>\n\n\n\n
archive.php<\/h4>\n\n\n\n
<?php amp_header() ?>\n\n<?php amp_archive_title(); ?>\n<?php amp_loop_template(); ?>\n\n<?php amp_footer()?><\/pre><\/div>\n\n\n\n
- amp_header()<\/strong> is used to call for getting the post_id, template and its parts (header).<\/li>
- amp_archive_title() <\/strong>is used to get the title of an archive.<\/li>
- amp_loop_template()<\/strong> is used to load the loop.<\/li>
- amp_footer() <\/strong>is used to load the footer.<\/li><\/ul>\n\n\n\n
footer.php<\/h4>\n\n\n\n
<\/div>\n<footer class="footer container">\n <?php amp_non_amp_link(); ?>\n<\/footer>\n<?php amp_footer_core(); ?><\/pre><\/div>\n\n\n\n
- amp_non_amp_link()<\/strong> is used to display the non-AMP version of the site content.<\/li>
- amp_footer_core()<\/strong> is used to complete the footer part by loading the template and hook functions.<\/li><\/ul>\n\n\n\n
functions.php<\/h4>\n\n\n\n
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.<\/p>\n\n\n\nadd_amp_theme_support('AMP-search');<\/pre>\n\n\n\nAMP-search is used to initiate the support for the search<\/a> component.<\/p>\n\n\n\n
following is the list of all the components<\/a>.<\/p>\n\n\n\n
<?php \n\/\/ Loading the Components\n\/\/Search\nadd_amp_theme_support('AMP-search');\n\/\/Logo\nadd_amp_theme_support('AMP-logo');\n\/\/Social Icons\nadd_amp_theme_support('AMP-social-icons');\n\/\/Menu\nadd_amp_theme_support('AMP-menu');\n\/\/Call Now\nadd_amp_theme_support('AMP-call-now');\n\/\/Sidebar\nadd_amp_theme_support('AMP-sidebar');\n\/\/ Featured Image\nadd_amp_theme_support('AMP-featured-image');\n\/\/Author box\nadd_amp_theme_support('AMP-author-box');\n\/\/Loop\nadd_amp_theme_support('AMP-loop');\n\/\/ Categories and Tags list\nadd_amp_theme_support('AMP-categories-tags');\n\/\/ Comments\nadd_amp_theme_support('AMP-comments');\n\/\/Post Navigation\nadd_amp_theme_support('AMP-post-navigation');\n\/\/ Related Posts\nadd_amp_theme_support('AMP-related-posts');\n\/\/ Post Pagination\nadd_amp_theme_support('AMP-post-pagination');<\/pre><\/div>\n\n\n\nheader.php<\/h4>\n\n\n\n
In this file, you’ll be adding the components<\/a> like sidebar<\/a>, search<\/a> and social icons<\/a>.<\/p>\n\n\n\n
<?php amp_header_core() ?>\n <header class="header container">\n <?php amp_logo(); ?>\n <?php amp_sidebar(['action'=>'open-button']); ?> \n <?php amp_call_now(); ?>\n <?php amp_social([\n 'twitter' => 'https:\/\/www.twitter.com\/marqas36',\n 'facebook' => 'https:\/\/www.facebook.com'\n ]);?> \n<\/header>\n\n\n<?php amp_sidebar(['action'=>'start',\n 'id'=>'sidebar',\n 'layout'=>'nodisplay',\n 'side'=>'right'\n] ); ?>\n<?php amp_sidebar(['action'=>'close-button']); ?>\n<?php amp_menu(); ?>\n<?php amp_search();?>\n<?php amp_social(); ?> \n<?php amp_sidebar(['action'=>'end']); ?>\n\n<div class="content-wrapper container"><\/pre><\/div>\n\n\n\namp_header_core()<\/strong> is a must to add in this file which will get the core of AMP HTML<\/p>\n\n\n\n
amp_logo()<\/strong><\/a> is used to add the logo component and similarly, the other components can be loaded such as<\/p>\n\n\n\n
amp_sidebar()<\/a>
amp_search()<\/a>
amp_menu()<\/a>
amp_social()<\/a><\/strong><\/p>\n\n\n\nindex.php<\/h4>\n\n\n\n
<?php amp_header(); ?>\n \n<?php amp_loop_template(); ?>\n\n<?php amp_footer(); ?><\/pre><\/div>\n\n\n\nhere in index.php<\/p>\n\n\n\n
- amp_header()<\/strong> is used to load the header part.<\/li>
- amp_loop_template()<\/strong> is used to load the loop.<\/li>
- amp_footer() <\/strong>is used to load the footer.<\/li><\/ul>\n\n\n\n
loop.php<\/h4>\n\n\n\n
this is one of the most important files for the theme which is responsible to load the content of the loop.<\/p>\n\n\n\n
<?php while(amp_loop('start')): ?>\n<div class="loop-post">\n <?php amp_loop_image(); ?>\n <?php amp_loop_title(); ?>\n <?php amp_loop_excerpt(); ?>\n <?php amp_loop_category(); ?>\n <?php amp_loop_date(); ?>\n<\/div>\n<?php endwhile; amp_loop('end'); ?>\n<?php amp_pagination(); ?><\/pre><\/div>\n\n\n\nhere we check the condition while the loop is start<\/p>\n\n\n\n
- while(amp_loop(‘start’)): <\/strong>we’ll load the following meta information about the post.<\/li><\/ul>\n\n\n\n
- amp_loop_image()<\/strong> is used to load the image (featured image\/thumbnail).<\/li>
- amp_loop_title()<\/strong> is used to get the title of the post.<\/li>
- amp_loop_excerpt() <\/strong>is used to get the excerpt of the post if any.<\/li>
- amp_loop_category()<\/strong> is to show the category to which this post belongs to.<\/li>
- amp_loop_date()<\/strong> is to show the published date.<\/li><\/ul>\n\n\n\n
page.php<\/h4>\n\n\n\n
<?php amp_header(); ?>\n<?php amp_title(); ?>\n<?php amp_featured_image(); ?>\n<?php amp_content(); ?>\n<?php amp_footer(); ?><\/pre><\/div>\n\n\n\nIt is used to load the AMP content for the page.<\/p>\n\n\n\n
- amp_header()<\/strong> is used to add the header.<\/li>
- amp_title()<\/strong> is used to get the title of the page.<\/li>
- amp_featured_image()<\/strong><\/a> is used for displaying the featured image if available.<\/li>
- amp_content()<\/strong> It used to load the AMP content.<\/li>
- amp_footer()<\/strong> is used for adding the footer section.<\/li><\/ul>\n\n\n\n
search.php<\/h4>\n\n\n\n
single.php<\/h4>\n\n\n\n
this file is responsible for displaying the posts in AMP theme.<\/p>\n\n\n\n
We can add any component we want to display in single as per our need.<\/p>\n\n\n\n
<?php amp_header(); ?>\n<?php amp_title(); ?>\n<?php amp_featured_image();?>\n<?php amp_content(); ?>\n<?php amp_post_pagination();?>\n<?php amp_author_box(); ?>\n<?php amp_social(array('twitter'));?>\n<?php amp_categories_list();?>\n<?php amp_tags_list();?>\n<?php amp_comments();?>\n<?php amp_post_navigation();?>\n<?php amp_related_posts(); ?>\n<?php amp_footer()?><\/pre><\/div>\n\n\n\n
- amp_header()<\/strong> is used to add the header part.<\/li>
- amp_title()<\/strong> is used to get the title of the post.<\/li>
- amp_featured_image()<\/a> <\/strong>is used to add the featured image in single.
amp_content() <\/strong>is to load the content.<\/li>- amp_post_pagination()<\/a> <\/strong>is to get the pagination.<\/li>
- amp_author_box()<\/a> <\/strong>is used for displaying the author section.<\/li>
- amp_social()<\/a> <\/strong>is used to load the social sharing or social profile based on the component set up.<\/li>
- amp_categories_list() <\/a><\/strong>is used to display the categories list.<\/li>
- amp_tags_list()<\/a> <\/strong>is for displaying the tags of the post.<\/li>
- amp_comments()<\/a> <\/strong>to display the comments section.<\/li>
- amp_post_navigation()<\/a> <\/strong>is to add the post navigation.<\/li>
- amp_related_posts()<\/a> <\/strong>it is used to display the related posts.<\/li>
- amp_footer()<\/strong> it is used to load the footer section.<\/li><\/ul>\n\n\n\n
style.php<\/h4>\n\n\n\n
this file contains all the css style for the entire theme.<\/p>\n\n\n\n
<?php add_action('amp_post_template_css', 'ampforwp_custom_style', 11);\nfunction ampforwp_custom_style() { \n global $redux_builder_amp;\n $get_customizer = new AMP_Post_Template( $post_id );\n?>\n\/**** \n* AMP Framework Reset\n*****\/\n body{ font-family: sans-serif; font-size: 16px; line-height:1.4; }\n ol, ul{ list-style-position: inside }\n p, ol, ul, figure{ margin: 0 0 1em; padding: 0; }\n a, a:active, a:visited{ color:#ed1c24; text-decoration: none }\n a:hover, a:active, a:focus{}\n pre{ white-space: pre-wrap;}\n .hidden{ display:none }\n .clearfix{ clear:both }\n blockquote{ background: #f1f1f1; margin: 10px 0 20px 0; padding: 15px;}\n blockquote p:last-child {margin-bottom: 0;}\n .amp-wp-unknown-size img {object-fit: contain;}\n .amp-wp-enforced-sizes{ max-width: 100% }\n\n \/* Image Alignment *\/\n .alignright {\n float: right;\n }\n .alignleft {\n float: left;\n }\n .aligncenter {\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n amp-iframe { max-width: 100%; margin-bottom : 20px; }\n\n \/* Captions *\/\n .wp-caption {\n padding: 0;\n }\n .wp-caption-text {\n font-size: 12px;\n line-height: 1.5em;\n margin: 0;\n padding: .66em 10px .75em;\n text-align: center;\n }\n\n \/* AMP Media *\/\n amp-iframe,\n amp-youtube,\n amp-instagram,\n amp-vine {\n margin: 0 -16px 1.5em;\n }\n amp-carousel > amp-img > img {\n object-fit: contain;\n }\n\n\n\/****\n* Container\n*****\/\n.container {\n max-width: 600px;\n margin: 0 auto;\n}\n\n\/****\n* AMP Sidebar\n*****\/\n amp-sidebar {\n width: 250px;\n }\n\n \/* AMP Sidebar Toggle button *\/\n .amp-sidebar-button{\n position:relative\n }\n .amp-sidebar-toggle {\n }\n .amp-sidebar-toggle span {\n display: block;\n height: 2px;\n margin-bottom: 5px;\n width: 22px;\n background: #000;\n }\n .amp-sidebar-toggle span:nth-child(2){\n top: 7px;\n }\n .amp-sidebar-toggle span:nth-child(3){\n top:14px;\n }\n\n\n\/****\n* AMP Navigation Menu with Dropdown Support\n*****\/\n .toggle-navigation ul{\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: inline-block;\n width: 100%\n }\n .toggle-navigation ul li{\n font-size: 13px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.11);\n padding: 11px 0px;\n width: 25%;\n float: left;\n text-align: center;\n margin-top: 6px\n }\n .toggle-navigation ul ul{\n display: none\n }\n .toggle-navigation ul li a{\n color: #eee;\n padding: 15px;\n }\n .toggle-navigation{\n display: none;\n background: #444;\n }\n\n\n\/**** \n* Loop\n*****\/\n.loop-wrapper .loop-img{\n float: left;\n margin-right: 15px;\n}\n.loop-category{\n list-style-type:none\n}\n.loop-category li{\n display:inline;\n margin-right:1px;\n}\n\n\/**** \n* Single\n*****\/\n\n\n\/**** \n* Comments\n*****\/\n .comments_list ul{\n margin:0;\n padding:0\n }\n .comments_list ul.children{\n padding-bottom:10px;\n margin-left: 4%;\n width: 96%;\n }\n .comments_list ul li p{\n margin: 0;\n font-size: 14px;\n clear: both;\n padding-top: 5px;\n }\n .comments_list ul li .says{\n margin-right: 4px;\n }\n .comments_list ul li .comment-body{\n padding: 10px 0px 15px 0px;\n }\n .comments_list li li{\n margin: 20px 20px 10px 20px;\n background: #f7f7f7;\n box-shadow: none;\n border: 1px solid #eee;\n }\n .comments_list li li li{\n margin:20px 20px 10px 20px\n }\n .comment-author{ float:left }\n\n\/**** \n* RTL Styles\n*****\/\n <?php if( is_rtl() ) {?> <?php } ?>\n\n\/**** \n* Custom CSS\n*****\/\n<?php echo $redux_builder_amp['css_editor']; ?>\n\n<?php } ?><\/pre><\/div>\n\n\n\nThat\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n
\n\t\t\tAsk your Questions Directly!<\/strong>
\n\t\t\t