• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Display 4 Widgets In 2 Widget Areas Side by Side In Genesis Header

This tutorial provides all the instructions and code which enables you to replace the default header in Genesis child themes with 2 widget areas.

You can then populate each widget area with 2 widgets and display 4 different types of content in your header.

The tutorial includes both the PHP code to create the 2 widgets and the CSS to display all the header elements inline like you see in the following screenshot:

custom-header

There’s only 2 steps you need to take to achieve what you see in the screenshot:

  1. Copy PHP code to your child themes functions file
  2. Copy CSS to your child themes style.css file

Step 1

Copy the following PHP code and paste it at the end of your child themes functions.php file:

Register for full access


All you need to do now is populate each widget area with the following widgets you can see in this screenshot:

widget-areas

Note: Tested on the Executive Pro child theme by StudioPress. The CSS will need tweaking for use on other themes.

custom-header

Related Tutorials

  • Add Logo – Nav Menu – Social Icons – Search Box Inline In Genesis Header
  • Change Simple Social Icons Background & Hover Color
  • Display Search Box Widget In-Line With Social Icons In Header Right
  • Display Header Right Widget Custom Menu & Social Icons In-Line

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.