Search

Display a Custom Post Type with Custom Sidebar in Genesis

Listen to this article

Custom Post Type and SidebarAh! So you have created a custom post type in Genesis and now are wondering how to display it? Well, you have come to the right place. This article will give you a guide. But you have to put in some work. It cannot cover every use case. You can definitely use it as a base, and tailor the solution to meet your needs.

[space]

First of all, let’s get some basics clear.

  • Genesis uses the single.php template to display a post type. A single post type, not the archive or blog page.

  • To create a new template for a custom post type, you will have to create a similar file in your Genesis child theme, and name it ‘single-yourcpt.php’. Where ‘yourcpt’, is the name for your custom post type.

  • This naming convention, tells the framework to use the specified template for the related post type.

  • By default, to structure and display the contents of the post type, ‘genesis_do_loop’ function will be called, on the ‘genesis_loop’ hook.

  • Thus, to create a custom template, you will have to replace the ‘genesis_do_loop’ function with your own custom function. Of course, if there are only minor changes you want to make, you could consider adding custom functions to other Genesis hooks, like genesis_before_post_content, genesis_post_title, genesis_after_post_content, etc.

[space]

Let’s Begin With the Implementation

Now, since we know what we have to do. Let’s get straight to it. As an example, let’s consider you have created a custom post type ‘Movies’, with the slug ‘movie’.

  • Start by creating a template file for your custom post type ‘movie’. In your Genesis child theme folder, create a file named ‘single-movie.php’.

  • Next, set a layout for your custom post type. You could choose from the default layout templates provided by Genesis. For example, to choose the Content-Sidebar layout, add the following in single-movie.php.

[pre]// set a content-sidebar layout
add_filter ( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_content_sidebar’);[/pre]

  • To structure the content of your post type, add a custom function to the ‘genesis-loop’ hook.

[pre]//Custom Template for Movies Post Type
remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
add_action( ‘genesis_loop’, ‘movie_post_template’ );

function movie_post_template () {
// display content
}

genesis();[/pre]

  • The genesis function is called at the end, to display the title, header, footer, etc, on the page.

[space]

Creating a Custom Sidebar for a CPT

Now that we have a template for our custom post type. Let’s say, you wanted to modify it further and add custom sidebars.

Sidebars are used to create a page layout with columns. Genesis by default has two sidebars; a primary and secondary sidebar. The primary sidebar is shown for a two or three column layout and the secondary sidebar is shown for a three column layout.

In our example, since we have chosen a two column layout (Content-Sidebar), the primary sidebar will be displayed. But, to change the default sidebars, or add more sidebars, you would need to register a custom sidebar, and display it.

We will add our own sidebar for our custom post type ‘movie’, instead of the default Genesis sidebar. These changes would have to be made in your theme’s functions.php file.

  • The following code, to register a new sidebar, will create a new sidebar, which will be shown in Appearance->Widgets of your Genesis child theme.

[pre]genesis_register_sidebar( array(
‘id’ => ‘movie-sidebar’,
‘name’ => ‘Movie Sidebar’,
‘description’ => ‘This is sidebar for Movies Custom Post Type.’
) );[/pre]

  • The primary sidebar is displayed on the hook ‘genesis_sidebar’, and the secondary sidebar is displayed on the hook ‘genesis_sidebar_alt’. In our case, we will replace the Genesis default primary sidebar with our custom sidebar.

[pre]// Replace primary sidebar with custom sidebar
add_action(‘get_header’,’movie_post_sidebar’);

function movie_post_sidebar() {

if ( is_singular(‘movie’)) {
// remove the default genesis primary sidebar
remove_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ );

// add an action hook to call the function for your custom sidebar
add_action( ‘genesis_sidebar’, ‘child_do_movie_cpt_sidebar’ );
}

}[/pre]
[pre]// Display the custom sidebar
function child_do_movie_cpt_sidebar() {

dynamic_sidebar( ‘movie-sidebar’ );

}[/pre]
[space]

With these changes, your Genesis default primary sidebar, will be replaced by a custom sidebar for your custom post type. And there you have it! A customized layout for your custom post type.

[space]

Ankita Raikundalia

Ankita Raikundalia

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »