• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Create and Customize a custom post type in Genesis

Last Updated on February 21, 2019 Favorited: 1 times

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.

Related Posts

  • Customize Error 404 Page in Genesis
  • Filterable Portfolio in Startup Pro
  • Custom Page Template having hero title and subtitle in Genesis
  • Custom page template design for header, menu with description and footer in Genesis
  • Landing Page Design Template with Background Image in Genesis

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: CPT, Custom Post Types, custom template

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service