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.
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.