New Widget Area
-
CreatorTopic
-
November 22, 2012 at 12:49 pm #796
Martin
ParticipantHi 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 -
CreatorTopic
-
AuthorReplies
-
November 22, 2012 at 1:58 pm #798
karlo
ParticipantIf 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 10 years, 2 months ago by
karlo.
November 22, 2012 at 7:35 pm #808Jason Bobich
KeymasterHello 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/
November 22, 2012 at 8:48 pm #813Martin
ParticipantKarlo and Jason,
Thanks a lot 🙂November 23, 2012 at 5:40 pm #824leestoker
ParticipantI came here to ask this very question! Awesome stuff.
February 14, 2013 at 5:52 pm #4085Herb Trevathan
ParticipantDitto : ) I used the code above and worked perfectly…Thanks for the additional links to information Jason.
September 13, 2013 at 8:50 pm #11572iphoenix
Participant@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.
September 13, 2013 at 11:54 pm #11573karlo
ParticipantI 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.September 14, 2013 at 12:04 am #11574karlo
ParticipantHow 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.
-
This reply was modified 10 years, 2 months ago by
-
AuthorReplies
- You must be logged in to reply to this topic.