
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.
14-day free trial, no credit card required.