How to add a menu bar and a top-right widget area to the Studio theme (step-by-step)

This is a follow-on to my last Studio mod, and this may have implications for BuddyPress users. I'll note that below.

Basically, this mod moves the menu from the upper-right side of the page to its own menubar, and then widgetizes that upper space. You can see that in the screenshot of my partially completed page, below.

Please note that this assumes you've done the steps outlined in [DIY] How to add a second row of widgets to the Studio theme (step-by-step). If you haven't, then you won't have some files you'll need for creating the widgets. I'd recommend just following those steps first, and even if you don't use the extra widget row, you'll have all the features in place.

Okay, so let's get started.

1. From studio/library/components, copy strapline.php and place it into studio-child/library/components.

2. Edit studio-child/library/components/strapline.php. We're going to add the menubar into this module, because that way, you won't have to muck with the main header code, which might change in later versions. This is an easy place to add the module. Basically, you're adding another div right above the strapline div. Right under the line that says <!-- start site wide call to action section --> and just above the line that starts with <div id="strapline-wrapper">, place the following code chunk:

<div id="menubar-wrapper"><!-- start #menubar-wrapper -->
	<div id="menubar-holder"><!-- start #menubar-holder -->
<div id="menubar"><!-- start #menubar-->
	<!-- start navigation -->
	<div class="navigation">
	<?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav', 'container' => '', )); ?>
	</div>
<!-- end navigation -->
	<div class="clear"></div>
</div><!-- end #menubar-->
</div><!-- end #menubar-holder -->
</div><!-- end #menubar-wrapper  -->

This moves the menu into a new menubar that you can separately style.

3. Create a blank navigation.php file in studio-child/library/components/. Now that the navigation has been moved to the menubar, we'll use this existing, small component file for our top widget. Edit the file and paste in the following code:

<!-- start top widget (was navigation) -->
<div id="top-widget">
	<div class="content-block"><!-- top widget area -->
		<?php if ( !function_exists('dynamic_sidebar')
		|| !dynamic_sidebar('widgettop-area') ) : ?>
		<?php endif; ?>
	</div>
</div>
<!-- end top widget -->

4. In studio-child/functions.php (assuming you did the second-row-of-widgets steps already), you'll find a bunch of register_sidebar blocks. Add another (I put it near the top, so it shows up near the top of the widgets page). Paste the following code in:

register_sidebar(
	array(
		'name'          => __( 'Top widget', 'studio' ),
		'id'            => 'widgettop-area',
		'description'   => 'Top widget',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>'
	)
);

5. Add the following lines to your studio-child/style.css file. I've added a few color choices, but it's here you also need to pay attention if you're using BuddyPress. With BuddyPress, there's a little drop-down community tab that will drop over the menu, if you left-align the menu. So, if you're using BuddyPress, you might not want to left float .navigation. Otherwise, paste the following in style.css:

/* top widget section */
#top-widget .content-block{float: right;}
/* add menubar section */
#menubar-wrapper{background:#880000;}
#menubar-holder{width:980px;margin-left:auto;margin-right:auto;text-align:center;}
#menubar{padding:2px 0px 2px 0px;text-align:left;}
.navigation {width:980px; float: left !important; margin: 0; padding: 0 !important;}

6. Make sure you correctly set the permissions for all new files and directories.

That should get you started, at least.