This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

New Widget Area

  • Creator
    Topic
  • #796
    Martin
    Participant

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • #798
    karlo
    Participant

    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 ago by karlo.
    #808
    Jason Bobich
    Keymaster

    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/

    #813
    Martin
    Participant

    Karlo and Jason,
    Thanks a lot 🙂

    #824
    leestoker
    Participant

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

    #4085
    Herb Trevathan
    Participant

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

    #11572
    iphoenix
    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.

    #11573
    karlo
    Participant

    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.

    #11574
    karlo
    Participant

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.