Welcome! To use this support forum, please Login or Join Today!

   

Best way to add a widget in the header area?

{name}
Rank

Total Posts: 10

Joined 2011-11-10

PM

 

Hi Casey,

I would like to add a text widget area to the header on the right hand side to add business contact info like phone # and email.  That way when the theme resizes for phones and tablets it will show under the logo.

I see there is a hook for:

st_header_extras // Additional content to be added to the header

Is this the right hook to use?

I also found instructions on the forum for adding a widget in the header area for one of your other themes.  Am I on the right path if I use the other instructions along with the above hook?

Is there a better way to add a widget area in the header?

Thanks!
Eric

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

This is possible. If you just want to add some static HTML, you can add a function to your child theme’s functions.php:

function st_header_extras() {
 $extras  = '<div id="header_extras">';
 $extras .= 'your html here';
 $extras .= '</div>';
 echo apply_filters ('st_header_extras',$extras);
}

add_action('st_header','st_header_extras', 4);

You’ll then need to add some CSS to your style.css or style{x}.css for both standard AND mobile view:

/*Standard View*/

#header_extras {
 position:absolute;
 top:40px;
 right:20px;
}

/* Mobile View */

@media only screen and (max-width: 767px) {

 #header_extras {
  position:relative;
  top:0px;
  right:0px; 
 }

}


If you’re wanting to control the text via Widget, you’ll need to register a widget location in widgets.php and then call it into your st_header_extras function above.

 

{name}
Rank

Total Posts: 10

Joined 2011-11-10

PM

 

Hi Casey,

Awesome!  This will work perfectly and get my site up and running with the basic html added.  Thanks for the code!  Once I complete the site I think I will try adding the widget just for future use.  I will come back here and post instructions if I am successful :)

I also wanted to thank you for the Synapse Theme.  I bought my membership when Elements was released and asked you about making something like Presstige and Onyx into a responsive theme.  You said you would consider it and as a customer you never know if future themes will get developed or not… but you held true to your word and released Synapse.  I had my business site setup under Presstige (which is a great theme!) but now changing it to Synapse :)

I will definitely be renewing my membership when it comes time!

Thanks,
Eric

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

Thanks for this.

I added the following to functions.php in my child theme: (this way I did not edit the widgets.php so updates to the main theme do not overwrite it)

// located in the header. Empty by default.
 
register_sidebar( array(
  
'name' => __'Header Widget Area''smpl' ),
  
'id' => 'header-widget-area',
  
'description' => __'The header widget area''smpl' ),
  
'before_widget' => '<div class="%1$s">',
  
'after_widget' => '</div>',
  
'before_title' => '',
  
'after_title' => '',
 ) ); 

and then modified your header area code to:

function st_header_extras() {
 $extras  
'<div id="header_extras">';
dynamic_sidebar'header-widget-area' );
 
$extras .= 'your html here';
 
$extras .= '</div>';
 echo 
apply_filters ('st_header_extras',$extras);

So now in Widgets I added a social media widget.

Thanks!

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Nice addition. Thanks for sharing. I’ve been contemplating just adding a widget to that area in an upcoming update…so if you see a new position pop up in your Widgets area, you can just move them into there smile

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

That would actually work very well I think.

I added a social media widget and then a toll free phone number and search box as HTML.

I really could do all 3 as widgets though.

Thanks,

{name}
Rank

Total Posts: 10

Joined 2011-11-10

PM

 

Hi Maronoff,

I added your code to get a widget in the header area.  It shows up fine but it’s on the left and underneath my logo.  I added the (positioning) css from Casey’s post but it doesn’t seem to work for the header widget.

If I use the html part of Casey’s code to insert my phone and email then it it placed properly on the right hand side of the header (even with my logo)

Is there a way to position the header widget to the right side of the header?  (Even with the logo)  I thought the css code from Casey should work for the widget too :)

If you have a quick idea…. that’s great!  If not, I’ll just wait for one of Casey’s updates which hopefully will include the header widget….

Thanks!
Eric

PS - I was on vacation last week so it took a while for me to reply to your post.  Just wanted to say thanks again for your contributions on the code!

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

I use the following css in a child theme styles.css

#header .header_extras { float: right; width: 300px; text-align: right; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 100%;} 

I am no css expert. What I do sometimes is I save the page I am working on from my browser (In Firefox save as, and select complete). Then I open that page in dreamweaver to edit the css and see the result of my changes. Then I simply copy the modified style to my child theme.

I hope that helps.

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

Hey Casey, now that I have this all dialed in I realized today I need to fiure out how to do an updated landing page function to remove it. :-)

Can you help?
I tried adding

if ( !function_exists'st_landingpage' ) ) {

    
function st_landingpage() {
        
if ( is_page_template('landing-page.php') ) {
            
// Hide The logo
            
remove_action('st_header','st_logo'3);
            
// Remove Logo CSS from Head
            
remove_action('wp_head''logostyle');
            
// Remove Logo CSS from Head
            
remove_action('st_header_extras');    
            
// Hide The Main Menu
            
remove_action'st_navbar''st_main_nav'1);
            
// Hide The Footer
      
remove_action('wp_footer''st_footer',2);
        
}
    }
    add_action
('template_redirect''st_landingpage');
//endif 

To my functions.php but the new header stuff stayed put on the landing page.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

First of all, you’ll probably want to remove the function_exists conditional.
Other than that, you’re almost there. You’re missing a parameter and priority argument from the remove_action function.

This should do it:

function st_landingpage() {
        if ( is_page_template('landing-page.php') ) {
            // Hide The Main Menu
            remove_action( 'st_navbar', 'st_main_nav', 1);
            // Hide The Footer
            remove_action('wp_footer', 'st_footer',2);
            // Hide The logo
            remove_action('st_header','st_logo', 3);
            // Remove Header Extras
            remove_action('st_header','st_header_extras', 4);
            // Remove Logo CSS from Head
            remove_action('wp_head', 'logostyle');
        }
    }
add_action('template_redirect', 'st_landingpage');