I have recently written a reference post about Custom Post types and a tutorial to Get started with Custom post types using Pods. This article will give you some more insight about creating and customizing Custom post types in Genesis.
Creating Custom Post Types
TYPE 1 The Manual Way
You can create a single file plugin for CPT or can paste a snippet in functions.php to register a post type.
The snippets and guides for this found here WordPress, Genesis and Custom Post Types
TYPE 2 The Plugin Way
There are many Custom post types plugins and Pods framework is one of the best feature rich powerful plugin to create custom post types and fields. It supports templates, Advanced relationships and more.
You can take a look at Best Custom Post Types plugins here.
Create Custom Post Types using the plugin.
Each Plugin has a different method. However, the permalink and working with this is always similar because they all use the same WordPress Standard to create Custom post types.
You can Get started with Pods Framework to create your first CPT.
Working and Customizations.
Now, I assume that you have created a post type. Now, There are three common customization conditions appear when you create a custom post type.
1. Customize Custom post type Archive Page (archive-portfolio.php)
2. Customize Custom post type Single Page (single-portfolio.php)
3. Adding it between contents on a frontpage or a specific page.
other
Custom taxonomy page. taxonomy-portfolio_type.php, taxonomy-portfolio-type.php
Creating Template files.
Let’s we have some of the Custom Post Types (CPT) are
Book
Project
Movie
Member
Portfolio
Service
Here, how the file name for custom templates should be created.
CPT Archive Page = archive-CPT.php (default archive.php takes from the child theme or parent theme)
CPT Single Post = single-CPT.php (default single.php takes from the child theme or parent theme)
You have to use the slug of your Custom Post Type for the specific template. Let’s assume we have a custom post types called “book”. The templates file name will be like this.
Archive Page = archive-book.php (default archive.php takes from the child theme or parent theme)
Single Post = single-book.php (default single.php takes from the child theme or parent theme)
Custom Taxonomy Page (Custom Categories Mainly, Tags)
When you create a custom taxonomy using the plugin you will have the option to gove it to a specific post type. or You can edit the post type in and attach the taxonomy type.
Assuming You have Created a taxonomy named “Portfolio Type” using Pods.
Now the template here will be used here with the filename is taxonomy-portfolio_type.php While Portfolio pro has a taxonomy-portfolio-type.php template.
You can hover or open the Custom Taxonomy page and see the permalink.
WordPress automatically selects the template if the file is there, and if it is not there, it takes the preferred default template file.
Here is the diagram, visually found here.
Now, as You have understood these things. Let’s create an Archive template for a custom post types.
Create a file under your child theme having your CPT name like archive-portfolio.php for portfolio type post and paste the following.
<?php
/**
* This file adds the portfolio type taxonomy archive template to the Genesis Sample Theme.
*
* @author StudioPress
* @package Genesis Sample Portfolio
* @subpackage Customizations
*/
//Force full width layout
add_filter('genesis_pre_get_option_site_layout', '__genesis_return_full_width_content');
// custom image size for portfolio.
add_image_size('portfolio', 300, 200, true);
add_action('genesis_before_content_sidebar_wrap', 'add_tax_title_description', 10);
/*
* default location genesis_before_loop
*/
function add_tax_title_description()
{
// fF this is a paging page /page/2*. abort.
if (get_query_var('paged') >= 2 ) {
return;
}
echo'<div class="archive-description">';
echo'<h1 class="archive-title">Portfolios</h1>';
echo'<div class="taxonomy-description">Portfolios Description</div>';
echo'</div>';
}
//* Remove the breadcrumb navigation
remove_action('genesis_before_loop', 'genesis_do_breadcrumbs');
add_action('genesis_loop', 'genesis_portfolio_setup_loop', 9);
//* Add portfolio body class to the head
add_filter('body_class', 'genesis_portfolio_add_body_class');
add_filter('post_class', 'genesis_portfolio_custom_post_class');
/**
* Remove actions on before entry and setup the portfolio entry actions
*/
function genesis_portfolio_setup_loop()
{
$hooks = array(
'genesis_before_entry',
'genesis_entry_header',
'genesis_before_entry_content',
'genesis_entry_content',
'genesis_after_entry_content',
'genesis_entry_footer',
'genesis_after_entry',
);
foreach ( $hooks as $hook ) {
remove_all_actions($hook);
}
add_action('genesis_entry_content', 'genesis_portfolio_grid');
add_action('genesis_after_entry_content', 'genesis_entry_header_markup_open', 5);
add_action('genesis_after_entry_content', 'genesis_entry_header_markup_close', 15);
add_action('genesis_after_entry_content', 'genesis_do_post_title');
}
/**
* Callback on the `body_classes` filter.
* Adds the `genesis-por-portfolio` body class on portfolio archive and single pages.
*
* @access public
* @param array $classes
* @return array
*/
function genesis_portfolio_add_body_class( $classes )
{
$classes[] = 'portfolio-pro';
return $classes;
}
/**
* Callback on the `post_classes` filter.
* Adds the pro-portfolio class to the main query on portfolio archive and single views
*
* @access public
* @param array $classes
* @return array
*/
function genesis_portfolio_custom_post_class( $classes )
{
if (is_main_query() ) {
$classes[] = 'pro-portfolio';
}
return $classes;
}
/**
* Callback on the `genesis_portfolio_grid` action.
* Verifies there is an image attached to the portfolio item
* then outputs the HTML for the image with classes for styling.
*
* @uses genesis_get_image()
*
* @access public
* @return void
*/
function genesis_portfolio_grid()
{
$image = genesis_get_image(
array(
'format' => 'html',
'size' => 'portfolio',
'context' => 'archive',
'attr' => array ( 'alt' => the_title_attribute('echo=0'), 'class' => 'portfolio-image' ),
)
);
if ($image ) {
printf('<div class="portfolio-featured-image"><a href="%s" rel="bookmark">%s</a></div>', get_permalink(), $image);
}
}
genesis();
add this in style.css
.portfolio-pro .pro-portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-left: 0;
margin-right: 2%;
padding: 15px;
padding: 1.5rem;
width: 32%;
}
.portfolio-pro .pro-portfolio:nth-of-type(3n+1) {
clear: left;
}
.portfolio-pro .pro-portfolio:nth-of-type(3n+3) {
margin-right: 0;
}
.portfolio-pro .archive-pagination {
clear: both;
}
.portfolio-pro .pro-portfolio .entry-header .entry-title {
border: none;
font-size: 20px;
margin: 20px 0 0;
padding: 0;
}
.portfolio-pro .content .pro-portfolio {
border: none;
margin-bottom: 40px;
text-align: center;
background-image: none;
}
.portfolio-pro .content .entry-header {
border: medium none;
margin: 0;
padding: 0;
}
.portfolio-pro .content .entry-content {
margin: 0;
padding: 0;
}
.portfolio-pro .pro-portfolio .entry-header .entry-title {
word-wrap: break-word;
border: none;
font-size: 20px;
margin: 20px 0 0;
padding: 0;
}
.portfolio-pro .entry-header .entry-meta {
font-weight: normal;
font-size: 16px;
margin: 0;
padding: 5px;
text-transform: none;
}
.portfolio-pro .content .entry-header .entry-meta .entry-comments-link {
display: block;
float: none;
margin-top: 5px;
padding-bottom: 0;
}
.portfolio-pro .entry-author,
.portfolio-pro .entry-comments-link,
.portfolio-pro .entry-time {
border-width: 0;
float: none;
margin: 0;
width: auto;
}
.portfolio-pro .entry-author:before,
.portfolio-pro .entry-comments-link:before,
.entry-time:before {
content: "";
}
.portfolio-pro .pro-portfolio .entry-header .entry-title {
margin: 20px 0 10px;
}
.portfolio-pro .entry-header .entry-meta {
line-height: 1.6;
}
.portfolio-pro .entry-comments-link:before {
display: none;
}
.portfolio-pro .content .entry-header .entry-meta .entry-comments-link a {
background-image: none;
display: block;
padding: 5px 8px;
position: static;
}
@media only screen and (max-width: 780px) {
.portfolio-pro .pro-portfolio {
width: 100%;
}
}
You can add some css file, js file or anything you can do on this archive page. Add, Remove, Edit or Tweak as per your needs.
Customize the Single Custom post types
You can create a custom sidebar for a specific custom post types using a plugin Content aware sidebar or follow this tutorial of Creating custom sidebar for custom post types in Genesis.
Once You have CPT, custom fields, and a custom sidebar. You can create a Pods template which outputs the custom field information for that particular post. Once Your template is ready, Paste the template shortcode in the custom sidebar and you are ready to go.
It will be useful to show details about the custom post types. The video tutorial for this is coming soon
Don’t forget to Re-save, flush your Permalinks in Settings > Permalinks to make sure the custom post types work perfectly.
Thank you.