How To Add A Widget Under The Navigation Bar

Have you ever wanted to insert a banner advertisement or widget directly under your navigation bar on your Genesis Framework powered blog? Do you want to do this without having to switch themes or install a plugin? Then this is the blog post for you. It only takes one line of code to add this widget to your widget area. From here, you can drag whatever content you like to your new widget! Also, I did tweak this code a bit so the new widget would appear on the homepage, blog post, blog page and the category page.

Before we get to the code, I wanted to remind you to always back up your blog before messing with the theme code or adding a plugin. If something were to go wrong, you have a full backup from a few minutes ago preserving your current content. Check out this list of backup plugins.

WordPress Backup Plugins

• Backup Buddy
• MyRepono
• VaultPress
• UpdraftPlus WordPress Backup Plugin

Backups are done automatically every 24 hours from WPOutcast’s current web host. (Cloudways)

Looking for a new Web host? Check out our recommended list of Web hosts for WordPress blogs.

Installing The Code

Example of placement is below

Although this widget is perfect for selling ad space or Google AdSense, you can use the widget anything. Now that you have backed up your blog, open up your functions.php file and add the following code to the bottom of the file.

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

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>',
    ) );

}

For styling, add this code into you style.css file. You can modify this code to your liken.

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

Hit save and navigate to your widget’s page. You should see a new widget called “Custom widget” that we just created like shown below.

Now just add an available widget in there and you are all done with adding an ad under the navigation bar.

Add Short Codes In The Side Bar

Typically, you can’t post short-code in your widget section. However, adding one additional code will make this possible. Add the following code at the bottom of your functions.php file.

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

What To Read Next

• Add The Last Modified Date To Blog Posts – For Any Theme
• Simple Category Customizations For StudioPress Themes

Customize The Search Box

If you want some default text to appear inside the default Genesis Search widget box you place in the side bar, add this code at the bottom of your functions.php file.

//* Do NOT include the opening php tag shown above. Copy the code shown below.
 
//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
	return esc_attr( 'Search my blog...' );
}

Edit the Search my blog… text to change the wording inside the box.

If this blog post has helped you in any way, please consider sharing it online with you followers.