{"id":3524,"date":"2017-09-09T07:51:45","date_gmt":"2017-09-09T07:51:45","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=3524"},"modified":"2020-05-07T08:00:39","modified_gmt":"2020-05-07T08:00:39","slug":"loop","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/loop\/","title":{"rendered":"Loop"},"content":{"rendered":"\n

This article is for AMP Theme Framework<\/a> users.<\/p>\n\n\n\n

About this Component<\/h3>\n\n\n\n

Loop Component is responsible to render the data on home, archive, search pages.<\/p>\n\n\n\n

How to use:<\/h4>\n\n\n\n

The following are the steps to use this component.<\/p>\n\n\n\n

step 1:<\/h4>\n\n\n\n

To initiate the support for this component in your theme just add the following code to the functions.php of the theme files.<\/p>\n\n\n\n

\/\/Loop\nadd_amp_theme_support('AMP-loop');<\/pre><\/div>\n\n\n\n
This was the back-end part where we’ve just initiated, now to make it appear in the front-end follow the next step.<\/p>\n\n\n\n
step 2:<\/h4>\n\n\n\n
To add the Loop in home, archive, search pages<\/strong> we need to call it where we want to display it.
example: add the following code in index.php, archive.php,search.php of the theme files.<\/p>\n\n\n\n
 <?php amp_loop_template(); ?><\/pre><\/div>\n\n\n\n
with this, you’ll be able to set loop<\/strong> on your theme.<\/p>\n\n\n\n
step 3:<\/h4>\n\n\n\n
Now create loop.php to get loop contents on pages. In this page you can show the posts list details with pagination. follow these steps to add the required content in loop.php<\/p>\n\n\n\n
step 3-I:<\/h4>\n\n\n\n
To start loop<\/p>\n\n\n\n
 <?php while(amp_loop('start')): ?><\/pre><\/div>\n\n\n\n
To end loop<\/p>\n\n\n\n
 <?php endwhile; amp_loop('end');  ?><\/pre><\/div>\n\n\n\n
step 3-II:<\/h4>\n\n\n\n
Inside the loop, you can show different contents of the loop according to your needs like:
Show image of post<\/p>\n\n\n\n
 <?php amp_loop_image();  ?><\/pre><\/div>\n\n\n\n
Show title of post<\/p>\n\n\n\n
 <?php amp_loop_title();  ?><\/pre><\/div>\n\n\n\n
Show excerpt(Short description) of post<\/p>\n\n\n\n
 <?php amp_loop_excerpt();  ?><\/pre><\/div>\n\n\n\n
Show Categories of post<\/p>\n\n\n\n
 <?php amp_loop_category();  ?><\/pre><\/div>\n\n\n\n
Show posted date of post<\/p>\n\n\n\n
 <?php amp_loop_date();  ?>\n<\/pre><\/div>\n\n\n\n
Show permalinks in the loop of post<\/p>\n\n\n\n
If you want the permalinks in the loop for adding read more text etc then with the help of our amp_loop_the_permalink function you can add it easily like:<\/p>\n\n\n\n
By using this function you will display the permalink for the loop<\/p>\n\n\n\n
<?php amp_loop_the_permalink();?><\/pre><\/div>\n\n\n\n
By using this function you will retrieve the full permalink for the loop. This function only gets the permalink from loop but it will not display you need to add echo for displaying. <\/p>\n\n\n\n
<?php echo amp_loop_get_permalink(); ?><\/pre><\/div>\n\n\n\n
Brief structure of loop.php<\/p>\n\n\n\n
<?php while(amp_loop('start')): ?>\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<?php endwhile; amp_loop('end');  ?>\n\ufeff<\/pre><\/div>\n\n\n\n
Step 4<\/h4>\n\n\n\n
To Start the pagination( which will add next page and previous page links )<\/p>\n\n\n\n
 <?php amp_pagination(); ?>\n<\/pre><\/div>\n\n\n\n
Step 5<\/h4>\n\n\n\n
If you want to modify the loop and divide it into post categories<\/p>\n\n\n\n
array(\n    'post_type' => 'post',\n    'tax_query' => array(\n    'relation' => 'AND',\n        array(\n            'taxonomy' => 'category',\n            'field'    => 'term_id',\n            'terms'    => 83, \/\/ category ID\n        ),\n         \n    ),\n) ))): ?><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
That\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
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