{"id":3916,"date":"2017-09-16T06:21:47","date_gmt":"2017-09-16T06:21:47","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=3916"},"modified":"2019-04-17T11:17:07","modified_gmt":"2019-04-17T11:17:07","slug":"guide-to-acf-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/guide-to-acf-in-amp\/","title":{"rendered":"How to use Advanced Custom Fields in AMP?"},"content":{"rendered":"<p>ACF is a powerful tool and now it can be used on AMP with the help of <a href=\"https:\/\/ampforwp.com\/acf-amp\/\">ACF for AMP<\/a>. In this article, we will see an overview of the ACF for AMP plugin.<\/p>\n<p><strong>Here are the steps:<\/strong><\/p>\n<ol>\n<li>Download and Install<\/li>\n<li>Upload and Activate<\/li>\n<li>Done! The ACF for AMP will be visible on the AMP version of your site.<\/li>\n<\/ol>\n<p><span style=\"color: #800000;\"><strong>Step 1:<\/strong> <\/span>After you have downloaded and installed on your WordPress installation, you will see a new section on the left sidebar area.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/acf-for-amp-settings.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-3917\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/acf-for-amp-settings.png\" alt=\"first step\" width=\"334\" height=\"384\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/acf-for-amp-settings.png 498w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/acf-for-amp-settings-261x300.png 261w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/acf-for-amp-settings-44x50.png 44w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/acf-for-amp-settings-52x60.png 52w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/acf-for-amp-settings-87x100.png 87w\" sizes=\"(max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<h3>Overview of the Settings:<\/h3>\n<p><strong><span style=\"color: #800000;\">1.<\/span> Title:<\/strong> This is a Title area just for your own reference.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7057\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title.png\" alt=\"\" width=\"874\" height=\"106\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title.png 874w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title-300x36.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title-768x93.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title-50x6.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title-60x7.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/title-100x12.png 100w\" sizes=\"(max-width: 874px) 100vw, 874px\" \/><\/a><\/p>\n<p><strong><span style=\"color: #800000;\">2.<\/span> Location:<\/strong> Select the location where you want to display the fields. Under the Location section, there are two options.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7059\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location.png\" alt=\"\" width=\"867\" height=\"180\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location.png 867w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location-300x62.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location-768x159.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location-50x10.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location-60x12.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/location-100x21.png 100w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><\/a><\/p>\n<p>The first one &#8216;<b>Show Data on&#8217; <\/b>allows controlling the pages where the fields will display, such as Posts, Homepage, Archives or displaying it Globally.<\/p>\n<p>The second option &#8216;<strong>Where you want to show the content?<\/strong>&#8216; helps you to display the data differently the areas within the selected page (the one we selected on the first option).<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>After the Header (Global)<\/li>\n<li>Before Featured Image (Single)<\/li>\n<li>After Featured Image (Single)<\/li>\n<li>After Post Meta (Single)<\/li>\n<li>Before Post Meta (Single)<\/li>\n<li>Before Post Content (Single)<\/li>\n<li>After Post Content (Single)<\/li>\n<li>Below the Post (Single)<\/li>\n<li>Above the Footer (Sitewide)<\/li>\n<li>In the Footer (Sitewide)<\/li>\n<li>Shortcode (Manual)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7060\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode.png\" alt=\"\" width=\"1181\" height=\"222\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode.png 1181w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode-300x56.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode-768x144.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode-1024x192.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode-50x9.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode-60x11.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/shortcode-100x19.png 100w\" sizes=\"(max-width: 1181px) 100vw, 1181px\" \/><\/a><\/p>\n<p>Once you select the shortcode (manual) option shortcode meta box will be displayed from where you can copy the shortcode and paste whereever you want to place in Pages \/Post.<\/p>\n<p><strong><span style=\"color: #800000;\">3.<\/span> Conditional Logic Placement:<\/strong> This is an advanced option that allows you to handle the placement anywhere you want. You can target any page, Post type, taxonomy with the help of this. You can also add another logic which makes it more magical. This a very powerful tool to handle the views of the data.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7063\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional.png\" alt=\"\" width=\"863\" height=\"169\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional.png 863w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional-300x59.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional-768x150.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional-50x10.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional-60x12.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/conditional-100x20.png 100w\" sizes=\"(max-width: 863px) 100vw, 863px\" \/><\/a><\/p>\n<p><span style=\"color: #800000;\"><strong>4<\/strong><\/span>. <strong>PHP Editor:<\/strong> This is where you would enter your field code. Just like you have to enter a small line of\u00a0PHP code like the_field(&#8216;field_name&#8217;); to display field in ACF in the WordPress template. you need to add the same code. You can use any one of the examples mentioned in the\u00a0<a href=\"https:\/\/www.advancedcustomfields.com\/resources\/code-examples\/\" target=\"_blank\" rel=\"noopener noreferrer\">ACF documentation<\/a>.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7065\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php.png\" alt=\"\" width=\"877\" height=\"483\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php.png 877w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php-300x165.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php-768x423.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php-50x28.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php-60x33.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/php-100x55.png 100w\" sizes=\"(max-width: 877px) 100vw, 877px\" \/><\/a><\/p>\n<p><strong><span style=\"color: #800000;\">5.<\/span> AMP Javascript:<\/strong> This field is only required if you are using some special AMP markup in the PHP code editor that requires an AMP JS. An example would be &lt;amp-carousel&gt; which requires us to load the amp-carousel.js file. If you are displaying the fields normally then it&#8217;s not required at all.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7066\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript.png\" alt=\"\" width=\"888\" height=\"295\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript.png 888w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript-300x100.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript-768x255.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript-60x20.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/09\/ampjavascript-100x33.png 100w\" sizes=\"(max-width: 888px) 100vw, 888px\" \/><\/a><\/p>\n<h3>Code Examples<\/h3>\n<p>Here are some examples of code which you can use in the PHP Editor. Please note that these examples are for demo purpose, if you copy and paste them then it doesn&#8217;t Auto-Magically starts to display the\u00a0fields, you would have to actually use the right field ID.<\/p>\n<p><strong><span style=\"color: #800000;\">1.<\/span> Display a field<\/strong><\/p>\n<pre class=\"lang:default decode:true \">&lt;p&gt;&lt;?php the_field('field_name'); ?&gt;&lt;\/p&gt;<\/pre>\n<p><strong><span style=\"color: #800000;\">2.<\/span> Retrieving a field as a variable<\/strong><\/p>\n<pre class=\"lang:default decode:true \">&lt;?php\n\n$variable = get_field('field_name');\n\n\/\/ do something with $variable\n\n?&gt;\n<\/pre>\n<p><strong><span style=\"color: #800000;\">3.<\/span>\u00a0Using conditional statements<\/strong><\/p>\n<pre class=\"lang:default decode:true \">&lt;?php\n\nif(get_field('field_name'))\n{\n\techo '&lt;p&gt;' . get_field('field_name') . '&lt;\/p&gt;';\n}\n\n?&gt;<\/pre>\n<p><strong><span style=\"color: #800000;\">4.<\/span>\u00a0Working with Array values (checkbox, select, relationship, repeater)<\/strong><\/p>\n<pre class=\"lang:default decode:true\">&lt;?php\n\n$values = get_field('field_name');\nif($values)\n{\n\techo '&lt;ul&gt;';\n\n\tforeach($values as $value)\n\t{\n\t\techo '&lt;li&gt;' . $value . '&lt;\/li&gt;';\n\t}\n\n\techo '&lt;\/ul&gt;';\n}\n\n\/\/ always good to see exactly what you are working with\nvar_dump($values);\n\n?&gt;<\/pre>\n<p><strong><span style=\"color: #800000;\">5.\u00a0<\/span>Working with the Repeater Field<\/strong><br \/>\nrepeater can be accessed by get_field or the_repeater_field \/ the_sub_field<\/p>\n<pre class=\"lang:default decode:true \">&lt;?php if( have_rows('repeater_field_name') ): ?&gt;\n \n    &lt;ul&gt;\n \n    &lt;?php while( have_rows('repeater_field_name') ): the_row(); ?&gt;\n \n        &lt;li&gt;sub_field_1 = &lt;?php the_sub_field('sub_field_1'); ?&gt;, sub_field_2 = &lt;?php the_sub_field('sub_field_2'); ?&gt;, etc&lt;\/li&gt;\n        \n        &lt;?php \n        \n        $sub_field_3 = get_sub_field('sub_field_3'); \n        \n        \/\/ do something with $sub_field_3\n        \n        ?&gt;\n        \n    &lt;?php endwhile; ?&gt;\n \n    &lt;\/ul&gt;\n \n&lt;?php endif; ?&gt;\n<\/pre>\n<div class=\"hkb-article__content\">\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<\/div>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">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<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>ACF is a powerful tool and now it can be used on AMP with the help of ACF for AMP. In this article, we will see an overview of the ACF for AMP plugin. Here are the steps: Download and Install Upload and Activate Done! The ACF for AMP will&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[105],"ht-kb-tag":[106],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3916"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=3916"}],"version-history":[{"count":16,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3916\/revisions"}],"predecessor-version":[{"id":7069,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3916\/revisions\/7069"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=3916"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=3916"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=3916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}