3 Responsive Inline Header Widgets Side by Side in StudioPress Themes

Oct 17, 2013

—

In this tutorial, i’ll show you 3 different ways to add 3 widgets side by side in the header of a StudioPress child theme.

The 1st solution has been tested on the Eleven40 Pro theme however it will work in any theme.
The 2nd solution tested on the Genesis Sample child theme.
The 3rd solution only requires the addition of PHP code and adds a header left, header middle and header right widget areas via your child themes functions file.

1st Solution

Adding Widgets Side by Side in Other Positions

Was this helpful?

Yes

Thanks for your feedback!

26 responses to “3 Responsive Inline Header Widgets Side by Side in StudioPress Themes”

sweeterreads

August 28, 2015

I went with option #1 and everything lines up nice. If I need to have all the images the same size, is it just a case of adding the width and height to the .featured-widgets a img? or should I be adding something to the functions file?

Also, I cannot get the titles to center. I added ‘center’ to the .featured-widgets . widget title in the CSS – I even made it ‘important’, but nothing. Any suggestions?

Reply
1. Brad Dalton
  
  August 29, 2015
  
  You could try using a height or padding to each element. Try text-align: centre;
  
  Reply
Dom Wint

September 24, 2014

Amazing-ness. Thanks, Brad. Just what I was looking for to get a centralised logo with contact/social details either side.

Reply
1. Brad Dalton
  
  September 24, 2014
  
  Thanks for the positive feedback Dom.
  
  Here’s another way to do it that you might like better
  
  Reply
Rebecca Olkowski

March 12, 2014

Here I am again. Everything looks great but now the guy (client) only wants the header widgets to show up on the home page. Is there a way to do that so it won’t show on the other pages?

Reply
1. Brad Dalton
  
  March 12, 2014
  
  Yes. Install a plugin like Widget Logic
  
  Reply
  1. Rebecca Olkowski
    
    March 12, 2014
    
    Awesome! Thanks.
    
    Reply
Suuzen

February 25, 2014

BEST GENESIS POST EVER! This works perfectly right out of the box on the Enterprise Pro HTML5 theme. You have saved me a solid week of pounding my head on my desk while trying to create a much less elegant solution than yours. You are my new hero! Best regards and many, many thanks for the great work – Suuzen

Reply
Anthony Hickey

January 25, 2014

Brad,

Thanks for your help.

That worked perfectly. You make it so easy for those of us who are not coders.

Appreciate it.

Reply
1. Brad Dalton
  
  January 25, 2014
  
  You’re welcome Anthony.
  
  Reply
Brad Dalton

January 25, 2014

I added this code:
[code]
remove_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
remove_action( ‘genesis_header’, ‘genesis_do_header’ );
remove_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 ) ;
[/code]

and removed the margin left from the CSS then added a 3rd parameter to the action like this:

[code]
add_action( ‘genesis_header’, ‘featured_widgets_inline’, 12 );
[/code]

There’s many different variations and the code will need tweaking depending on what you want.

Reply
Anthony Hickey

January 25, 2014

Hi Brad,

A great tutorial and exactly what I need to get theme looking the way I want.

I am testing locally using Outreach Pro theme.

The 3 widgets are appearing vertically in an area between Nav bar ( Nav bar re-positions correctly) and Header which shows title text.

Any help appreciated.

Reply
1. Brad Dalton
  
  January 25, 2014
  
  If you wanted it to look like this:
  
  You can simply add a 3rd parameter like this:
  [code]
  add_action( ‘genesis_header’, ‘featured_widgets_inline’, 15 );
  [/code]
  
  No need to modify or add any more PHP.
  
  You would also remove the margin left from the CSS.
  
  Reply
Derek Alvarez

January 17, 2014

Hi Brad, Can this be changed to keep the logo and add 2 widgets to the right of the logo?

Reply
1. Brad Dalton
  
  January 17, 2014
  
  Yes but you’ll need to use the correct CSS code to make it work.
  
  You don’t need 2 widget area’s to display 2 or more widgets in that area.
  
  You can float the different widgets to the left and right using one widget.
  
  Reply
rebecca

December 28, 2013

Just FYI, I fixed it. I removed the repositioning of the primary nav menu in the original php code and replaced it with yours so there was only one instance instead of two. Thanks so much. I love the configuration.

Reply
1. Brad Dalton
  
  December 29, 2013
  
  Hello Rebecca.
  
  Its hard to work out what the problem is sometimes without access to the PHP code so i’m glad you worked it out yourself.
  
  Reply
rebecca

December 28, 2013

Whoops code didn’t show up.
id=”menu-main-menu-1″ class=”menu genesis-nav-menu menu-primary

Reply
Rebecca

December 28, 2013

The widget areas worked perfectly. I love it! For some reason I’m getting 2 main navigation areas though. I like the one at the top of the page. How do I get rid of the 2nd one? (not a coder)

Reply
1. Brad Dalton
  
  December 28, 2013
  
  Looks like you have created 2 primary menus so you will need to delete one of them.
  
  Reply
  1. Rebecca
    
    December 28, 2013
    
    I checked and there is only one menu. I deleted it completely and then re-added it but both menus still show. It’s still giving me an option to create a second menu so I know there’s only one. The site was previously using Canvas from Woo but that was using the custom menu as well. Not sure how to get rid of it.
    
    Reply
    1. Brad Dalton
      
      December 28, 2013
      
      When i inspected your menu’s using Firebug, they both used the same i.d however 1 had a 2 at the end so you need to remove that from trash or wherever it is.
      
      Another option is to hide it using CSS code using display: none;
      
      Reply
      1. rebecca
        
        December 28, 2013
        
        I copied the php code from the raw you provided and replaced it in my functions php at the end of the original code but the 2 navs are still there. Where would the 2 be? Sorry I’m not a coder and didn’t want to make a mistake. Did I need to remove anything from the original php? Should I send you my functions php code?
        
        If I use the CSS option where would display:none go?
      2. Brad Dalton
        
        December 28, 2013
        
        You will need to grab the i.d class for your nav menu and add like this in your style.css file:
        
        [code]
        #nav-primary-2 {
        display: none;
        }
        [/code]
        
        This is example code only and will only work once you use the correct i.d class for the menu you want to remove.
      3. rebecca
        
        December 28, 2013
        
        Thanks for all your help and sorry to be dumb about this. This is what I see on the bottom menu using firebug
        
        I’ve tried different combinations of trying to figure out the nav menu id but must be writing it wrong. I also saw this in CSS
        .nav-primary:after
        I know it’s just one little tweak and then it will be perfect.
Matthew Snider

October 17, 2013

Love this brother, heading over to a demo site to play around. Would be nice to see the same thing but maybe a featured section pulled in automagically.

Off to play!

Reply