Chap WordPress theme
Chap

Adding a custom post type

For creating a custom post type you should have some basic PHP and WordPress knowledge. Here’s a quick rundown on the steps to take to add a custom post type when using the Chap Theme.

Register the custom post type

In the child theme’s functions.php file (or in a custom plugin) you can register your custom post type. In this case it’s being called custom-post.

PHP
/chap-child/functions.php
namespace Chap\Child {

    ...

	add_action('after_setup_theme', function() {
		register_post_type(
			'custom-post',
			[
				'description' => esc_html__('A custom post.'),
				'labels' => [
					'name'                  => __('Custom posts'),
					'singular_name'         => __('Custom post'),
					'menu_name'             => __('Custom posts'),
					'name_admin_bar'        => __('Custom post'),
					'add_new'               => __('Add New'),
					'add_new_item'          => __('Add New Custom post'),
					'edit_item'             => __('Edit Custom post'),
					'new_item'              => __('New Custom post'),
					'view_item'             => __('View Custom post'),
					'search_items'          => __('Search Custom posts'),
					'not_found'             => __('No Custom posts found'),
					'not_found_in_trash'    => __('No Custom posts found in trash'),
					'all_items'             => __('All Custom posts'),
					'featured_image'        => __('Custom post image'),
					'set_featured_image'    => __('Set Custom post image'),
					'remove_featured_image' => __('Remove Custom post image'),
					'use_featured_image'    => __('Use as Custom post image'),
					'insert_into_item'      => __('Insert into Custom post'),
					'uploaded_to_this_item' => __('Uploaded to this Custom post'),
					'views'                 => __('Filter Custom posts list'),
					'pagination'            => __('Custom posts list navigation'),
					'list'                  => __('Custom posts list'),
				],
				'menu_icon' => 'dashicons-media-document',
				'capability_type' => 'post',
				'public' => true,
				'hierarchical' => false,
				'has_archive' => false,
				'exclude_from_search' => true,
				'show_in_nav_menus' => false,
				'rewrite' => false,
				'supports' => [
					'title',
					'editor',
					'custom-fields',
				],
				'show_in_rest' => true,
				'template' => [
					['core/image', [
						'align' => 'left',
					]],
					['core/heading', [
						'placeholder' => 'Add Author...',
					]],
					['core/paragraph', [
						'placeholder' => 'Add Description...',
					]],
					['gsui/button', [
						'primary' => true,
						'large' => true,
					]],
					['gsui/divider', [
						'clearing' => true,
						'hidden' => true,
					]],
				],
			]
		);
	}, 50);

}

The last 2 parameters, show_in_rest and template can be omitted if you don’t use the new Gutenberg editor, but if you do, the show_in_rest parameter is what enables the Gutenberg support, and the template parameter is optional, if you wish to have some predefined content when creating a new post of type custom-post.

Adding custom templates

By using a custom template for your custom post type, you are able to display additional information (from options, ACF or similar) near the usual the_content(), title, etc.

First it’s needed to create the file that WordPress will first look for when dealing with a single post of custom-post type – single-{$post_type}.php or in this case single-custom-post.php.

PHP
/chap-child/single-custom-post.php
<?php
/**
 * Single custom post template.
 */

if(!defined('ABSPATH')) {
	exit; // Exit if accessed directly
}
?>

<?php if(have_posts()): the_post(); ?>
	<?php get_template_part('templates/content-single-custom-post'); ?>
<?php endif; ?>

The above file simply points to the “real” template that is relevant for the post type, templates/content-single-custom-post.php, which also needs to be created. If your child theme doesn’t have the templates folder you can simply create it, and then create the template file in there:

PHP
/chap-child/templates/content-single-custom-post.php
<?php
/**
 * Single custom post content.
 */

if(!defined('ABSPATH')) {
	exit; // Exit if accessed directly
}
?>

<article <?php post_class('content'); ?>>

	<?php do_action('chap_render_post_title'); ?>

	<?php do_action('chap_render_featured_image'); ?>

	<?php the_content(); ?>

</article>

<div class="ui hidden clearing divider"></div>

<?php do_action('chap_after_post_content'); ?>

Now you can edit the content-single-custom-post.php to display any additional information, move things around or remove them.

Customizing the page layout

If you wish to display your custom post type as a full width page, a page with 2 sidebars or anything in between, you can use the chap_page_type filter to assign a type for any pages displaying the custom-post post type.

PHP
/chap-child/functions.php
/**
 * Override page layout for custom post type.
 *
 *   0 - page with no sidebars (but contained to a reasonable max width)
 *   1 - primary sidebar + page
 *   2 - page + primary sidebar
 *   3 - primary sidebar + page + secondary sidebar
 *   4 - secondary sidebar + page + primary sidebar
 *   5 - full width page
 */
add_filter('chap_page_type', function($type) {
	if(get_post_type() === 'custom-post') {
		return 0;
	}
	return $type;
});
What about AMP

By default for AMP, any custom post types are disabled. You can go to WordPress admin dashboard -> AMP -> General and enable your custom post type under Supported Templates.

When enabled, the custom post type will use the regular amp/single.php template, which will look like any other post. If you wish to customize your custom post type on AMP pages as well, you need to copy the /chap/amp/single.php template over to /chap-child/amp/single-{$post_type}.php and customize that (in this case single-custom-post.php). So essentially, it’s twice the work for AMP support unfortunately. AMP templates are also not using the Sage template wrapping features so they are a bit bulkier.

Additionally you can create a /chap-child/amp/styles/{$post-type}.php file that outputs any CSS to be used on the custom post type’s page.