• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to place an element outside the .wrap in the main header?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › How to place an element outside the .wrap in the main header?

This topic is: resolved

Tagged: header, wrap

  • This topic has 6 replies, 3 voices, and was last updated 7 years, 2 months ago by studionoobly.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 8, 2016 at 5:07 am #183157
    studionoobly
    Member

    Hi,

    I am trying to get a utility bar (element) to go across at full width at the top of the header but it's trapped inside the the headers wrap. Is there a way to get it just above the wrap?

    This is what I have so far:

     * REGISTER THE SIDBARS ABOVE THE HEADER - Topbar
     */
     add_action( 'genesis_header', 'top_bar' , 5);
    
     function top_bar() {
    
    		echo '<div class="topbar">';
    
    		genesis_widget_area( 'topbar-bar-left', array(
    			'before' => '<div class="topbar-bar-left">',
    			'after' => '</div>',
    		) );
    
    		genesis_widget_area( 'topbar-bar-right', array(
    			'before' => '<div class="topbar-bar-right">',
    			'after' => '</div>',
    		) );
    
    		echo '</div>';
    // Adapted from http://www.carriedils.com/widget-area-above-header-genesis/
    }

    Thanks!

    http://n/a
    April 8, 2016 at 7:16 am #183162
    carasmo
    Participant

    The original tut had that code in her instructions on where to hook.

    add_action( 'genesis_before_header', 'utility_bar' );


    Genesis Theme Customization and Help

    April 8, 2016 at 7:59 am #183167
    studionoobly
    Member

    Thanks but I would like it in the header not before, I'm trying to keep it as semantically friendly as possible.

    April 8, 2016 at 8:55 am #183170
    carasmo
    Participant

    Check http://wpsites.net/ or https://sridharkatakam.com/ to see if there is a tutorial. It's pretty complicated.


    Genesis Theme Customization and Help

    April 8, 2016 at 10:24 am #183179
    studionoobly
    Member

    Thanks but can't afford what those guys charge, I'll just keep googling : ]

    April 9, 2016 at 1:05 am #183198
    Genesis Developer
    Member

    Try this code once

    add_action( 'genesis_header', 'top_bar' , 5);
    
     function top_bar() {
    
      add_filter( 'genesis_structural_wrap-header', 'gd_remove_header_wrap', 10, 2 );
      
    	echo '<div class="topbar">';
    
    		genesis_widget_area( 'topbar-bar-left', array(
    			'before' => '<div class="topbar-bar-left">',
    			'after' => '</div>',
    		) );
    
    		genesis_widget_area( 'topbar-bar-right', array(
    			'before' => '<div class="topbar-bar-right">',
    			'after' => '</div>',
    		) );
    
    	echo '</div>';
        
      remove_filter( 'genesis_structural_wrap-header', 'gd_remove_header_wrap', 10, 2 );
      
      genesis_structural_wrap( 'header' );
    }
    
    function gd_remove_header_wrap( $output, $original_output ) {
      if( $original_output == 'open' )
        return null;
        
      return $output;
    }

    Note: I did not test the code. You'll keep a backup of your functions.php file first. Then add the code and test.


    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    April 11, 2016 at 2:43 am #183355
    studionoobly
    Member

    Thanks GD.

    I tried that and it moved the top-bar above the header wrap but it also created a new wrap which then wrapped its self around the top-bar and the original wraper and it's content?

    I have found a solution thanks to https://gist.github.com/neilgee/83abf5affc2af26a527e

    Do you think this would be safe to use in terms of future Genesis theme updates or do you think this might break quite easily? Thanks.

    Here's what I did with it:

    //remove initial header functions
    remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
    remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
    remove_action( 'genesis_header', 'genesis_do_header' );
    //add in the new header markup - prefix the function name - here sm_ is used
    add_action( 'genesis_header', 'sm_genesis_header_markup_open', 5 );
    add_action( 'genesis_header', 'sm_genesis_header_markup_close', 15 );
    add_action( 'genesis_header', 'sm_genesis_do_header' );
    //New Header functions
    function sm_genesis_header_markup_open() {
    	genesis_markup( array(
    		'html5'   => '<header %s>',
    		'xhtml'   => '<div id="header">',
    		'context' => 'site-header',
    	) );
    
    			echo '<div class="topbar">';
    
    			genesis_widget_area( 'topbar-bar-left', array(
    				'before' => '<div class="topbar-bar-left">',
    				'after' => '</div>',
    			) );
    
    			genesis_widget_area( 'topbar-bar-right', array(
    				'before' => '<div class="topbar-bar-right">',
    				'after' => '</div>',
    			) );
    
    			echo '</div>';
    			
    	genesis_structural_wrap( 'header' );
    }
    function sm_genesis_header_markup_close() {
    	genesis_structural_wrap( 'header', 'close' );
    	genesis_markup( array(
    		'html5' => '</header>',
    		'xhtml' => '</div>',
    	) );
    }
    function sm_genesis_do_header() {
    	global $wp_registered_sidebars;
    	genesis_markup( array(
    		'html5'   => '<div %s>',
    		'xhtml'   => '<div id="title-area">',
    		'context' => 'title-area',
    	) );
    	do_action( 'genesis_site_title' );
    	do_action( 'genesis_site_description' );
    	echo '</div>';
    	if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {
    		genesis_markup( array(
    			'html5'   => '<aside %s>',
    			'xhtml'   => '<div class="widget-area header-widget-area">',
    			'context' => 'header-widget-area',
    		) );
    			do_action( 'genesis_header_right' );
    			add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
    			add_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
    			dynamic_sidebar( 'header-right' );
    			remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
    			remove_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
    		genesis_markup( array(
    			'html5' => '</aside>',
    			'xhtml' => '</div>',
    		) );
    	}
    }
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble