Expanding WP with Advanced custom fields

Brief

Recently I added pages dedicated to competitors in WordPress hosting space. I wanted to show feature comparison table, but didn’t want to hardcode it.

I wanted ability to have custom post types with additional fields, so I can easily input their features and create comparison tables.

This is how end result looks:

I used Advanced Custom Fields plugin and completed this in 30 minutes.

Steps taken

Of course I installed ACF first. Version with 2M+ installations.

After that this is what I completed:

• Created ACF field set
• Created custom post type
• Configured frontend design

ACF field set creation

In WP admin panel go into Custom Fields -> Add New

There define title and all the needed fields. In my case:

Below these fields there is an option for rules. I can specify for which pages I’ll display editor for these fields. I’ll do that after I create custom post type.

Custom post type

There is a bunch of ways how custom post types could be created. I like to do that with my own plugin.

In this case I’ve scaffolded new plugin with wp cli and inside added logic for registering custom post type.

<?php
/**
 * Plugin Name:     WP Jack
 * Plugin URI:      PLUGIN SITE HERE
 * Description:     PLUGIN DESCRIPTION HERE
 * Author:          wpjack
 * Author URI:      YOUR SITE HERE
 * Text Domain:     wpjack
 * Domain Path:     /languages
 * Version:         0.1.0
 *
 * @package         Wpjack
 */

function wpjack_custom_post_type() {
	register_post_type('wpjack_alternative',
		array(
			'labels'      => array(
				'name'          => __('Alternatives', 'textdomain'),
				'singular_name' => __('Alternative', 'textdomain'),
			),
			'public'      => true,
			'has_archive' => false,
			'rewrite' => array('slug' => 'alternatives'),
			'supports' => array('editor', 'thumbnail'),
			'show_in_rest' => true,
		)
	);
}

add_action('init', 'wpjack_custom_post_type');

After activating my new plugin, in WP admin panel system will add Alternatives menu item.

Now it’s time to go into Custom fields and edit a rule for my new field set.

Displaying custom values

Everything is the same as for any other template, I’ll just use to new functions to get ACF values.

They are:

<?php the_field('provider') ?> // Print value
<?php get_field('free_migration') ?> // Get value

In this case I’ve copy/pasted single.php into single-wpjack_alternative.php and added new design there. There is a rule that custom post type templates are named with single-{custom_post_type_name}.php

Permlinks

While registering new custom post type I added a line where I register specified slug “alternatives”.

In order for this to work my permlink structure needs to allow this.

If you bump into 404, just modify permlink settings and it’ll work.