ThemeShaper Forums » Thematic

[closed]

widgets in the header

(77 posts)
  • Started 10 years ago by kingsinger
  • Latest reply from mrmikeman
  • This topic is resolved
  1. My fault .. 'after_widget' => "</li>\n", is correct and </ul> too .. don't know why both of them got lost :-)

    Thanks a lot for your help!

    Cheers,

    Chris

    Posted 10 years ago #
  2. KateFox
    Member

    I'm trying to use this answer to put two widgets in my header, one on each side of the title/description. So far, so good - except that I'm getting the right widget below the line and can't seem to get it to move into line. I know I'm doing something stupid and will smack myself in the forehead when you show me the error of my ways:

    Here's the CSS in style.css in my child theme:

    '#header_box {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 960px;
    }

    /* Moves blog name & description to the center */
    #branding {
    float: right;
    width: 400px;
    margin: 0 320px 0 0;
    padding: 50px 0 0 0;
    }

    /* Moves the new widgetized area to the left and levels it with #branding */
    #headerleft-aside {
    float: left;
    width: 190px;
    padding: 50px 0 0 0;
    margin: 0 0 0 0;
    }

    /* Moves the new widgetized area to the right and levels it with #branding */
    #headerright-aside {
    float: right;
    width: 220px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    }

    /* This will clear the floats and keeps the access bottom line
    from jumping into the air */
    #access {
    clear: both;
    }
    '

    And here's what I added to my child theme functions.php:

    'function my_widgets_init() {
    register_sidebar(array(
    'name' => 'Header Left Aside',
    'id' => 'headerleft-aside',
    'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
    'after_widget' => "\n",
    'before_title' => "<h3 class=\"widgettitle\">",
    'after_title' => "</h3>\n",
    ));
    register_sidebar(array(
    'name' => 'Header Right Aside',
    'id' => 'headerright-aside',
    'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
    'after_widget' => "\n",
    'before_title' => "<h3 class=\"widgettitle\">",
    'after_title' => "</h3>\n",
    ));
    }
    add_action( 'init', 'my_widgets_init' );
    // adding the widget areas to your child theme header
    function my_header_widgets() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('headerleft-aside') ) {
    echo '<div id="headerleft-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
    dynamic_sidebar('headerleft-aside');
    echo '' . "\n" . ''. "\n";
    echo '' . "\n" . '</div><!-- #headerleft-aside .aside -->'. "\n";
    echo "\n" . '</div><!-- #header-box -->'. "\n";
    }
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('headerright-aside') ) {
    echo '<div id="headerright-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
    dynamic_sidebar('headerright-aside');
    echo '' . "\n" . ''. "\n";
    echo '' . "\n" . '</div><!-- #headerright-aside .aside -->'. "\n";
    echo "\n" . '</div><!-- #header-box -->'. "\n";
    }
    }
    add_action('thematic_header', 'my_header_widgets', 8);
    function remove_branding() {
    remove_action('thematic_header','thematic_brandingopen',1);
    }
    add_action('init', 'remove_branding');
    function my_brandingopen() { ?>
    <div id="header_box">
    <div id="branding">
    <?php }
    add_action('thematic_header','my_brandingopen',1);
    ?>'

    Posted 10 years ago #
  3. hasanz
    Member

    i raed all the threads about adding widgets and even tried adding some code wich chris said but since i hv no php knowlwdge and no idea abt css therefor i am unable to do it properly. wen i tried wat ws mentioned in one of the post my widget was appearing above the category bar and another time my category bar moved all the way up! so am at a complete loss what to do...i wud really appreciate it if chris could please paste the codes for me i am posting my green commune function and style file
    also as an after thought i want another widgetize area so that i dont have to bother you guys for at least soem time so am posting another image of where i want widgets...so please tell me the codes i need to put in functions and style.css and where exactly i have to put them

    thanx a million

    and here is wat i exactly want
    http://img30.imageshack.us/img30/106/greencommunewidgetswant.png

    style.css for green commune
    http://pastebin.com/m446a3cc5

    functions,php for green commune
    http://pastebin.com/m4cb89bf7

    please help

    Posted 10 years ago #
  4. Is there a way to get this inside the Access div instead of the Branding div?

    Posted 10 years ago #
  5. Try this one: Add search box to the Thematic menu :)

    Chris

    Posted 10 years ago #
  6. Thank you for the pointer sir, exactly what I needed:)

    Posted 10 years ago #
  7. Just a quick update on this. It worked great, but after some css editing I discovered that after doing this, the menu dropdowns were being hidden in IE6. To solve this, I had to add a z-index:1; to my header div to make sure it was at the bottom of the CSS stack.

    Hope this helps if someone else comes across this issue:)

    Posted 10 years ago #
  8. Chris --

    I have edited the first bit of code you first posted in this topic and edited to create a primary and secondary header widget area for Thematic Power Blog. However, the widgets do not show up in the backend on the widgets admin screen or the frontend on the index page. This is the code I am using in functions.php :


    // adding the primary header widget area to your child theme
    function my_primary_header_widgets() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-primary-aside') ) {
    echo '<div id="header-primary-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
    dynamic_sidebar('header-primary-aside');
    echo '' . "\n" . '</div><!-- #header-primary-aside .aside -->'. "\n";
    }
    }
    add_action('thematic_header', 'my_primary_header_widgets', 8);

    // adding the secondary header widget area to your child theme
    function my_secondary_header_widgets() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-secondary-aside') ) {
    echo '<div id="header-secondary-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
    dynamic_sidebar('header-secondary-aside');
    echo '' . "\n" . '</div><!-- #header-secondary-aside .aside -->'. "\n";
    }
    }
    add_action('thematic_header', 'my_secondary_header_widgets', 8);

    Any thoughts on what I've done wrong? Still trying to wrap my head around functions.

    Posted 10 years ago #
  9. Hi Raquel,

    have you registered header-primary-aside and header-secondary-aside?

    Chris

    Posted 10 years ago #
  10. I'm going to say I have not since I don't even know what "registering" them means. I'm really trying to understand functions. Not sure why I can't get a grip on them.

    Posted 10 years ago #
  11. That's this part here:

    function my_widgets_init() {
        register_sidebar(array(
            'name' => 'Header Primary Aside',
            'id' => 'header-primary-aside',
            'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
            'after_widget' => "\n",
            'before_title' => "<h3 class=\"widgettitle\">",
            'after_title' => "</h3>\n",
        ));
    
        register_sidebar(array(
            'name' => 'Header Secondary Aside',
            'id' => 'header-secondary-aside',
            'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
            'after_widget' => "\n",
            'before_title' => "<h3 class=\"widgettitle\">",
            'after_title' => "</h3>\n",
        ));
    }
    add_action( 'init', 'my_widgets_init' );
    Posted 10 years ago #
  12. WP needs to know that there's a sidebar with the name 'whatever' .. this is done with register_sidebar().. the second part is your code telling WP where to place the sidebar in your blog.

    Posted 10 years ago #
  13. Thank you Chris. A most patient teacher you are!

    Posted 10 years ago #
  14. How would you remove widget area "if" the widgets are not active?

    Posted 10 years ago #
  15. Hi,

    what do you mean by 'not active'?

    If you haven't defined any widgets, the code wouldn't even create the css markup. Something different would be if using widget logic or something similar.

    Haven't checked widget logic 'til now. Don't know if there's a way to check if the defined conditional tag will set the widgets to 'not active'.

    Chris

    Posted 10 years ago #
  16. afineman
    Member

    Thanks for all the great tips and tricks.

    I am wondering if there is a good method of having more than one widget area in the header?

    Thanks,
    Aaron

    Posted 10 years ago #
  17. Hi Aaron,

    with the current svn copy of Thematic you can create as many widget areas as you want.

    Take a look here: Something new 'bout widgetized areas

    Chris

    Posted 10 years ago #
  18. parmenti
    Member

    how do I add a second widgitized area to functions.php via this method? It seems when I try to duplicate the code a second time I get a blank screen. I've renamed all the appropriate areas and changed the add action #.. what do you suppose needs to be done?

    Posted 10 years ago #
  19. yahyaayob
    Member

    Thanks everyone! Esp Chris! Thank you. Take a look at what you guys help me do with the header in http://www.watchwerkz.com.sg/wp

    Couldn't do this without you guys!

    You guys ROCK!!! =)

    Posted 10 years ago #
  20. I used the initial code posted by Chris for the fuctions.php file, and I noticed that when I put a background color on the div#wrapper, that it no longer wrapped the entire content of the page.

    Removing the following line from the code fixed the problem:

    echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";

    Posted 9 years ago #
  21. Hobrecht
    Member

    Hi guys.
    Sorry, I dont't get it. What I thought would work - didn't.
    Just a blank page or no change.

    I'd like to have two widgets in the header.
    One at "thematic_brandingopen()" for a metanavigation
    and one at "thematic_brandingclose()" for the mainnavigation.

    http://forums.themeshaper.com/topic/widgets-in-the-header/page/2#post-6196 didn't work for me and I don't understand what's going on here: http://forums.themeshaper.com/topic/something-new-bout-widgetized-areas#post-6601

    Thanks,
    Hobrecht

    Posted 9 years ago #
  22. shaggy
    Member

    It looks like there were several pasting errors and fixes.

    What is the final code to add to the function.php?

    I think I've copied every version in here, and it doesn't validate and they cause major problems with IE6 and IE7.

    Thanks

    Posted 9 years ago #
  23. shaggy
    Member

    Are header widgets going to be added to a future release of Thematic?

    Posted 9 years ago #
  24. kga
    Member

    I'll second that - can someone please state what the correct code is for the functions.php file, to place a widget in the header?

    I used the section that Chris suggested right off the bat in this thread, but it gave me the White Screen of Death at random.

    Posted 9 years ago #
  25. Hi,

    As far as I know there is no plan to add widgets in the Header by default in Thematic.

    Chris offered up a good solution for this and it will work with Thematic .9.6.2

    http://forums.themeshaper.com/topic/something-new-bout-widgetized-areas#post-6660

    -Gene

    Posted 9 years ago #
  26. kga
    Member

    Gene - with that suggestion from Chris, I get TWO #access navigation menus?

    I installed both snippets he suggested, but the second one is weird and thats the one that created two navigation menus.

    I removed that second snippet which is this - removing the second one got rid of the dual nav menus BUT I'M STILL GETTING A BLANK WHITE SCREEN RANDOMLY!!!! WHAT THE HELL?

    // First we remove the thematic_brandingopen() .. we're going to make one addition for this one.
    // And we remove thematic_access() .. will be added later unchanged with a priority of 10.
    function remove_branding() {
    		remove_action('thematic_header','thematic_brandingopen',1);
    		remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_branding');
    
    // We wrap #branding and #header-aside with #header-box
    function childtheme_brandingopen() { ?>
    	<div id="header_box">
        	<div id="branding">
    <?php }
    add_action('thematic_header','childtheme_brandingopen',1);
    
    // Now we need to close #header-box
    function header_box_close() { ?>
    	</div>
    <?php }
    add_action('thematic_header', 'header_box_close', 9);
    
    // And we add the unchanged thematic_access() with the new priority 10
    add_action('thematic_header','thematic_access', 10);

    Actually here is the entire post I thought I'd throw in here to keep from going back and forth:

    FROM CHRIS:

    Adding a new widgetized area .. took my favorite one .. the header aside:

    First code is needed to create the widgetized area:

    function add_header_aside($content) {
    	$content['Header Aside'] = array(
    		'args' => array (
    			'name' => 'Header Aside',
    			'id' => 'header-aside',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header',
    		'function'		=> 'thematic_header_aside',
    		'priority'		=> 8,
    	);
    	return $content;
    }
    add_filter('thematic_widgetized_areas', 'add_header_aside');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_aside() {
    	if (is_sidebar_active('header-aside')) {
    		echo thematic_before_widget_area('header-aside');
    		dynamic_sidebar('header-aside');
    		echo thematic_after_widget_area('header-aside');
    	}
    }
    
    The following code will change the header as needed:
    
    // First we remove the thematic_brandingopen() .. we're going to make one addition for this one.
    // And we remove thematic_access() .. will be added later unchanged with a priority of 10.
    function remove_branding() {
    		remove_action('thematic_header','thematic_brandingopen',1);
    		remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_branding');
    
    // We wrap #branding and #header-aside with #header-box
    function childtheme_brandingopen() { ?>
    	<div id="header_box">
        	<div id="branding">
    <?php }
    add_action('thematic_header','childtheme_brandingopen',1);
    
    // Now we need to close #header-box
    function header_box_close() { ?>
    	</div>
    <?php }
    add_action('thematic_header', 'header_box_close', 9);
    
    // And we add the unchanged thematic_access() with the new priority 10
    add_action('thematic_header','thematic_access', 10);

    Plus the CSS:

    #header_box {
    	clear: both;
    	margin: 0 auto;
    	overflow: hidden;
    	position: relative;
    	width: 960px;
    }
    
    #branding {
      float: left;
      width: 620px;
    }
    
    /* Moves the new widgetized area to the right and levels it with #branding */
    #header-aside {
      float: right;
      width: 300px;
      padding: 88px 0 44px;
    }
    
    /* This will clear the floats and keeps the access bottom line
    from jumping into the air */
    #access {
      clear: both;
    }

    Checked!

    Please keep in mind ... to add an additional widgetized area normally only the first code section is required!

    Chris

    I am running the latest Thematic, latest WP and what-not. I just want my WP Ecomm cart in the header. Any help would be great. Sorry, I'm building this locally so I can't provide a link.

    KG

    Posted 9 years ago #
  27. The white page is coming from a parse error: syntax most likely. Somewhere in your edits of the functions.php , you have missed a semicolon or closing parenthesis or something. Try to revert back a few steps and begin your edits again. I'm taking a deeper look at what your trying currently.

    Posted 9 years ago #
  28. kga
    Member

    I'll paste in my entire functions.php here - I really don't see any problems, but I'm not a PHP master either.

    Posted 9 years ago #
  29. kga
    Member


    <?php

    // Remove default Thematic actions
    function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
    }
    add_action('init','remove_thematic_actions');

    // Create a custom access div with the menu and search box
    function search_access() { ?>
    <div id="access">
    <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div>
    <?php wp_page_menu('sort_column=menu_order') ?>

    <div id="access-search">
    <form id="searchform" method="get" action="<?php bloginfo('home') ?>">
    <div>
    <input id="s" name="s" class="searchfield" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />
    <input id="searchsubmit" name="searchsubmit" input type="image" src="http://www.fasstco.com/wp/wp-content/themes/fasstco/siteimages/button_search.png" class="searchbutton" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
    </div>
    </form>
    </div>

    </div><!-- #access -->
    <?php }
    add_action('thematic_header','search_access',9);

    ?>

    <?php
    function add_header_aside($content) {
    $content['Header Aside'] = array(
    'args' => array (
    'name' => 'Header Aside',
    'id' => 'header-aside',
    'before_widget' => thematic_before_widget(),
    'after_widget' => thematic_after_widget(),
    'before_title' => thematic_before_title(),
    'after_title' => thematic_after_title(),
    ),
    'action_hook' => 'thematic_header',
    'function' => 'thematic_header_aside',
    'priority' => 8,
    );
    return $content;
    }
    add_filter('thematic_widgetized_areas', 'add_header_aside');

    // And this is our new function that displays the widgetized area
    function thematic_header_aside() {
    if (is_sidebar_active('header-aside')) {
    echo thematic_before_widget_area('header-aside');
    dynamic_sidebar('header-aside');
    echo thematic_after_widget_area('header-aside');
    }
    }
    ?>

    Posted 9 years ago #
  30. kga
    Member

    Also though - I'd like to understand his method - why remove branding & access and "reinstall" them? From the way I see it, header elements are being removed so they can then be wrapped in #header_box..but....why? And especially when it works just as I need, when I keep the follow piece out.

    And, like I said when I follow his second function I get two #access divs which layers two of the #access navigation menus.

    FROM CHRIS:

    The following code will change the header as needed:

    // First we remove the thematic_brandingopen() .. we're going to make one addition for this one.
    // And we remove thematic_access() .. will be added later unchanged with a priority of 10.
    function remove_branding() {
    remove_action('thematic_header','thematic_brandingopen',1);
    remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_branding');

    // We wrap #branding and #header-aside with #header-box
    function childtheme_brandingopen() { ?>
    <div id="header_box">
    <div id="branding">
    <?php }
    add_action('thematic_header','childtheme_brandingopen',1);

    // Now we need to close #header-box
    function header_box_close() { ?>
    </div>
    <?php }
    add_action('thematic_header', 'header_box_close', 9);

    // And we add the unchanged thematic_access() with the new priority 10
    add_action('thematic_header','thematic_access', 10);

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.