Using Advanced Custom Fields in WordPress Templates

Advanced Custom Fields is a WordPress plugin that makes it easy to add additional fields to Pages or Posts in WordPress. This is especially helpful for complex layouts, so you can separate the content from the markup. By separating the markup from the content, you make it easier for clients to update their own content in the future, without risking them inadvertently changing or deleting code that is important for the layout.

• Set Up and Add Advanced Custom Fields
• Add Your Custom Fields to you Template File

A modern, user-friendly website can boost your online engagement and help build your business. Contact our professional web design team today for a beautiful, custom WordPress website.

Set Up and Add Advanced Custom Fields in the Dashboard

1. Install Advanced Custom Fields like you would any other plugin (Add Plugins > search, or Add Plugins > Upload Plugin). 
2. Create a Field Group (Custom Fields > Add New); give your group a name, and add one or more fields to your new group. Read more details on the various field types. (some field types like the repeater, the gallery, and the flexible content field are only available in the pro version). Take note of each field name, you will need this later when you add the field to your template file. 
3. Set your location (this is where your fields will appear in the WordPress dashboard). This can be based on one or more rules, and can be as simple as the page name or page template. 
4. Click the blue Publish button near the upper right to save your changes. 
5. Edit the Page (or Post) you have set the custom fields to appear on and add your content. 

Add Your Custom Field(s) to your Template File

1. If you are working in the Home page, you will already have a page template for this page (named page-home.php). If you are working on a different page, make a copy of the respective page template you want to base your new template on, and name the copy to something like (page-about.php). Make sure you change the name of the template in the comments at the top of the file. 
2. Set up whatever divs (including classes or ids) you need to control the layout of your content. 
3. Add the code to pull in your field. This example pulls content from a text or WYSIWYG field (replace field_name with your correct field name):

   // Displays an ACF field, replace field_name with your field name
   <?php the_field('field_name'); ?>

   This example pulls in an image from an image field (replace image_field with your correct field name)

   // Displays an ACF image field, replace image_field with your field name
   <?php echo $image['alt']; ?>
   

   Review more code examples and info on displaying ACF values in your theme.

4. Add the necessary CSS to your style sheet to style your newly added fields.

Tips

Stray <p> Tags

When using the WYSIWYG field in ACF, you have probably noticed <p> tags being automatically added to the content of that field, and often in the wrong place.

To turn off wpautop (the function that automatically adds <p> tags) on ACF fields add this to your functions.php file:

// Turn off wpautop on ACF fields
remove_filter ('acf_the_content', 'wpautop');

To remove stray <p> tags when using shortcodes in the ACF WYSIWYG, but keep other paragraph tags, add this to your functions.php file:

/* 
 * Remove stray 
 tags when adding shortcodes in ACF WYSIWYG, 
 * while keeping other paragraph tags
*/
function wpex_clean_shortcodes($content){ 
    $array = array ( '[' => '[', ']' => ']', ']' => ']' ); 
    $content = strtr($content, $array); return $content; 
} 
    
add_filter('acf_the_content', 'wpex_clean_shortcodes');

Select the Correct Page or Template

Make sure you have selected the correct page or template in Location when creating or editing an ACF Field Group. For instance, the Home page will in most cases use the Home page template, so you can customize it as needed. If selecting the page name in the location doesn’t work, change the location settings to the page template and make sure your page has the correct template assigned to it.

Please note: When you copy the code from these areas, that they will properly indent and each line will have the correct format when you paste it into your code editor program.

For more tutorials and information on how to customize your website or get started with the design process, please check our Web Design Services channel!