A Sneak Peak on Utilizing Advanced Custom Fields in WordPress

by Amy Brown in Tutorials / wordpress on 02 Jan 2015


WordPress provides its users enough options and facility to assign custom fields to the content they write. This additional information is known as meta data. In WordPress, Advanced Custom Fields is being used to allow users to give their post a personal touch by making them easy to customize and edit. These fields can be extended to include some advanced features to make content more flexible with the help of Advanced Custom Fields.

Advanced Custom Fields (ACF) comes packed with a great deal of features which you can easily use in your theme to fetch the related values of the meta fields. Using an ACF field will result in the deactivation of the ACF plugin, which will further increase the chances of showing the white screen of death error. Secondly, if you go on wrapping all the ACF functions in functions_exit (), although the site will load but none of your meta boxes will be shown.

Screen Shot 2015-01-02 at 13.36.23

In WordPress, the meta data resides under the database. Using WordPress core functions will provide none of the changes on the frontend of the website. And on the backend, there would be no availability of the meta boxes, hence it would become difficult for the user to perform file editing.

However, this is something which could be achieved easily in simple fields, but webmasters mostly struggle hard when it comes to the complex fields. In this post, I will show you some examples on which Advanced Custom Fields is used as well as tutorial on how to create custom fields from scratch.

1. Creating Repeater Field

If your theme provides support for integrating a considerable amount of videos. One can make use of the repeater field which includes Title, Video URL and Thumbnail.
Now, look at the repeater field in your theme, and run ( get_post_meta( get_the_ID(), ‘be_attorney_video’, true );), As soon as you run the command, you’ll be provided with a number of items belonging to that particular theme. You can now run the Loop function and access all the items of the field. By inserting the below mentioned code, you can easily organize all the videos.

<?php
$videos = get_post_meta( get_the_ID(), 'be_attorney_video', true );
if( $videos ) {
 for( $i = 0; $i < $videos; $i++ ) {
 $title = esc_html( get_post_meta( get_the_ID(), 'be_attorney_video_' . $i . '_title', true ) );
 $video = esc_url( get_post_meta( get_the_ID(), 'be_attorney_video_' . $i . '_video', true ) );
 $thumbnail = (int) get_post_meta( get_the_ID(), 'be_attorney_video_' . $i . '_thumbnail', true );
 // Thumbnail field returns image ID, so grab image. If none provided, use default image
 $thumbnail = $thumbnail ? wp_get_attachment_image( $thumbnail, 'be_video' ) : '<img
 src="' . get_stylesheet_directory_uri() . '/images/default­video.png" />';
 // Displayed in two columns, so using column classes
 $class = 0 == $i || 0 == $i % 2 ? 'one­half first' : 'one­half';
 // Build the video box
 echo '<div class="' . $class . '"><a href="' . $video . '">' . $thumbnail . '</a>' . $title .
 '</div>';
 }
}

Using the above snippet, one also easily analyze the usage of ACF image fields. Here, the ID of the related image is stored and can be accessed running the wp_get_attachment_image( $image_id, ‘image_size’ ); command.

2. Content Flexibility

The level of content flexibility determines the extent of creating multiple layouts with different styles without losing control over the order. The flexible content field makes it easy for you to create an unlimited number of sub fields ( layouts), which further enable you to add them into your field as per your requirements.

This is how we can add flexible content fields can be added:

Screen Shot 2015-01-02 at 13.36.48

<?php

/**
* Your Child Theme
*
* Template Name: Landing
*/

/**
* Flexible Content
*
*/
function be_landing_page_content() {
$rows = get_post_meta( get_the_ID(), 'be_content', true );
foreach( $rows as $count => $row ) {
switch( $row ) {

// Full Width Content layout
case 'full_width_content':
$title = esc_html( get_post_meta( get_the_ID(), 'be_content_' . $count . '_title', true ) );
$content = get_post_meta( get_the_ID(), 'be_content_' . $count . '_content', true );

echo '<div class="flex-content full-width-content"><div class="wrap">';
if( $title )
echo '<h2>' . $title . '</h2>';
if( $content )
echo '<div class="section-content">' . apply_filters( 'the_content', $content ) . '</div>';
echo '</div></div>';
break;

// Content with Image layout
case 'content_with_image';
$title = esc_html( get_post_meta( get_the_ID(), 'be_content_' . $count . '_title', true ) );
$content = get_post_meta( get_the_ID(), 'be_content_' . $count . '_content', true );
$image = get_post_meta( get_the_ID(), 'be_content_' . $count . '_image', true );

echo '<div class="flex-content content-with-image"><div class="wrap">';
if( $title )
echo '<h2>' . $title . '</h2>';
if( $image )
echo '<div class="section-image">' . wp_get_attachment_image( $image, 'medium' ) . '</div>';
if( $content )
echo '<div class="section-content">' . apply_filters( 'the_content', $content ) . '</div>';
echo '</div></div>';
break;
}
}
}
add_action( 'be_content_area', 'be_landing_page_content' );

// Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array( 'header', 'footer-widgets', 'footer' ) );

// Build the page
get_header();
do_action( 'be_content_area' );
get_footer();

In the above lines, you can see the ‘be_content’ meta field. It’s the same field which gives you a myriad of layout related options to be used on the page in an order. Each of the fields related to the layout will be stored into their related field. So, if you are using the field name ‘title’ and it appears in the first layout of the page, it will be stored as ‘be_content_0_title’.

3. Creating Options Pages

The Metaboxes which we add to the options page accepts data as options rather than post data. You will present it like meta_key, and prefixed with ‘options_’. So, if we create an option for Call to Action, the fields will be accessed this way:

<?php
function be_call_to_action() {
 $title = esc_html( get_option( 'options_be_cta_title' ) );
 $button_text = esc_html( get_option( 'options_be_cta_button_text' ) );
 $button_url = esc_url( get_option( 'options_be_cta_button_url' ) );
 if( $title && $button_text && $button_url )
 echo '<div class="call-to-action"><div class="wrap"><p>' . $title . '</p><p><a href="' . $button_url . '" class="button">' . $button_text . '</a></p></div></div>';
}
add_action( 'genesis_before_footer', 'be_call_to_action' );

4. Adding Subtitle

For adding the subtitle field to the categories the following format will be used: [taxonomy]_[term_id]_[field name].

Now, the field name would be ‘be_subtitle’, to access it the below mentioned command will be used.

<?php
/**
* Category Subtitle
*
*/
function be_category_subtitle() {
// Make sure this is a category archive
if( ! is_category() )
return;
$category = get_term_by( 'slug', get_query_var( 'category_name' ), 'category' );
$subtitle = esc_html( get_option( 'category_' . $category->term_id . '_be_subtitle' ) );
if( $subtitle )
echo '<p class="subtitle">' . $subtitle . '</p>';

}
add_action( 'genesis_before_loop', 'be_category_subtitle' );

Custom post types are an awesome feature of WordPress that helps you create wonders within your website. And. To make the most out of it, Advanced custom fields should be realized and created as an integral part of your workflow.

Written by Amy Brown

Amy Brown is a WordPress developer by profession, a writer by hobby and works for WordPrax Ltd. , a WordPress CMS development services provider. She loves sharing information regarding WordPress customization tips & tricks.

Amy Brown has written 1 posts.