New Widget Area

[Martin]

Hi Jason,
could you please advice in short the best strategy to add new widget area using Child theme?
I need to create Wdiget area on the right sidet of #header (the palce, when Alyeska theme has Soacial icons and “Call now”).

Thanks a lot
Martin

Topic

[karlo]

If in a hurry and cant wait just copy and paste from docs http://dev.themeblvd.com/tutorial/addremove-widget-area-location/. I did a “header-right” yesterday, works. Need some naming scheme that make sense to you plus lookup of hooks but real easy. Also a bit of difference between collapsible and static or what the opposite of collapsible is 🙂

/* http://dev.themeblvd.com/tutorial/addremove-widget-area-location/ */
themeblvd_add_sidebar_location( 'header_widget', 'Header Right', 'collapsible', 'Widget for header' );
add_action( 'themeblvd_header_addon', 'display_header_widget' );
function display_header_widget() {
	echo '';
	themeblvd_display_sidebar( 'header_widget' );
	echo '';
}

I should change mine as I actually put 2 widgets in there where 1 is at the far left, 1left-logo/title-1right setup but then again hook seems to be at the right. Can make you think, heh. If you add a bunch it is nice names make sense.

• This reply was modified 8 years, 8 months ago by karlo.

[Jason Bobich]

Hello guys,

@karlo — That is perfect. Thanks for posting.

@Martin —

So, in general, it’s a good idea to start familiarizing yourself with the hook system itself. So, your first question 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/

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 as @karlo pointed out, you can register a “sidebar location.” Basically this means that now if you wanted you could use the Widget Area manager 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/

[Martin]

Karlo and Jason,
Thanks a lot 🙂

[leestoker]

I came here to ask this very question! Awesome stuff.

[Herb Trevathan]

Ditto : ) I used the code above and worked perfectly…Thanks for the additional links to information Jason.

[iphoenix]

@karlo Works awesome. Could you post your style/media query here too? Just to compare, having trouble making the header right float under the logo.

[karlo]

I can hardly remember last week so 9 months is too long.

But thanks to Cherrytree http://www.giuspen.com/cherrytree/ I have saved some, just normal CSS.

Problem is I just realized how bad it was.

I had 1 widget to the left, logo centered, 1 search widget to the right.

So logo was centered by fiddling with percentages. left: 40%, left: 35%, = No good.

Do this instead (or google how to center an absolute positioned element) – I had no idea this was possible…:

position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

Then logo is centered all the time. Can add margin or what ever but smart centering is most important.

Under 767px or what ever you can add something like:

.header_logo_text { position: relative; }

#branding .header_logo { width: 100%; }

.widget-area-collapsible .search_in_header.widget {
	float: none;
	text-align: center;
	padding-top: 10px; }

logo comes from being position: absolute. Code before 767px will still center. Less code is better.

Not sure what was in left widget but it got something like

pull-left text-center hide_on_tablet_and_mobile

so automatically vanish at some point. Is floated and text centered. I bet search widget had a .pull-right. Helper classes http://getbootstrap.com/2.3.2/components.html#misc – might or might not make life easier. Is supposed to be smart and save on repeating CSS code.

[karlo]

How to add what ever class and more to any widget: http://cleverness.org/plugins/widget-css-classes-plugin/ is mandatory, one day something like this will be in core I think. Make some sense of it all, including those helper classes. I see JetPack have added a little Widget Logic feature already.

[Author]

Replies