Advanced Custom Fields Archiving Solution

By January 5, 2014 Design, Programming, Recipes No Comments

For those of us who work with WordPress, the ACF (Advanced Custom Fields) plug-in is a versatile tool that provides ease of use when it comes to managing custom data. In a nutshell: create custom field types, add and define fields, and provide your clients with intuitive admin interfaces so they can manage their data quicker and easier.

Sounds simple enough. While the plug-in simplifies much of the process of creating complex interfaces and content solutions, there is a learning curve with using them to create custom WordPress templates. If you’re the new kid on the block you should be prepared for a bit of trial-and-error, as well as some time spent on research.

acf1Recently ABD Web Design was involved with a project that utilized the ACF plug-in as a solution for a variety of customizations on our client’s real estate website. Today I’d like to present to you a real world situation/tutorial that describes using the ACF plug-in for a property listing solution. While bringing our clients vision to life we discovered that the documentation for using the ACF plug-in as an archive solution was somewhat sparse, if not poorly documented, for those of you whom may be cutting your teeth for the first time.

A Quick Project Overview

acf2_

Our client requested a number of custom solutions for their real estate website. The home page was to present an image slider featuring the main image of each available properties. These images would link to individual property pages that provided further information: an image gallery slider, cost, square footage, Google map, etc.

The homepage slider would also present a link to a property listing page that presented all of the client’s properties in excerpt: A thumbnail image of the property, general info, and links to their individual detail pages.

acf3

Our solution: Utilize the ACF plug-in. We would create a custom property field type and from a single interface the client would be able to enter the property information. This information would then populate the homepage slider, the property listings page, and the property details pages

The Focus: The Property Listings Page.

As you can see from the overview, the property listings page works as a WordPress archive, meaning that it uses the built-in functionality that WordPress already provides for blog post listings: listing out excerpts and linking to the full posts. Originally when we started building out this solution, we were going down the path of creating a wholly separate listings page template and executing an ACF relationship with a property details page template. After getting into it though, it became evident that  using the built-in muscle that WordPress already provides within the archive and single structure was the right direction to proceed.

The Solution:

First, no matter what you are creating with the ACF plug-in, you will need to register and define your custom post-type. For instance, our ACF post-type was ‘property’.  We created a ‘property_posttype.php’ file and added our custom post type function. You can see examples and read about that here.

After registering our custom post-type we defined the theme path in our functions file.

define('THEME_PATH', dirname(__FILE__));
require_once(THEME_PATH. '/property_posttype.php');

Now we’re ready to knock this out.

1.  For our Property listings page we create an ‘archive-property.php’ file. In this file we ensure we pick up our property post type. We create an $args array to do this. You can include any extra values specific to your needs. For simplicity I’m only displaying the post-type value and key.

//Pick up the Property
$args = array(
'post_type' => 'property',
);

2.  We include the above array in a new WP_Query that we will include in the loop.

3.  We define our property fields with variables to simplify displaying our fields from the ‘property’ post-type. The ACF plug-in provides a simple, built-in solution for retrieving our fields.

ex.

//defining our variables
<?php
$thumbnail = wp_get_attachment_image_src(get_field('main_property_image'), 'thumbnail');
$propertyTitle = the_title('','',false);
$forSale = get_field('for_sale_rent');
etc, etc
?>

4.  Then we just call our fields in the appropriate locations. For those locations in our property listings that will need to connect to the “details” page, we simply add the permalink.

ex.

<div class="prop_list_thumb">
<a href="<?php the_permalink()?>"><img src="<?=$thumbnail[0]?>"/></a>
</div>

5.  Almost there. Now we have to create the single instance for the archive-property.php template so that when a visitor selects a property it correctly locates them at that properties details page. It’s simple: We create single-property.php.

6.  Now just set up your single-property.php. template in the manner you would like it to display.  No need to pick up the property as we did in step 1. Also, unless you need otherwise, you can use the standard WordPress loop here as well.  Be sure to define the necessary fields you need as we demonstrated in step 3.

The Wrap

The ACF plug-in is a versatile tool that allows for unique solutions and customizations when it comes to your WordPress projects. The above example, while simplified for this post, illustrates one possibility and one solution. One important lesson, as my developer learned, is to always utilize the built-in muscle that comes baked right into WordPress. For our situation, utilizing the template hierarchy was the answer. What’s that old adage? Oh, right: Keep It Simple, Stupid.