23
Jun
2016

How Advanced Custom Fields Can Improve the Administrative Experience in WordPress

by Clifton Canady, Developer
Content Content Management News & Notes Website Design
SHARE

WordPress is one of the most used web design platforms in the world today, powering approximately 25% of all websites on the internet. But there is a general belief that clients don’t want to use it or feel that they can’t. Despite its many strengths, WordPress is often seen by many as hard to use or too confusing. As web designers and web developers, we can make it much easier for them by customizing the admin pages and posts. In this article, I want to show you how you can use several different plugins and some custom code to make it a great experience for your clients.

What Are Custom Fields?

When WordPress 3.0 was launched in 2010, custom fields were introduced. These custom fields allowed you to store random pieces of information inside of a WordPress post, page, or content type. It is one of the most powerful aspects of WordPress posts and post types. You can use these in a variety of ways by implementing the following code into your theme code:


<?php the_meta(); ?>

Custom-Fields-Example

 

What Is An Advanced Custom Field?

An Advanced Custom Field is a free GUI (graphical user interface) plugin made for WordPress developers. This plugin allows you to simply and intuitively create custom fields to take full control of your admin area and what gets displayed on your website or applications. You can find excellent Advanced Custom Field plugin documentation using the following links:

Advanced Custom Field Website

WordPress.org

How to Create Field Groups Using Advanced Custom Fields

The first thing you need to know when using Advanced Custom Fields is how to create a field group. There are three important sections for you to consider:

  1. Title and Custom Fields – this section of the field group is where you will be able to add a title and create the actual fields.
  2. Field Group Location – this section of the field group lets you determine where you want the fields to show up. When creating location rules, you can combine rules with the and/or statement.
  3. Field Group Settings – for each field group there are several settings that you can use to change the way field groups will appear on a post, page, or custom post type.

There are several types of fields you can use when using Advanced Custom Fields:

  • Basic Field: text, text area
  • Choice Field: checkbox, select, true/false
  • Content Fields: file, gallery, image, embed, WYSIWYG editor
  • Jquery Fields: color picker, date picker, date/time picker, Google map, time picker
  • Layout Fields: flexible content, repeater, tab
  • Relational Fields: page link, post object, relationship, taxonomy

In order for everything to appear the way you want it, you have to rename the actual field name in order to designate it for the appropriate application. Here are a couple of code examples for displaying designated fields:

the_field


<?php the_field('field_name'); ?>

 

get_field


<?php $field = get_field('header_image'); ?>

<div class="header">;
     <img src="<?php echo $field; ?>" />
</div>

Helpful Advanced Custom Field Plugins and Resources

There are many things that you, as a web designer/developer, can do using Advanced Custom Fields. When designing a website, you want to make the admin section simple to navigate. Along with Advanced Custom Fields, there are several plugins for customizing the admin area. Here are just a few of our favorite choices:

Plugins:

Resource Links: