WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

3 Responsive Inline Header Widgets Side by Side in StudioPress Themes

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.

3 widgets in columns

  1. The 1st solution has been tested on the Eleven40 Pro theme however it will work in any theme.
  2. The 2nd solution tested on the Genesis Sample child theme.
  3. 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

Register for full access

Adding Widgets Side by Side in Other Positions

Reader Interactions

Comments

  1. 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?

  3. 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?

  4. 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

  6. I added this 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 ) ;

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

    add_action( 'genesis_header', 'featured_widgets_inline', 12 );

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

    header widgets

  7. 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.

    • If you wanted it to look like this:

      after header widgets

      You can simply add a 3rd parameter like this:

      add_action( 'genesis_header', 'featured_widgets_inline', 15 );

      No need to modify or add any more PHP.

      You would also remove the margin left from the CSS.

    • 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.

  9. 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.

  11. 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)

      • 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.

        • 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;

          • 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?

          • You will need to grab the i.d class for your nav menu and add like this in your style.css file:

            #nav-primary-2 {
display: none;
}

            This is example code only and will only work once you use the correct i.d class for the menu you want to remove.

          • 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.

  12. 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!

Leave a Reply