WordPress has the ability to harness Custom Post Types and Custom Fields, which are two very powerful advanced tools able to work together to provide some extremely useful features to a website. They can be a little tricky to master, so we have created a simple-to-follow tutorial to get them working together in harmony…

Already know what Custom Post Types and Custom Fields are? Skip to the tutorial.


What is a Custom Post Type?

By default, there are two main Post Types in WordPress: Posts and Pages:

  • Posts are generally blog posts which are dated and allow comments;
  • Pages are usually static content webpages.

Both Posts and Pages are accessed from the left hand menu within the WordPress editor.

Posts and Pages side links in the WordPress editor

When either the Posts or Pages left sidebar links are followed within the editor, a list of all Post Items within these sections are displayed.

List of Posts within the WordPress editor

Sometimes, the nature of your website’s content means that you need more flexibility in how it displays to what WordPress offers by default, and this is where Custom Post Types come in.

New Post Types will also display in the left hand links bar within the WordPress editor (unless otherwise specified) and can have a completely different function to the standard Posts and Pages.

Uses of Custom Post Types

Uses of Custom Post Types can stretch as far as your imagination and project requirements, but here are a couple of simple examples:

  • If we were running a bakery website, we could have a Post Type called ‘Cakes‘ containing Post Items for different types of cakes (e.g. one for scones, one for carrot cake, one for chocolate fudge cake, etc.), each containing information about that particular item (price, description, colour, size, etc.), which could then all be pulled through to a webpage acting as a menu;
  • Or, if we were running a website selling used cars, we could have a Post Type called ‘Used Cars‘ containing Post Items for all of the cars available for sale. These could be dynamically output onto a webpage where people could view specifications and photos pertaining to individual cars, and go through to enquire about and buy them.

How are Custom Post Types created?

The easiest way to go about creating Custom Post Types is to install the  Custom Post Type UI plugin onto your WordPress build. I’ll be covering how to use this to create and manipulate Custom Post Types shortly.


What are Custom Fields?

Within a standard edit Page for a WordPress Post or Page, there are a few main content areas which are available by default:

  1. Page title
  2. Permalink
  3. Main content area
  4. Featured image

Default post fields in the WordPress editor

By installing the ACF Advanced Custom Fields plugin, we can add various other fields of our choosing to any type of Post Page, including Custom Post Types. For example:

  • A secondary content area;
  • A specialised image area;
  • A dropdown field with choices to select a background colour for the webpage.

The choices are pretty much endless, and we shall be touching on some of their uses in the next section.


Tutorial: Custom Fields and Custom Post Types working together

Enter the Fluffy Kittens

For an example scenario, I am running a cat café called ‘Fluffy Kittens Café‘ (life goal right there). I want to have a central repository of cats available which I can pull into a webpage I can display to the public. So, when a visitor pops by to visit the website, they can see which cats they can play with that day whilst enjoying their coffee.

Fluffy Kittens

I am going to be showing two ways with which this can be achieved:

  • Option 1: Display all cats at the café on a webpage;
  • Option 2: Have the ability to choose which cats to display on a webpage, so if certain cats require a day off to chill out, they can be hidden from public view.

Initial steps

The first thing that must be done is to install and activate the Custom Post Type UI and ACF Advanced Custom Fields plugins on your WordPress build.

Create the Custom Post Type
  1. Create a new Custom Post Type by hovering over the ‘CPT UI‘ link in the left hand links bar of the WordPress editor and follow the link to ‘Add/Edit Post Types‘.
    Custom Post Types UI menu
  2. Select the ‘Add New Post Type‘ tab to fill in the fields for our new Custom Post Type called ‘Fluffy Kittens‘ (see example below) Make a note of the ‘Post Type Slug‘, as we are going to reference this later.
    Creating a new Custom Post Type in WordPress using the CPT UI plugin
  3. Click the ‘Add Post Type‘ button to save the new Custom Post Type.
  4. There should now be a new ‘Fluffy Kittens‘ link in the left hand bar of the WordPress editor. Once accessed, this will go through to an empty list view of Posts identical to what you would see with Posts and Pages.
    New Custom Post Type listed in the left hand menu within WordPress
Create the Custom Fields

Before we can use any Custom Fields within our Custom Post Type, we’re going to have to create them:

  1. Hover over the ‘Custom Fields‘ link in the left hand links bar in the WordPress editor and follow the link to ‘Field Groups‘.
    Custom Fields menu item in WordPress editor
  2. At the top of this screen, click ‘Add New‘ and on the following screen, give this field group a descriptive name. I’m going to name mine ‘Fluffy Kittens Custom Post Type‘.
    Creating a new Custom Field
  3. On this screen, the first thing to do is set the rules for where these Custom Fields are going to appear. We want the fields we are going to create to show up only for Posts within the ‘Fluffy Kittens‘ Post Type we just created, so within the ‘Location‘ box, add a rule group from the dropdowns; select ‘Post Type‘ ‘is equal to‘ ‘Fluffy Kittens‘.
    Custom Fields rule group selector
  4. I don’t want the main content editable area to be visible on any ‘Fluffy Kittens’ Post Items as I won’t need it, so I’m going to turn this off. Within the ‘Settings‘ box, click on the ‘Content Editor‘ check box under ‘Hide on screen‘ (do the same thing with any other default fields you won’t need – ‘Featured Image‘ could be another one).
    Hiding Content Editor within WordPress with Custom Fields plugin
  5. Now to create our Custom Fields. I’m just going to create a few simple ones – a field to upload a picture of each cat, a text box to fill in each cat’s colour and another text box for each cat’s personality.
  6. For the image Custom Field, click ‘Add Field‘ and fill in the required fields. ‘Field Type‘ needs to be set to ‘Image‘ and for simplicity, I’m going to set the ‘Return Value‘ to ‘Image URL‘. Click on ‘Update‘ when done.
    Creating an image Custom Field returning a URL
  7. For the text Custom Fields (‘Colour’ and ‘Personality’), again click ‘Add Field‘ and fill in the required fields. ‘Field Type‘ needs to be set to ‘Text‘. Click on ‘Update‘ when done.
    Creating a text Custom Field
  8. Fields can be re-ordered by clicking and dragging the numbers up and down within the ‘Order‘ column.
Create the Post Items

Now we can see how we can use these new Custom Fields within our Custom Post Type:

  1. Click on the ‘Fluffy Kittens‘ link in the left hand links bar of the WordPress editor.
  2. You will be presented with a blank Posts screen titled ‘Fluffy Kittens‘. Click ‘Add New‘ to add our first cat.
  3. You will see a title box and the Custom Field inputs we just added. No main content or featured image areas in sight (as we turned them off). I’m going to add the cat’s name in the title box, select a picture of the cat from my hard drive, and fill in the boxes for ‘Colour’ and ‘Personality’.
    Adding a Post Item to the Custom Post Type
  4. When done, click ‘Publish‘, then go back to the main ‘Fluffy Kittens‘ post list and you should see the one you just added.
  5. Repeat these steps to add as many items as you wish. I have twenty cats available at my cat café (not all shown).
    List of Post Items within a Custom Post Type

Option 1: Display all items within a Custom Post Type

This option will allow you to display all Post Items within a Custom Post Type on a webpage. So in my example case, I’ll be able to show all of the cats available at my café.

Create a new Page template

We’re going to create a new template to apply to a Page within WordPress which will show the entire list of cats:

  1. Within your theme directory, copy page.php and rename it. I have renamed mine template-fluffy-kittens-list.php;
  2. Add the following code block into the very top of the new template, before anything else. Give the template a unique descriptive name:
    <?php
    /*
    
    Template Name: Fluffy Kittens List
    
    */
    ?>
  3. Where you want to add the list of Post Items into your template, paste the following PHP code (format it within HTML tags as you wish), substituting the ‘Post Type Slug‘ for your Custom Post Type on line 5 (found in the ‘CPT UI‘ section if you have forgotten it). Mine is ‘fluffy-kittens‘. You should be able to see where and how the custom fields are pulled in with PHP tags. If there are no Post Items in the ‘Fluffy Kittens‘ Custom Post Type, a message is shown:
    <?php
    if ( get_query_var('paged') ) $paged = get_query_var('paged');  
    if ( get_query_var('page') ) $paged = get_query_var('page');
    				
    $query = new WP_Query( array( 'post_type' => 'fluffy-kittens', 'posts_per_page' => 20, 'orderby'=> title, 'order' => 'ASC' ) );
    				
    if ( $query->have_posts() ) :
    	
    	while ( $query->have_posts() ) : $query->the_post(); ?>	
    		
    		<div class="item-fluffy-kitten">
    			<img src="<?php the_field('picture'); ?>" alt="<?php the_title(); ?>" />
    			<h2 class="title"><?php the_title(); ?></h2>
    			<p><strong>Colour:</strong> <?php the_field('colour'); ?></p>
    			<p><strong>Personality:</strong> <?php the_field('personality'); ?></p>
    		</div>
    	
    	<?php endwhile; wp_reset_postdata();
    
    else : ?>
    	
    	<p>There are no cats at the café at the moment :(</p>
    
    <?php endif; ?>

Create a Page within WordPress

Now we need to create a Page to display the list of cats on:

  1. Create a new Page within the WordPress editor and give it a title.
  2. Select the template you just created from the drop down menu within the ‘Page Attributes‘ box to the right hand side of the edit screen and ‘Save Draft‘ or ‘Publish‘.
    Selecting Page template in WordPress
  3. Now when you preview or view the webpage through the browser, your list of cats should show in alphabetical order.
    Custom Post Type list view
  4. With this method, if you want to hide some cats from the list, you can move their publish status to Draft.

Option 2: Display selected items within a Custom Post Type

This option will allow you to select which items from the Custom Post Type are displayed on a webpage. So in my example case, I’ll be able to choose which cats are available at my café via the WordPress editor.

For this method, you will need to have the Repeater Field add-on for the ACF Advanced Custom Fields plugin installed and activated.

Create a new Page template

We’re going to create a new template to apply to a Page within WordPress which will show selected cats:

  1. Within your theme directory, copy page.php and rename it. I have renamed mine template-fluffy-kittens-select.php.
  2. Add the following code block into the very top of the new template, before anything else. Give the template a unique descriptive name – mine is called ‘Fluffy Kittens Select‘:
    <?php
    /*
    
    Template Name: Fluffy Kittens Select
    
    */
    ?>

Create a Repeater with Custom Fields

We will need to create a new Custom Fields group which will allow us to select which cats we want to display:

  1. Go to ‘Custom Fields‘ in the WordPress editor as before, follow the link to ‘Field Groups‘ and add another new field group. I have named mine ‘Fluffy Kittens Selector‘.
  2. Set the Rules for where these Custom Fields are going to appear. We want the fields we are going to create to show up only for Pages which have the ‘Fluffy Kittens Select‘ template applied, so within the ‘Location‘ box, add a rule group from the dropdowns – select ‘Post Template‘ ‘is equal to‘ ‘Fluffy Kittens Select‘.
    Creating a new Custom Fields group and setting rules
  3. Click ‘Add Field‘ and fill in the required fields. ‘Field Type‘ needs to be set to ‘Repeater‘.
    Creating a Repeater field with WordPress Custom Fields plugin
  4. In the ‘Sub Fields‘ area, click ‘Add Field‘.
  5. Similar to the last step, fill in the required fields. Set ‘Field Type‘ to ‘Post Object‘ then click the ‘Filter by Post Type’ input box and select ‘Fluffy Kitten’.
    Creating Repeater sub fields within WordPress Custom Fields
  6. Click on ‘Update‘ when done.

Add the Repeater code to the template

We need to tell the Page template where to place the list of cats:

  1. Open up the ‘Fluffy Kittens Select‘ template in your editor again.
  2. Where you want to add the list of Post Items into your template, paste the following PHP code (format it within HTML tags as you wish), substituting the ‘Field Name‘ for the Repeater custom field in the 1st and 3rd lines (in this case, ‘fluffy_kittens_selector‘) and the single Repeater items ‘Field Name‘ in line 5 (‘single_kitten‘). You should be able to see where and how the custom fields are pulled in with PHP tags. If there are no items in the Repeater, a message is shown:
    <?php if( have_rows('fluffy_kittens_selector') ):
    
    	while ( have_rows('fluffy_kittens_selector') ) : the_row();
    
    		$post_object = get_sub_field('single_kitten');
    		if( $post_object ) :
    		$post = $post_object;
    		setup_postdata($post);
    		?>
    
    		<div class="item-fluffy-kitten">
    			<img src="<?php the_field('picture'); ?>" alt="<?php the_title(); ?>" />
    			<h2 class="title"><?php the_title(); ?></h2>
    			<p><strong>Colour:</strong> <?php the_field('colour'); ?></p>
    			<p><strong>Personality:</strong> <?php the_field('personality'); ?></p>
    
    			<?php wp_reset_postdata();
    
    			endif; ?>
    		</div>
    	
    	<?php endwhile;
    	
    else : ?>
    	
    	

    There are no cats at the café at the moment :(

    <?php endif; ?>

Create a Page within WordPress

Now we need to create a Page within WordPress to display the list of cats on:

  1. Create a new Page within the WordPress editor and give it a title.
  2. Select the template you just created from the drop down menu to the right hand side of the edit screen and ‘Save Draft‘ or ‘Publish‘.
    Selecting Page template in WordPress
  3. The edit screen for this Page should now show the Repeater area. Click ‘Add Row‘ and choose an item from the dropdown box which appears. Continue adding rows until you have added all of the items you want to display on the resulting webpage.
    Repeater shown on Page edit screen with dropdowns
  4. Again, ‘Save Draft‘ or ‘Publish‘.
  5. Now when you preview or view the webpage through the browser, your selected list of cats should show in in the order you chose.
    Custom Post Type select view

Did this post help you out or grow your knowledge with WordPress, Custom Fields or Custom Post Types? We’d love to know, so talk to us in the comments below!

11 May, 2016

Michelle DinanTwitter

Michelle is a designer and front end dev at Createful, producing creative and UI concept design for web and mobile devices, before bringing it to life using HTML, (S)CSS and jQuery. She has a turbulent love/hate relationship with cake and quite a serious peanut butter problem.