Where do I find the Header Area (for widgets) in Commodore?

[kbarndt]

Trying to reproduce the Complexity layout in Commodore for a client site. Everything is going well, except I can’t find a way of placing widgets in the right-hand side of the header, opposite the logo.

Any suggestions? I can’t find any settings in Builder or Widget areas for the Header Area.

Thanks (and great job with the theme — very easy to make the jump from Complexity 2 to Commodore).

Topic

[Jason Bobich]

Hello,

Unfortunately, there is no feature for inserting widgets into the header to the right of the logo like there was in the old theme. You can insert widgets above and below the header, but not within the header. This would only be possible through PHP customization from a child theme. If you’d like me to expand on that and point you to the right subjects for such a customization, just let me know.

[kbarndt]

Thanks for the fast reply. If you could point me to some resources to help me make the customization myself, that would be great.

Thanks again.

[Jason Bobich]

First make sure you have a child theme setup. All of your PHP customizations will go in its functions.php, and all of your CSS edits will go in its style.css.

Child theme video: http://vimeo.com/70832266

The first thing you’ll need to do is actually register a widget area. You do this with register_sidebar function.

$args = array(
	'name'	=> 'My Sidebar',
	'id'	=> 'my-sidebar'
);
register_sidebar( $args );

http://codex.wordpress.org/Function_Reference/register_sidebar

Then, you need to output that widget area. First to output content anywhere, in general, you’ll want to understand action hooks. The theme framework makes great use of this brilliant concept by WordPress.

http://dev.themeblvd.com/tutorial/actions/

Then, if you checkout our framework’s action hook map, you’ll see that, in this case, you most likely want to hook your content to the “themeblvd_header_addon” action.

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

Here’s a basic example:

/**
 * My header content
 */
function my_header_content() {
	echo 'This content will show in the header.';
}
remove_all_actions( 'themeblvd_header_addon' );
add_action( 'themeblvd_header_addon', 'my_header_content' );

Now, you can take the above and modify it to actually output the sidebar you registered, using the dynamic_sidebar function.

http://codex.wordpress.org/Function_Reference/dynamic_sidebar

/**
 * My header content
 */
function my_header_content() {
	dynamic_sidebar('my-sidebar');
}
remove_all_actions( 'themeblvd_header_addon' );
add_action( 'themeblvd_header_addon', 'my_header_content' );

The last thing would just be any CSS styling to get the widget actually showing how you want and placed how you want in the header. By default it’s not going to naturally sit to the right of the header. You’ll need to float it right, or position it absolute, etc.

[kbarndt]

Thanks again! Exactly what I needed.

One question, tho. Why would the widget content show up in the header wrapped in a

<li>

tag instead of a

<div>

?

The widget content is placed inside a “Text” widget.

Here is the code I added to my child functions.php:

$args = array(
	'name'	=> 'Selerix Header',
	'id'	=> 'selerix-header'
);
register_sidebar( $args );


/**
 * My header content
 */
function my_header_content() {
	dynamic_sidebar('selerix-header');
}
remove_all_actions( 'themeblvd_header_addon' );
add_action( 'themeblvd_header_addon', 'my_header_content' );

And here is the relevant HTML source from the resulting page:

<div id="top">
			<header id="branding" role="banner">
				<div class="content">
					<div class="header-above"></div><!-- .header-above (end) -->	<div id="header_content">
		<div class="header_content-inner">
			<div class="header_content-content clearfix">
					<div class="header_logo header_logo_image">
		<a href="http://marketingtestsite.com/wp" title="marketingtestsite.com" class="tb-image-logo"><img src="http://marketingtestsite.com/wp/wp-content/uploads/2012/04/Selerix-logo_tagline-e1309189730227.png" alt="marketingtestsite.com" width="218" /></a>	</div><!-- .tbc_header_logo (end) -->
	<li id="text-5" class="widget widget_text">			<div class="textwidget"><strong><a href="http://www.selerix.com/wp/contact/">CONTACT US</a></strong><br><img src="http://www.selerix.com/wp/wp-content/uploads/2011/07/phone.png" /> (469) 452-7076<br>
<img src="http://www.selerix.com/wp/wp-content/uploads/2011/07/email.png" /><a href="mailto:sales@selerix.com" title="Email Us"> sales@selerix.com</a></div>
		</li>
<li id="text-6" class="widget widget_text">			<div class="textwidget"><a href="http://www.benselect.com/">www.BenSelect.com</a><br>
<a href="http://www.benefitagent.com/">www.BenefitAgent.com</a></div>
		</li>
			</div><!-- .header_content-content (end) -->
		</div><!-- .header_content-inner (end) -->
	</div><!-- #header_content (end) -->
					</div><!-- .content (end) -->
			</header><!-- #branding (end) -->
		</div><!-- #top (end) -->

		<!-- HEADER (end) -->

[Jason Bobich]

Checkout the docs for the register_sidebar function I linked you to above. When you call that function, you can pass in more stuff through the $args. By default in WordPress it’s setup for the before/after arguments to be markup for a list items wrapping widgets.

[kbarndt]

Doh! Yes, the answer was right there.

Thank you again for your superlative support.

[Author]

Replies