WordPress: Custom Post Types & Advanced Custom Fields

by on January 26, 2014

WordPress: Custom Post Types & Advanced Custom Fields

  •  
  •  
  •  
  •  

You can use “Custom Post Types” and allow WordPress as a full on ripping and roaring Content Management System.

But even with a new custom post type, WordPress generally only offers some pretty basic options as far as ‘fields’ that you can include in the theme. So your stuck with the problem of just giving the client your creating the site for with a one WYSIWIG editor for the page, and can allow them to easily add content on different parts of the page easily without code. We can amp up the functionality of WordPress with the use of Custom Post Types and “Advanced Custom Fields.”

Native Custom fields in WordPress can be added by clicking “Screen Options” and ticking “Custom Fields” at the top of a page or post.

Custom Fields , Mpls, mn, WordPress Custom Designs design minnesota

Then choose a custom field at the bottom of a post.

Native Custom Fields in WordPress

But let’s try a different route so that we can do much more ultimately.

Let’s start by creating a Custom Post Type

Option 1: Scott Clark’s Pods
Option 2: Brad Williams’ Custom Post Type UI
Option 3: Let’s get into the code.

Rather than go to functions.php, we make a custom plugin, so the theme could change and the site could undergo a redesign and the custom post type remains.

Here’s an article on that: WordPress Custom Post Types Debate — Functions.php or Plugins?.

Let’s create a plugin called MN Web Design Meetup that’s going to organize meetup events as custom posts

<?php
/*
Plugin Name: MN Web Design Meetup Custom Post Types
Description: Custom Post Types for "The MN Web Design Meetup" website.
Author: Tim Brown
Author URI: https://timbdesign.com
*/

add_action( 'init', 'msp_blog_cpt' );

function bookworm_blog_cpt() {

register_post_type( 'book', array(
  'labels' => array(
    'name' => 'Meetups',
    'singular_name' => 'Meetup',
   ),
  'description' => 'Meetups and their details to be featured on the site.',
  'public' => true,
  'menu_position' => 20,
  'supports' => array( 'title', 'editor', 'custom-fields' )
));
}

Here in this method, I will turn to Advanced Custom Fields for giving our custom post types unique editing fields on the backend.

Advanced Custom Fields: Download it on your WordPress instance and install it

Download and install that from here, or search for it in Plugins within your WordPress instance.

Create an Advanced Custom Field or several

ACF offers a full range of field types you can use in your CPT, including simple text fields, a WYSIWYG editor, image, file upload, and more.

Advanced Custom Fields can be anything from an image, a WYSIWYG editor, any kind of text field you might want, and you can make many of them, to serve up to your client on the back end, and then you incorporate them into your them with a little piece of code. Here is an example, I want a custom field that is a “3 Sentence Brief” for the top of the page, and I incorporate it in the theme files raw code as  the_field( 'field_name' ).

Custom WordPress Web Design in Minneapolis

This way I can bypass putting code into the WYSIWYG editor that we give a client

Isn’t that why they want a site built on a CMS in the first place?
By being able to style that piece the_field( 'field_name' ) separately in the theme, we can tap some serious power with WordPress. Whether it’s your favorite Blog engine turned CMS, or if you have to reluctantly use it for some clients who’s sites are built on WordPress while preferring another, being familiar with Custom Post Types and Advanced Custom Fields will be very helpful.

Sources:
WP Beginner – WordPress Custom Fields 101
Treehouse Blog: ACF & CPT’s the Right Way
Perishable Press – Custom Fields


  •  
  •  
  •  
  •  
Free Web Design Audiobook

Ready to get started?

Get a free consultation now