Floating widget help

[webmktgco]

I just updated the BC theme and I’m trying to figure out the whole floating widget thing.

I’d like to have a widget to the right of the logo in the header. How can I enable this?

Topic

[Jason Bobich]

Hello,

The theme does not contain any widget area location in this area. This will be a customization you’ll need to make to the theme. Here’s some helpful information on the topic copied from this topic on another theme.

==========

This will only be possible through your own PHP customizations. With the framework’s hook system, this can all be accomplished from your Child theme’s functions.php.

Part 1: Add your content to the header

In general, it’s a good idea to start familiarizing yourself with the hook system itself and what a WordPress action hook even is. So, your the question here is basically “How do I put something in the right side of the header?”

And the answer would be to hook your custom content to “themeblvd_header_addon” and then position it with CSS. You can quickly see that by checking out the actions map:

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

With Alyeska specifically, you’re going to have to also unhook what’s already there (which is the social icons). So an example of removing the social icons and just outputting some text in would be to do something like this:

/**
 * 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' );

Part 2: How to create a widget area

The next question is essentially, “How do I create and display a widget area?” If you’re just trying to do this in WordPress in general, it’s very easy. Register it from your Child theme’s functions.php and display it within whatever function you’re hooking into the header.

Now if you want to get fancy and use some of the framework’s unique things, you can register a “sidebar location.” Basically this means that now if you wanted, you could use the tools at Appearance > Widget Areas to then create custom widget areas that could then be swapped into that header location depending on different pages and what not.

The full breakdown on that is here:

http://dev.themeblvd.com/tutorial/widget-areas-for-the-end-user/#widget-area-locations

http://dev.themeblvd.com/tutorial/default-widget-area-locations/

http://dev.themeblvd.com/tutorial/addremove-widget-area-location/

Part 3: Putting the header content and new widget area together.

To expand on the original code snippet supplied in Part 1 and incorporate what’s discussed here, it would look something like this:

/**
 * Add new sidebar location.
 */
themeblvd_add_sidebar_location( 'my_header_widget_area', 'My Header Widget Area', 'collapsible' );

/**
 * My header content
 */
function my_header_content() {
	echo '<div id="header-widget-area">';
	themeblvd_display_sidebar( 'my_header_widget_area' );
	echo '</div>';
}
add_action( 'themeblvd_header_addon', 'my_header_content' );

Part 4: Position your resulting HTML with CSS

Then, the last step would be just to position your widget area with some CSS. For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits in your child theme‘s custom.css file.

So, possibly you could do something like this:

#header-widget-area { float: right; }

[webmktgco]

Thanks for the in depth explanation!
I’m pretty good w/ CSS, HTML, and some PHP; but hooks, functions.php, etc are a little over my head.

May have to figure something else out.

Thanks!

[Author]

Replies