The WordPress widgets feature in Genesis are most popular among with Designers and developers not because it is easy to use but the way you can control and customize is incredible, faster and is super simple.
The conditional Tags in WordPress on Genesis makes it more flexible and changed the way one can manage widgets the way he wants.
We have recently talked about showing widgets on the front page and home page. Today we are going with more details and customization options we can include in a site.
Make sure to read to show a simple widget in Genesis. This will give you an idea how the conditional tags work with Widgets.
I prefer to use two methods to show Widgets conditionally in Genesis site.
1. Using Plugin
The recommended Plugin is Blox. Plugins like BloxWP makes it easier to control widgets in Genesis conditionally and offers various control over a content, Widget, and shortcode.
2. Snippet
Snippets should be added in functions.php file of your child theme and most of the new users wrongly paste the snippets or not able to make some little changes and so I recommend you to use a Grandchild plugin or BloxWP addon Sandbox which offers the alternative option of functions.php file where you can test PHP code snippets.
Show Widgets in Genesis
The first method is simple as we are using the plugin and so we are using the snippet method to show widgets in Genesis conditionally.
We are using
- Adding widget using add_action in WordPress on a location using Genesis Hooks genesis_before_loop
- Conditional Tags from WordPress
- Genesis widgets function
- Register widget using genesis_register_sidebar (same-id)
- Showing widgets using genesis_widget_area (same-id)
Here ‘same-id‘ will be a widget id to identify the widget and to work a specific function for that particular widget. It should be same in both the step1,2.
And you that function name should be same too.
The hook position could be changed with the help of Genesis Hooks and we can use different conditional tags to create a custom widget with different conditions.
Make sure to paste the snippet into functions.php (of child theme)
Global Custom widget in Genesis
Step 1. Register a Widget
//* Step 1.Register a Simple Custom Widget
genesis_register_sidebar( array(
'id' => 'simple-custom-widget',
'name' => __( ' Simple Custom Widget', '$text_domain' ),
'description' => __( 'Global Simple Custom Widget', '$text_domain' ),
) );
Step 2. Hook and display a Widget
//* Step 2.Hook Widget and Display it
add_action( 'genesis_before_loop', 'simple_global_widget' );
function simple_global_widget() {
genesis_widget_area( 'simple-custom-widget', array(
'before' => '<div class="simple-widget custom" class="widget-area">',
'after' => '</div>',
) );
}
Add Conditional Tag
Replace the Step 2 with this one.
//* Step 2.Hook Widget Conditionally and Display it
add_action( 'genesis_before_loop', 'simple_global_widget' );
function simple_global_widget() {
if ( is_front_page() ) {
genesis_widget_area( 'simple-custom-widget', array(
'before' => '<div class="simple-widget custom" class="widget-area">',
'after' => '</div>',
) );
}
}
Additional Controls:
Logged In user only widget
Replace
is_front_page()
with
is_front_page() && ! is_user_logged_in()
Logged out User Only widget
is_front_page()
with
is_front_page() && !is_user_logged_in()
The difference is a space having >> ! which works like this…
! is_user_logged_in() = include a space between ! and condition. This makes sure that the work is done for logged in user only.
!is_user_logged_in() = ! is with condition. This makes sure that the work will not be done for the logged in user. But will be done for logout user i.e non-registered users.
This simply means left the tag which is with me(!) and do the work for others.
This way we can show specific widget for logged or non-logged users in WordPress site. Here are some of the more popular widget options using Conditional tags.
1. Front Page Widget
//* Register widget area for front page
genesis_register_sidebar( array(
'id' => 'front-page-widget',
'name' => __( 'Front Page only', '$text_domain' ),
'description' => __( 'Displays on Front Page Only', '$text_domain' ),
) );
//* Hook Widget Before Loop on Front Page Only
add_action( 'genesis_before_content', 'front_page_custom_widget' );
function front_page_custom_widget() {
if ( is_front_page() ) {
genesis_widget_area( 'front-page-widget', array(
'before' => '<div class="front-page custom-widget" class="widget-area">',
'after' => '</div>',
) );
}
}
2. Post Page Widget
//* Register widget area for Post Page
genesis_register_sidebar( array(
'id' => 'post-page',
'name' => __( 'Post Page only', '$text_domain' ),
'description' => __( 'Displays on Post Page Only', '$text_domain' ),
) );
//* Hook Widget Before Loop on Posts Page Only
add_action( 'genesis_before_content', 'post_page_custom_widget' );
function post_page_custom_widget() {
if ( is_home() && !is_paged() ) {//* post page have pagination
genesis_widget_area( 'post-page-widget', array(
'before' => '<div class="post-page custom-widget" class="widget-area">',
'after' => '</div>',
) );
}
}
for both Frontpage and Post page written here or use it.
//* Register widget area for Both Front and Post page
genesis_register_sidebar( array(
'id' => 'front-and-post',
'name' => __( 'Both Pages Front and Blog', '$text_domain' ),
'description' => __( 'Displays on Both Page Front and Blog', '$text_domain' ),
) );
//* Hook Widget Before Loop on Both Front and Post page
add_action( 'genesis_before_content', 'front_and_post_page_widget' );
function front_and_post_page_widget() {
if ( is_front_page() || is_home() && !is_paged() ) {
genesis_widget_area( 'front-and-post', array(
'before' => '<div class="front-and-post" class="widget-area">',
'after' => '</div>',
) );
}
}
is_paged() = Do the stuff on Pagination pages and !is_paged() = Don’t do the stuff on pagination . Here Pagination may be example.com/page/2/ or example.com/blog/page/2/
3. Archive Page Widget
This will enable on Default and Custom Post Type archive.
//* Register widget area for Archive page
genesis_register_sidebar( array(
'id' => 'archive-page-widget',
'name' => __( 'Archive Page Widget', '$text_domain' ),
'description' => __( 'Displays on Archive Page', '$text_domain' ),
) );
//* Hook Widget Before Loop and Display on Archive page
add_action( 'genesis_before_content', 'custom_archive_page_widget' );
function custom_archive_page_widget() {
if ( is_archive() ) {
genesis_widget_area( 'archive-page-widget', array(
'before' => '<div class="archive-page custom-widget" class="widget-area">',
'after' => '</div>',
) );
}
}
4. Single Post and Pages Widget
//* Register widget areas for Single Post and Page
genesis_register_sidebar( array(
'id' => 'single-post-page-widget',
'name' => __( 'Single Post/page Page Widget', '$text_domain' ),
'description' => __( 'Displays on Single Post or Page', '$text_domain' ),
) );
//* Hook Widget Before Loop and Display widget on Single post or page
add_action( 'genesis_before_content', 'custom_single_post_page_widget' );
function custom_single_post_page_widget() {
if ( is_singular( array ('post','page') ) ) {
genesis_widget_area( 'single-post-page-widget', array(
'before' => '<div class="single-post-page custom-widget" class="widget-area">',
'after' => '</div>',
) );
}
}
5. Custom Post type archive Widget
//* Register widget area for Custom post type Archive
genesis_register_sidebar( array(
'id' => 'custom-post-type-archive-widget',
'name' => __( 'CPT Book Archive Page Widget', '$text_domain' ),
'description' => __( 'Displays on CPT Book Archive Page', '$text_domain' ),
) );
//* Hook Widget Before Loop and Display widget on CPT archive
add_action( 'genesis_before_content', 'custom_post_type_archive_widget' );
function custom_post_type_archive_widget() {
if ( is_post_type_archive( 'book' ) ) {
genesis_widget_area( 'custom-post-type-archive-widget', array(
'before' => '<div class="cpt-archive custom-widget" class="widget-area">',
'after' => '</div>',
) );
}
}
6. Single Custom Post Type Widget
//* Register widget area for Custom post type 'Single' Post
genesis_register_sidebar( array(
'id' => 'custom-post-type-widget',
'name' => __( 'CPT book Post Widget', '$text_domain' ),
'description' => __( 'Displays on CPT book single post', '$text_domain' ),
) );
//* Hook Widget Before Loop and Display widget on Single CPT post
add_action( 'genesis_before_content', 'custom_post_type_widget' );
function custom_post_type_widget() {
if ( is_singular( 'book' ) ) { //cpt single post example.com/book/rich-dad-poor-dad
genesis_widget_area( 'custom-post-type-widget', array(
'before' => '<div class="single-cpt-post custom-widget" class="widget-area">',
'after' => '</div>',
) );
}
}
WOho that’s lots of widgets and You can create more using the mentioned resources. 🙂
Don’t forget to sprinkle some love *CSS on those Widgets. <3
Let me know if you are having any problem working with these snippets.