• 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

How to Register and Display Custom Sidebar in Genesis

Last Updated on August 14, 2018 Favorited: 0 times

Sidebar or No sidebar?
The sidebar in WordPress is a great feature which can be used for any purpose.

It could be for Your Book details, Your Service details, portfolio details, Your member details or can be used to show a list of categories, social media accounts, popular posts links and some advertisements.

It depends on You, why you and your users need a sidebar and so today we are going to learn about custom sidebar in WordPress site build using Genesis framework.

A custom sidebar in Genesis site is important when you have a Custom Post Type post created. An example is here on my site BlogTipsTricks Deals Page. You can check there is a custom sidebar having deal details.

There are different ways to create custom sidebar in Genesis and i will talk about two of them and are…

1.Using Plugin (Simplest)

I recommend the following plugins to create a custom sidebar in a site.

  • Genesis Simple Sidebars
  • Content Aware Sidebars

These plugins are simple to use and work out of the box.

2. Using snippet (Not difficult)

Hey,
Don’t worry. This method is simple and just need 3 steps to create a custom sidebar. So what we have to do is

1. Register a sidebar using genesis_register_sidebar
2. Removing the default sidebar using remove_action and adding the custom one using add_action
3. Displaying the custom sidebar using function dynamic_sidebar in WordPress.

Don’t forget to take a look at conditional tags, WordPress hooks, and hook as the tutorial include codes from these articles. Want to create a custom widget in Genesis?

Make sure you have a custom post type registered on your site. You can use Pods or other similar plugins to create one. I am not using a custom template get_sidebar() because it will confuse you so we are going to use dynamic_sidebar() in functions.php file to add our code/snippet.

So, Let’s start creating…
Let’s assume we are creating a custom sidebar for Custom post type name ‘book’ so what we have to do is.

Step 1. Register a new sidebar

Add this in functions.php

// Register new sidebar for CPT book
genesis_register_sidebar( array(
	'id'          => 'book-sidebar',
	'name'        => 'Book Sidebar',
	'description' => 'This is the sidebar for custom post type book.',
) );

‘or’

// Register Sidebar for Book CPT
genesis_register_sidebar(
	array(
		'id'          => 'book-sidebar',
		'name'        => __( 'Book Sidebar', 'my-theme-text-domain' ),
		'description' => __( 'Primary sidebar for Single Book Post', 'my-theme-text-domain' ),
	)
);

Step 2. Removing the Primary sidebar and other Functions.

Add this in functions.php

add_action('get_header','wpize_change_genesis_sidebar');
function wpize_change_genesis_sidebar() {
    if ( is_singular( 'book' ) ) { // Check if we're on a single post for my CPT called "book"
        remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); //remove the default genesis sidebar
        //remove_action( 'other action', 'other do action' ); //remove adiditonal features
        add_action( 'genesis_sidebar', 'wpize_do_sidebar' ); //add an action hook to call the function for my custom sidebar
    }
}

Step 3. Displaying the custom sidebar

Add this in functions.php

//Function to output my custom sidebar
function wpize_do_sidebar() {
	dynamic_sidebar( 'book-sidebar' );
}

and Done!
We have now a custom sidebar for single CPT book post.

Most of the time we don’t want to show Post info(Written by/date) and Post Meta (Categories, tag) so we will exclude them adding

remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); //remove post info
remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); //remove post meta

and what we have so far in our functions.php file for the custom sidebar.

// Register Sidebar for Book CPT
genesis_register_sidebar(
	array(
		'id'          => 'book-sidebar',
		'name'        => __( 'Book Sidebar', 'my-theme-text-domain' ),
		'description' => __( 'Primary sidebar for Single Book Post', 'my-theme-text-domain' ),
	)
);

add_action('get_header','wpize_change_genesis_sidebar');
function wpize_change_genesis_sidebar() {
    if ( is_singular( 'book' ) ) { // Check if we're on a single post for my CPT called "book"
        remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); //remove the default genesis sidebar

        remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); //remove post info
        remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); //remove post meta

        add_action( 'genesis_sidebar', 'wpize_do_sidebar' ); //add an action hook to call the function for my custom sidebar
    }
}

//Function to output my custom sidebar
function wpize_do_sidebar() {
	dynamic_sidebar( 'book-sidebar' );
}

But the Recommended way is to use return Early function.

// Register Sidebar for Book CPT
genesis_register_sidebar(
	array(
		'id'          => 'book-sidebar',
		'name'        => __( 'Book Sidebar', 'my-theme-text-domain' ),
		'description' => __( 'Primary sidebar for Single Book Post', 'my-theme-text-domain' ),
	)
);
add_action('get_header','wpize_change_genesis_sidebar');
function wpize_change_genesis_sidebar() {
	if ( ! is_singular( 'book' ) ) { // Check if we're on a single post for my CPT called "book",if not, abort.
		return;
	}
        remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); //remove the default genesis sidebar
        remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); //remove post info
        remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); //remove post meta
        add_action( 'genesis_sidebar', 'wpize_do_sidebar' ); //add an action hook to call the function for my custom sidebar
}
//Function to output my custom sidebar
function wpize_do_sidebar() {
	dynamic_sidebar( 'book-sidebar' );
}

and Result with some HTML and CSS.

Let me know if you have any question or any problem following this tutorial.

Related Posts

  • Post list design showing featured image when hovered in Genesis
  • Customize Sidebars in Genesis
  • Display custom menu with menu descriptions and icons in a Widget
  • Custom Navigation Menu Location in Genesis Sample
  • Custom Archive Page Template in Genesis

Categories: Free Content, Genesis Tutorials Tags: custom, Custom Post, sidebar

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