[How to] Add Full Width Widget Below Navbar/Header in Genesis

Hi, guys

So, You want to create a widget below navbar or Header. Right?

It’ll look like this (I used  it for showing important links. you can use it for anything like ebook, newsletter, etc.)

add full width widget in genesis

 

How can you create a widget below Navbar or Header?

Actually, it’s kind of widget which you want to add under navbar or header with having full width.

So, for adding that,

you’ve to follow just 3 simple steps. (That’s  it! )

Step 1: Register widget in theme

Go to

Appearance > Editor > function.php (of your theme)

register a widget in genesis

Now, for registering a widget you’ve to add its codes.

So, here is the code (simply paste it to your theme’s function.php file)


genesis_register_sidebar( array(
‘id’ => ‘welcome-text’,
‘name’ => __( ‘Welcome Text’, ‘genesis’ ),
‘description’ => __( ‘This is the welcome text widget.’, ‘bloggingbook’ ),
) );


Step 2: Define the Location of Widget

Once you register a widget, you have to define location of that particular widget (where the widget to be shown)

So, for doing that,

Add this code to your function.php file.


add_action( ‘genesis_before_content_sidebar_wrap’, ‘custom_welcome_text’ );
function custom_welcome_text() {
if ( is_singular(‘post’) && is_active_sidebar(‘before-content’) ) {
return;
}
genesis_widget_area( ‘welcome-text’, array(
‘before’ => ‘<div class=”welcome-text widget-area”>’,
‘after’ => ‘</div>’,
) );
}


CASE 2- Show widget ONLY on HOME

If you want to show this widget ONLY ON home page THEN, you’ve to change few lines of coding.

Use following code for that.


add_action( ‘genesis_before_content_sidebar_wrap’, ‘custom_welcome_text’ );
function custom_welcome_text() {
if ( ! is_home() ) {
return;
}
genesis_widget_area( ‘welcome-text’, array(
‘before’ => ‘<div class=”welcome-text widget-area”>’,
‘after’ => ‘</div>’,
) );
}


Step 3: Style Widget

Add this CSS code into your theme’s style.css file

Apperance > Editor > style.css (of your theme)

Simply paste this code.


/*  Welcome Text  */

.welcome-text {
font-family: ‘Lora’, serif;
font-size: 30px;
line-height: 1.0;
overflow: hidden;
padding: 0 0 25px 0;
text-align: center;
}

.welcome-text p {
font-size: inherit;
line-height: 1.0;
margin: 0;
}


That’s it!

Now you’ve widget below Navbar/Header

Do check it by using customize feature of WordPress.

widget customize

Read: Take Your Blog to Next Level

Get my eBook “Ultimate Blogging Guide” for FREE – DOWNLOAD NOW  
Feel free to ask any question, query via comments, I’ll surely help you. Also, share this article on social!

Add Comment