Create Below Header Widget In Genesis Themes

Need to create below header widget in Genesis themes? Here you can learn to create your own. It’s very useful for placing ads, banner, etc.

In this tutorial, we also register the widget to WordPress Customizer. So, it will be easy for you to place ‘anything’ you want on it.

[Note!] This tutorial is meant for Genesis themes only. If you use other themes than Genesis, then it will not work. If you want to switch your theme to Genesis, to get one go here: Get StudioPress Theme

Okay, here’s how to create below header widget on Genesis.

Adding PHP code to create below header widget in Genesis themes

First, you need to add the PHP code below to the bottom of your WP Themes Functions. To do that, from your WP Admin dashboard, go to Appearance > Theme Editor > Themes Functions.

You can copy the code on GitHub by following this link (Link will open in new tab)

The PHP code above will place the widget in Posts page and Blog page only.

Register the widget

Next, you’ll need to register the widget. So you can easily customize it in WordPress Live Customizer. Copy and paste PHP code below, also in your Themes Functions.

See the code on GitHub here.

Styling the widget

The last step, you will need to style the widget. Depend on how the design of your theme the CSS code below may not look good on your site. So you’ll need to tweak it to match with your site design. This is the reference CSS code:

Go to my Gist on GitHub then copy and paste the code to WP Built-in CSS in WP Customizer.

Done

And finish! if the style CSS has no problem with your child theme that you use. Then this is it.

But like I mentioned before if you are using a custom design with the Genesis Sample. Or use it as a custom banner, CTA whatever. Then you will need to tweak the CSS code.

The CSS code above is exactly what I use for this site. So, you got the idea what best for your site. The padding, background color, etc.

Hope this post useful for your reference on how to create below header widget in Genesis Themes.

[Note] Sorry for the inconvenient by sending you to my Gist on GitHub because every time I post about code on this site, then I will have a DNS problem. I still working to fix the issue. Meanwhile, I have to send you folks to GitHub.