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
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 -> Settings -> Supported Templates and enable your custom post type under Content Types.

When enabled, the custom post type will use the regular amp2/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/amp2/single.php template over to /chap-child/amp2/single-{$post_type}.php and customize that (in this case single-custom-post.php).

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

Exit mobile version