{"id":3550,"date":"2017-09-09T09:35:37","date_gmt":"2017-09-09T09:35:37","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=3550"},"modified":"2020-05-07T08:26:41","modified_gmt":"2020-05-07T08:26:41","slug":"related-posts","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/related-posts\/","title":{"rendered":"Related Posts"},"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

Related Post Component is for displaying the related posts for the single in your AMP theme.<\/p>\n\n\n\n

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

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

Step 1:<\/strong><\/p>\n\n\n\n

To initiate the support for the component in your theme just add the following code to the “functions.php<\/strong>” of the AMP Theme Framework directory.<\/p>\n\n\n\n

\/\/ Related Posts\nadd_amp_theme_support('AMP-related-posts');<\/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:<\/strong><\/p>\n\n\n\n
To add the Related Post<\/strong> we need to call it.
example: add the following code in “single.php<\/strong>” of the AMP Theme Framework directory.<\/p>\n\n\n\n
<?php amp_related_posts(); ?><\/pre><\/div>\n\n\n\n
with this, you’re successfully able to set Related Post<\/strong> on your theme.<\/p>\n\n\n\n
But By default, it will show Image and Excerpt in Related Posts. If you don’t want image or excerpt in Related Posts then you can hide them using the Arguments.<\/p>\n\n\n\n
Example: Add the following code to show Related Posts without Image and Excerpt.<\/p>\n\n\n\n
$args = array('show_image'=>false, 'show_excerpt'=>false);\namp_related_posts($args);<\/pre><\/div>\n\n\n\n
You can also call separate parts of Related Posts inside the Query.<\/p>\n\n\n\n
\/\/ Query\n$my_query = related_post_loop_query();\n\n\/\/ Title\nampforwp_related_post();\n\n\/\/ Image\nampforwp_get_relatedpost_image();\n\n\/\/ Excerpt and Author\nampforwp_get_relatedpost_content();\n<\/pre><\/div>\n\n\n\n
But Wait, There’s more!<\/p>\n\n\n\n
You can even crop the image according to your need.<\/p>\n\n\n\n
ampforwp_get_relatedpost_image('full',array(\n                                     'image_crop'=>'true',\n                                     'image_crop_width'=>220,\n                                     'image_crop_height'=>134) \n\n                               );<\/pre><\/div>\n\n\n\n
That’s all!<\/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