Welcome to the PageLines Forum. First check out the PageLines Docs to see if we have already answered your question. Before you post please read the forum guidelines.
Upcoming “PageLines Developer Essential Training”
Latest news regarding the developer training videos Click here!
Add widget area to right of branding Part 2
  • Hi, I'm reposting this (slightly modified for clarity) because I marked the original thread "accepted" accidentally (newbie) and am still trying to find an answer to this question which I think will interest many people.

    I'm trying to add a widget area to the right of my branding (above the social media) and can't figure out how to do this. I want to use a plugin for text sizing in that area.

    If I try to add a universal sidebar it goes either below or above but not to the right...

    Please help! I have seen so many sites with content to the right (such as a phone number, etc) of the logo on the "same level" visually--why can't it be done easily with Pagelines?? This should be implemented as it's a hot spot for ads, etc. and prime real estate.

    Other notes:
    I'm using the new 2.0 framework.

    From another post tip I found on Paglines forum, I used the Custom Widget Area plugin http://wordpress.org/extend/plugins/custom-widget-area/. They give PHP code to insert (from the Custom Widget Area plugin in the repository).

    The code is:

    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) :

    endif;

    Where do I put this? I tried adding the below code to my functions.php file and it didn't work...(you can go to my site http://cabvi.mpwclient.com and see how the code actually pops up in the actual layout...but that's better than breaking it completely which i did a few times)...

    // add_action('hook_name','function name');
    add_action('pagelines_before_branding_icons', 'new_widgetarea');

    // function name
    function new_widgetarea(){?>

    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) :

    endif;

    <?php }

    // end function

    My site is http://cabvi.mpwclient.com

    Thanks in advance!
    Best,
    Tan
  • add_action('pagelines_branding_icons_start', 'add_phone_number_');
    
    function add_phone_number_( ) {
    ?>
    
    <a style="height:24px;width:200px;float:right" href="http://www.google.com"><img src="http://www.webroot.com/images/phone.gif"></a>;
    
    <?php
    }
    

    No need to go mad with a widget.
  • Hi Simon, I'm sorry if I wasn't clear but it's not because I want to add a phone number--I need to a add a plugin for a text sizer for accessibility for visual impaired visitors. Therefore, I need widget area.
    Thanks!
    Tan
  • Tandan, I don't believe you can do what you're suggesting in the header. Yes, you can replace the entire header with the Full-Width or Universal Sidebar, but that knocks out everything else in the header like branding, navigation, social media icons, search, etc. Simon's example with the phone number was to demonstrate how to add something to the right of the branding, not to suggest you can only place a phone number there.

    Let's say you wanted to insert some code to give people a choice of CSS files that control font sizes and used a typical font size chart to show that. You could edit this part of Simon's example to suit your own needs:
    <a style="height:24px;width:200px;float:right" href="http://www.google.com"><img src="http://www.webroot.com/images/phone.gif"></a>;
    
    The float right part is very important though, so make sure you leave style="float:right" in your <a href tag. This ensures that whatever you added doesn't overlap or conflict with the actual logo.
    PageLines Moderator, Renaissance Man, Food Expert and Raconteur

    Tell us how we are doing in 15 seconds or less
  • Hi Rangelone, thanks for your response.

    However based on the followinghttp://www.pagelines.com/forum/discussion/11387#Item_7 discussion, it should be able to be done with "hooks".

    Can anyone help me out with how to put a "hook" into the 2.0 framework???

    I bought this framework because it was supposed to be a drag and drop platform and i can't believe i can't use this very prime real estate on my web page as a widget area. Already the idea and implementation of hooks is more than i bargained for when buying this! I need some help for that or else this framework is useless for me...Please help!

    No one has posted follow-up if they've figured it out (I surely will) so I can't tell if any solution has worked...

    Thanks in advance!
  • To get a better idea of what hooks are and what they can do, please see here: http://www.pagelines.com/wiki/Hooks. I can go through hook implementation step by step if you'd like.
    Thanked by 1tandan
  • hi catrina! thank you! i figured out that the best area (i believe) for the widget is "pagelines_before_branding_icons" is that correct? then i pasted the following code into my functions.php file after installing the plugin (please see thread above):
    // add_action('hook_name','function name');
    add_action('pagelines_before_branding_icons', 'new_widgetarea');
    
    // function name
    function new_widgetarea(){?>
    
    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) :
    
    endif;
    
    <?php }
    
    // end function
    

    it didn't work. please see the site at: http://cabvi.mpwclient.com/

    this obviously is NOT right since the code shows up mysteriously under my branding. could you please walk me through it? i'd greatly appreciate it.

    best,
    tan
  • Not sure what your hoping to achieve with this code, If you gave us whatever you want to put in the widget we might be able to help you, the branding icons are floating divs, thats why it is going to be tricky.

    Your 'code' will never work for a couple of reasons...

    your function is immediately closing the php tag, thats why your getting text printed to the page...

    also !function_exists('dynamic_sidebar') This checks for the existence of the wordpress core sidebar support, which was added in version 2.2 back in May 2007, so unless your planning to run a 6 year old theme you really do not need that ;)
    Thanked by 1tandan
  • Hi Pross,

    Thanks for your response! I'm trying to add this plugin: http://wordpress.org/extend/plugins/auto-font-resizer-plugin-for-wordpress/ to the area above the social media. if you can help implement, that would be fantastic!!

    as for your statement:
    your function is immediately closing the php tag, thats why your getting text printed to the page...
    I have NO IDEA what "closing the php tag" means. :) can you tell me exactly what i should put there and i can cut and paste it?

    also that code you mentioned is given to me on the plugin page here: http://wordpress.org/extend/plugins/custom-widget-area/ as what i should put in...i have no idea what it does or why it is needed but no, i'm not planning on running a 6 year old theme. :)

    basically to sum this whole very long thread up: i need to put a text size plugin into the area to the right of my branding and above the social media. i have no idea how to do this and what i've found is based on other pagelines support solutions after extensive searching. i thought this would be drag and drop but apparently it's not and i'm super frustrated. any help you could give to help make this happen would be greatly appreciated.

    i've killed a whole day just trying to figure out a solution and waiting for responses and it's so frustrating when i thought i'd be getting a drag and drop solution. do you know if this will this area be a widgetized section in a future update? any news on that? otherwise this framework won't work for me because the first thing any client asks me for is some functionality up there. if i'm lucky it's just text but sometimes it's not, like this instance. i would have been better of getting a premium theme with a widgetized header area and using that and saving tons of money...

    thanks for your help and expertise...

    best, tan
  • We have a universal full width sidebar already built in. Takes 2 mins to do.

    So add the universal sidebar template to header, put it at the top.

    The go to widgets page, add the resizer widget to the universal sidebar...

    Now on your page the resizer will appear in the header. Add this css to float it:
    .widget_auto_font_resizer {
        float: right;
    }
    

    Job done.
  • hi pross,

    i've tried that to begin with and i can't use the universal sidebar because it takes up full-width. I need it to be exactly in the area to the right of the branding. unless that CSS floats it BELOW the universal sidebar template into the branding region, that won't work.

    any other ideas? i believe the idea of "hooks" seemed to be the best solution if you could explain to me how to use it to implement the plugin.

    thanks,
    tan
  • tan,

    Unfortunately, the hook is not going to be the only thing necessary to affect a widget in the header. This goes to a very intensive customization where the entire header section needs to be re-coded to include widgets which do not normally go into that area. You're asking for far more customization than can be provided in the forum. Please request a quote for one of our Professional developers by writing to hello@pagelines.com. If that's not suitable, please simply add your widget to the top of your sidebar because coding it into the header will be extremely difficult and cannot be done here in the forum.
    PageLines Moderator, Renaissance Man, Food Expert and Raconteur

    Tell us how we are doing in 15 seconds or less
    Thanked by 1tandan
  • Hi Tan,

    Can you please add the sidebar again to your site so I can take a look please. Reply here, when the sidebar is active.
    Most commonly asked CSS tweaks
    Get Firebug - Will make your life much easier!
    Please do not send me a PM, unless I ask you too!

    Tell us how we are doing in 15 seconds or less
    Thanked by 1tandan
  • hi danny, thank you for your help. the universal sidebar IS active (the text size plugin is in it) and i need the plugin to be moved into the area to the right of the logo and above the social media...and in the process eliminate the extra space created by the universal sidebar. if you need login info, let me know. thank you!!!
    http://cabvi.mpwclient.com/
  • simple_mamasimple_mama
    @simple_mama
    This answer was Accepted.
    Add the following to your custom CSS code:
    ul#list_sb_universal {
        margin-top: -180px;
        position: absolute;
        right: 0;
        z-index: 10;
    }
    

    Learn how to figure out the custom CSS you need on your own with Firebug. :)
    ♥ jenny :: moderator, help desk guru, blog designer at Simple Mama
    Simple CSS Lite: your navigation CSS lifesaver || Don't like the default PageLines sharebar? Check out ShareBar Extended

    Tell us how we are doing in 15 seconds or less
    Thanked by 1tandan
  • JENNY! YOU ROCK! THANK YOU! :) it worked beautifully.
  • You're welcome :)
    ♥ jenny :: moderator, help desk guru, blog designer at Simple Mama
    Simple CSS Lite: your navigation CSS lifesaver || Don't like the default PageLines sharebar? Check out ShareBar Extended

    Tell us how we are doing in 15 seconds or less

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

Tagged

Weekly Karma