ACF Pro

[cs_content][cs_section parallax=”false” separator_top_type=”none” separator_top_height=”50px” separator_top_angle_point=”50″ separator_bottom_type=”none” separator_bottom_height=”50px” separator_bottom_angle_point=”50″ style=”margin: 0px;padding: 3% 0% 0%;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/6″ style=”padding: 0px;”][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Pro.png” alt=”ACF Pro” link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”5/6″ style=”padding: 0px;”][x_custom_headline level=”h2″ looks_like=”h2″ accent=”false” class=”r8 mtm mbn” style=”font-weight: 700;”]ACF Pro[/x_custom_headline][x_custom_headline level=”h3″ looks_like=”h3″ accent=”false” class=”r5 mtn” style=”color: hsl(0, 0%, 47%);font-weight: 300;”]Premium Third Party Integrated Extension[/x_custom_headline][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” separator_top_type=”none” separator_top_height=”50px” separator_top_angle_point=”50″ separator_bottom_type=”none” separator_bottom_height=”50px” separator_bottom_angle_point=”50″ style=”margin: 0px;padding: 10px 0% 0%;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 10px 0px;border-style: solid;border-width: 1px 0px;border-color: hsl(0, 0%, 20%);”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h4″ looks_like=”h5″ accent=”false” class=”man” style=”font-size: 1.0em;”]Last updated: September 26, 2017 at 15:05 pm[/x_custom_headline][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” separator_top_type=”none” separator_top_height=”50px” separator_top_angle_point=”50″ separator_bottom_type=”none” separator_bottom_height=”50px” separator_bottom_angle_point=”50″ style=”margin: 0px;padding: 3% 0%;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h3″ looks_like=”h3″ accent=”false” class=”cs-ta-left r7 mtn” style=”color: hsl(0, 0%, 0%);font-weight: 900;letter-spacing: 0.02em;”]OVERVIEW[/x_custom_headline][cs_text class=”cs-ta-justify” style=”font-weight: 400;”]ACF Pro is one of the most powerful tools available for WordPress that both developers and non-developers are sure to love! This plugin allows you to create custom fields for any post type with a vast array of display options, which you can pull through on the frontend. When adding a new field you’ll be met with the form to create and name your field.[/cs_text][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” separator_top_type=”none” separator_top_height=”50px” separator_top_angle_point=”50″ separator_bottom_type=”none” separator_bottom_height=”50px” separator_bottom_angle_point=”50″ style=”margin: 0px;padding: 0%;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h3″ looks_like=”h3″ accent=”true” class=”cs-ta-left r7 mtn” style=”color: hsl(0, 0%, 0%);font-weight: 500;”]Getting Started[/x_custom_headline][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” class=”cs-ta-center” style=”margin: 0px auto;padding: 20px 0px 50px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/2″ style=”padding: 0px;”][cs_text class=”cs-ta-justify”]Make sure you already have ACF Pro installed and then in your Admin area, you should see the ACF Pro menu item like this >>>[/cs_text][cs_text class=”cs-ta-justify”]Go ahead and click on the Custom Fields menu item. This will take you to the main overview of ACF Pro.[/cs_text][/cs_column][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/2″ style=”padding: 0px;”][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Pro-Admin-Link.png” alt=”ACF-Pro-Admin-Link” link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” separator_top_type=”none” separator_top_height=”50px” separator_top_angle_point=”50″ separator_bottom_type=”none” separator_bottom_height=”50px” separator_bottom_angle_point=”50″ style=”margin: 0px;padding: 0%;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h3″ looks_like=”h3″ accent=”true” class=”cs-ta-left r7 mtn” style=”color: hsl(0, 0%, 0%);font-weight: 500;”]Field Groups[/x_custom_headline][cs_text class=”cs-ta-justify”]The first thing you’ll see on the main ACF Pro overview is Field Groups these field groups are what ACF uses to group fields you create for use in your theme, child theme, template or plugin.[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/Field-Groups-Extensions-Help-Doc-2.png” alt=”Field Groups Extensions Help Doc 2″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text class=”cs-ta-justify”]As you can see we already have a field group that we’ve setup earlier, let’s explore that to see what’s going on and how we can utilize ACF to add an About Author metabox to our single post template.

Here’s our basic field group layout:[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Field-Group-Extension-Help-Doc-3.png” alt=”ACF Field Group Extension Help Doc 3″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text]There’s a lot going on here so let’s split it down one by one. First we have our rules, these are the basic rules of how our fields in this sepcific field group will display. For example in the field group we’ve created, we have it checked to show this field group if the post type is equal to post. Which means if for example you are on a portfolio item the field group won’t be displayed.

We could expand on the field group display rule and add multiple other conditions, how you add these conditions is an important part of ACF Pro. There are two options both and as well as Add Rule Group.[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Add-Or-And-Extensions-Help-Doc-4.png” alt=”ACF Add Or And Extensions Help Doc 4″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text]Option 1 And allows you to add an additional rule in addition to the first rule that must be matched with the first one to display the field group. This is both useful and powerful with ACF. In this example say if we had a magazine style website. We may not want our Author field group to display on all categories, just our regular blog. So if we had a category called blog in ACF Pro we can then set Post Taxonomy is equal to Blog.

With that set our field group would then look like this:[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Conditions-Matched-Extensions-Help-Doc-5.png” alt=”ACF Conditions Matched Extensions Help Doc 5″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text]This now means that our Field Group will only show if the post type is post and if the post taxonomy is Blog. If only one of these conditions is matched it means the Field Group won’t display.

But what about if you wanted it to show if either of those conditions was matched?

Option 2: Add Rule Group allows you to add an additional rule group to the Field Group this is a Or conditional rather than an And conditional, meaning that if either condition A or condition B is met display the Field Group where both Field Group rules don’t have to be met to display the field group.

So if we set this value to Post Taxonomy is equal to Blog our Field Group would then look like this:[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Either-Conditions-Matched-Extensions-Help-Doc-6.png” alt=”ACF Either Conditions Matched Extensions Help Doc 6″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text]This now means that our Field Group will display if either the post type is a post or if the post taxonomy is set to Blog. Which means if you had the blog taxonomy on another post type the Field Group would still display, whereas with option 1 if wouldn’t have displayed as both conditions had to be matched.

Field Group displays are an extremely powerful part of ACF Pro and allow you to achieve near limitless display options.

The remaining options for the Field Group settings are:

  • Status
  • Style
  • Position
  • Label Placement
  • Instruction Placement

What’s important to note about all these option is that they are for the Field Group within the wp-admin Not how the Field Group will display in your theme.

For example if you set the position to Normal (after content) your Fields within the Field Group will then display at the bottom of the page/post you’ve configured your Field Group to show on. Like this:[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Admin-After-Content-Extensions-Help-Doc-7.png” alt=”ACF Admin After Content Extensions Help Doc 7″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ class=”cs-ta-center” style=”padding: 0px;”][cs_text class=”cs-ta-left”]However if we change that to show at the side, our fields within the Field Display group will then show at the side like this:[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Admin-Side-Content-Extensions-Help-Doc-8.png” alt=”ACF Admin Side Content Extensions Help Doc 8″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][cs_text class=”cs-ta-left”]Once you’re happy with your Field Group go ahead and save it.[/cs_text][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h3″ looks_like=”h3″ accent=”true” class=”cs-ta-left r7 mtn” style=”color: hsl(0, 0%, 0%);font-weight: 500;”]Adding Fields[/x_custom_headline][cs_text]On your Field Group click on Add Field:[/cs_text][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” class=”cs-ta-center” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Add-Field-Extensions-Help-Doc-9.png” alt=”ACF Add Field Extensions Help Doc 9″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text]You’ll then see a range of Field options like this:[/cs_text][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” class=”cs-ta-center” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Field-Options-Extensions-Help-Doc-10.png” alt=”ACF Field Options Extensions Help Doc 10″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text]As you can see there are a variety of options you can fill in for each field, the options will change depending on the field type you have selected, so make sure you have selected the Field Type before filling in the Field Options.

First of all give your field a name, for the purpose of this article as we’ve already mentioned, we’re adding an About Author section to our blog posts.

The Field Label will be the name of the field as it appears on the edit page of the post type that your Field Group is set to display for.

The Field Name is what you will use in your theme, child theme, template or plugin to retrieve the field value so don’t make it something too complex. In this case we’ve gone for about_author, it can have underscores or dashes but no spaces are allowed.

Field Type, there are a huge range of options from a simple text area to Wysiwyg editors and much much more.[/cs_text][x_image type=”none” src=”https://formulawp.com/wp-content/uploads/ACF-Field-Types-Extensions-Help-Doc-11.png” alt=”ACF Field Types Extensions Help Doc 11″ link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=”” class=”shadow”][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][cs_text]Field Instructions, these are the instructions shown to your other admins, editors, authors and anyone else who has access to the edit of the post type your field group is set to display for.

Required, whether the field itself should be required to be filled in or not, if the field is set to required and isn’t filled in an error will be shown on trying to publish/update. As we don’t want an empty author bio on our page we’re going to set this to required.

Default Value Here you can an enter a default value to be used when creating a new post.

If you select the Wysiwyg option, you’ll see a couple of other options.

With these options you can select if with the WYSIWYG editor if both the Visual and Text options should be available or just one or the other along with if you want to show the media upload buttons for your custom field.

Once you’re happy with everything click on Update/Save.[/cs_text][/cs_column][/cs_row][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 2% 0px 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h3″ looks_like=”h3″ accent=”true” class=”cs-ta-left r7 mtn” style=”color: hsl(0, 0%, 0%);font-weight: 500;”]Displaying Your Field[/x_custom_headline][cs_text]Now you have a field added and a field group created, but what about actually outputting the field value within the theme? As we’ve created an about author field we want it to display above the Leave a Comment section of our single post template on our selected Stack Ethos. (This would be done the same way for whichever Stack you are using — Integrity, Ethos, Icon, or Renew.)

Now with your FTP or SFTP program such as Coda, Filezila, Cyberduck etc log in via FTP/SFTP and navigate to wp-content/themes/x-child and create the following folder at this exact path: framework/views/ethos/wp-single.php[/cs_text][cs_text]This is the template that is responsible for outputting the single post template of the Ethos stack. Copy the contents of that file from the parent theme at wp-content/themes/x/framework/views/ethos/wp-single.php. The code should look like this:[/cs_text][x_code]