• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Website Vidya

Website Vidya

Design. Develop. Deploy

  • Start Here
  • Design
  • Development
  • Deployment
  • Server
  • WordPress
  • Deals & Coupons

September 18, 2019 By Rajesh Rai Leave a Comment

How to Add Widget Area Below Header in Genesis Child Theme

Have you ever wanted to add widget area below header in Genesis child theme?

I was reading some article on the Forbes website. I loved the fact that how they are utilizing their space below primary navigation on their website for advertisements. I went through a couple of articles and resources online to achieve the same on my couple of other websites.

If you are looking for the same feature, this tutorial is for you. You can add an additional widget area below header in Genesis and use it for multiple purposes. The best part is that you don’t even have to change the theme of your website.

To see the live example of this widget area, you can navigate to Search Engine Bay and Sharestrap.

Widget Area Below Header Appearance

Widget Area Below Header in Genesis Child Theme

This widget is perfect for selling ad space or Google AdSense. You can also use this widget section to showcase affiliate offers, and newsletter signup forms etc.

Table of Contents

  • Steps to Add Widget Area Below Header in Genesis Child Theme
  • Step #1: Register Widget in Child Theme
  • Step #2: Define the Location of Widget
  • Step #3: Styling Widget
  • Add Short Codes In The Side Bar
  • YOU MAY ALSO LIKE

Steps to Add Widget Area Below Header in Genesis Child Theme

Step #1: Register Widget in Child Theme

Edit the functions.php file your Genesis child theme using your favourite editor. You can also use the WordPress dashboard and navigate to Appearance » Editor » function.php.

Now copy and paste the code below at the bottom of the functions.php file.

genesis_register_sidebar( array(
 'id' => 'custom-widget',
 'name' => ( 'Custom Widget', 'genesis' ), 'description' => ( 'Custom Widget Area', 'childtheme' ),
 ) );

Step #2: Define the Location of Widget

Once you register a widget, you need to define a widget location where the widget to be shown.

In our case, we are going to display the widget area below header in Genesis child theme. So we will add an action genesis_before_content_sidebar_wrap.

All you need is to copy and paste the code below just after the previous code snippet that you used to register the widget.

add_action( 'genesis_before_content_sidebar_wrap', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
                genesis_widget_area( 'custom-widget', array(
		'before' => '<div class="custom-widget widget-area">',
		'after'  => '</div>',
    ) );

}

Scenario 1: Display Widget only on the Single Post

If you just want to display the widget area on the single post, use the code below:

add_action( ‘genesis_before_content_sidebar_wrap’, ‘add_genesis_widget_area’ );
 function add_genesis_widget_area() {
 if ( is_singular(‘post’) && is_active_sidebar(‘before-content’) ) {
 return;
 }
 genesis_widget_area( ‘custom-widget’, array(
  'before' => '<div class="custom-widget widget-area">',
  'after'  => '</div>',
    ) );
} 

Scenario 2: Display Widget only on the Homepage

If you want to display the widget area only on the homepage, use the code below:

add_action( ‘genesis_before_content_sidebar_wrap’, ‘add_genesis_widget_area’ );
 function add_genesis_widget_area() {
 if ( ! is_home() ) {
 return;
 }
 genesis_widget_area( ‘custom-widget’, array(
  'before' => '<div class="custom-widget widget-area">',
  'after'  => '</div>',
    ) );
} 

Step #3: Styling Widget

For styling, add the CSS code below into your style.css file.

.custom-widget {
background-color: grey;
margin: 5px 0 10px;
padding: 10px;
overflow: hidden;
}

You can use the browser’s developer tool option to inspect and customize the look and feel of your custom widget section using Cascading Stylesheet (CSS).

Now hit save.

And navigate to the widget section of your website (Appearance » Widget), you will see a new custom widget section.

Custom Widget Area

Now just add your ad code or any available widget to see the result.

Add Short Codes In The Side Bar

Typically, in some Genesis child themes, you can’t post shortcode in the widget section. If you’re facing the same issue just copy and paste the below code at the bottom of your functions.php file.

// Use shortcodes in text widgets.
add_filter( 'widget_text', 'do_shortcode' );

What To Read Next

  • How To Add Next Previous Post Navigation Links In Genesis
  • How To Display Featured Image In Genesis Child Themes

I hope you’ll find this tutorial useful. If you have any question or concern put it in the comment section below.

YOU MAY ALSO LIKE

Filed Under: Development, WordPress Tagged With: Genesis Framework, WordPress

About Rajesh Rai

Rajesh Rai is an Entrepreneur, Web Developer, Digital Marketer & a student for life. He has helped over 100 companies to grow their businesses on the Internet.

Related Content

Primary Sidebar

COME HANG OUT WITH US

  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • RSS
  • Twitter

SUBSCRIBE TO OUR NEWSLETTER

Get instant access to my weekly newsletter where I share my best tips about Website Design, Development & Deployement!

Related Content

Recent Posts

  • How to Add Widget Area Below Header in Genesis Child Theme
  • How to Add Next Previous Post Navigation Links in Genesis
  • How to Embed SVG in WordPress – 3 Easy Methods
  • Git Cheat Sheet: 11 Git Commands Line Instructions
  • How to Display Featured Image in Genesis Child Themes
  • Speed Up WordPress Website: 10 Awesome Techniques
  • Best WordPress Permalink Structure Guide for better SEO

Footer

ABOUT

Welcome to WebsiteVidya.com – a blog dedicated to people with Graphics & Web Designing, Development and Web Server skills.

At Website Vidya, we cover extensive resources in the form of articles, tutorials and videos. We cover different WordPress Frameworks & Themes, Website Designing & Development from scratch, Web Hosting & Server related issues.


  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • RSS
  • Twitter

Quick Links

  • About
  • Blog
  • Deals, Discounts & Coupons
  • Comment Policy
  • Disclaimer
  • Privacy Policy
  • Terms of use
  • Contact

RESOURCES

  • Digital & Internet Marketing
  • Themes, Plugins & Reviews
  • Business Directory

DIGITAL MARKETING SERVICES

  • Web Designing
  • Web Development
  • Graphics Design
  • Content Marketing
  • Search Engine Optimization
  • Pay-Per-Click Advertising
  • Social Media Marketing
  • Email Marketing
  • Online Reputation Management
  • Local SEO
  • Mobile Marketing
  • Conversion Rate Optimization
  • Affiliate Marketing Management
  • About
  • Blog
  • Deals, Discounts & Coupons
  • Comment Policy
  • Disclaimer
  • Privacy Policy
  • Terms of use
  • Contact

Copyright © 2019 · Sharestrap . Designed & Developed with ♥ by SIPL

We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used
to manage this website,
we request you to whitelist our website
in your adblocking plugin.