ThemeShaper Forums » Thematic

[closed]

widgets in the header

(77 posts)
  • Started 5 years ago by kingsinger
  • Latest reply from mrmikeman
  • This topic is resolved
  1. kingsinger
    Member

    The image I use for my blog title really only takes up the left side of my layout. It seems like it might be cool to have the option of putting some widgets to the right of the logo, so it would be easy to insert test or images in this spot, moving forward.

    One of the thing that appeals to me about thematic is that it already has so many parts of the layout widgetized. But the hears is missing. Are there reasons why widgets int he head is are a bad idea?

    Beyond that, what do I need to do to accomplish this task? I'm not quite sure what file the code would go in and what the proper code is.

    Posted 5 years ago #
  2. Depends on where you want to have this new widget area in the header.

    Let's say you want to have it parallel to div branding (which includes the blog title and the blog description).

    You would need to create two new functions in your functions.php:

    // This will create your widget area
    function my_widgets_init() {
        register_sidebar(array(
           	'name' => 'Header Aside',
           	'id' => 'header-aside',
           	'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
           	'after_widget' => "",
    		'before_title' => "<h3 class=\"widgettitle\">",
    		'after_title' => "</h3>\n",
        ));
    
    }
    add_action( 'init', 'my_widgets_init' );
    
    // adding the widget area to your child theme
    function my_header_widgets() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-aside') ) {
        echo '<div id="header-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
        dynamic_sidebar('header-aside');
        echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";
    }
    }
    add_action('thematic_header', 'my_header_widgets', 8);

    Code tested and approved .. The CSS styling is up to you ;-)

    The same way you could add widgetized areas everywhere you have action hooks in Thematic.

    Cheers,

    Chris

    Posted 5 years ago #
  3. kingsinger
    Member

    Thanks for this. I dropped this in and it seems to work. But right now the header widget is underneath bloginfo area and spans the entire width of the page. If I want a square box to the right of the bloginfo area, do I need to modify something in the functions.php file? Or is that something I do with positional CSS in the stylesheet or header file?

    I'm sorry this is a very basic question, but I'm pretty new to this stuff.

    Posted 5 years ago #
  4. kingsinger
    Member

    Just to be clear, by the bloginfo area, I think what I actually mean is the div #branding.

    Posted 5 years ago #
  5. Hey,

    the following code for your style.css will give you a pretty good idea how to design around the above mentioned code:

    /* Moves blog name & description to the left */
    #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;
    }

    Now you should be able to do the fine tuning.

    Cheers,

    Chris

    Posted 5 years ago #
  6. kingsinger
    Member

    Well, I'm getting closer. But the CSS Chris posted above doesn't seem to play well with this code I downloaded from another thread that allows me to turn the bloginfo into a clickable image:

    /* The rest of the header may need margin and padding removed
    for this to work properly--play around with it */
    #blog-title a {
    display:block;
    text-indent:-9000px;
    height: 134px; /* height of your header, like 480px */
    width: 482px; /* width of your header, like 980px */
    background:url(images/banner5e.jpg) no-repeat top left;
    }
    #blog-description {
    position:absolute;
    left:-9000px; /* We avoid display:none because it's bad for SEO */
    }

    Any thoughts on how these things all interrelate?

    Again thanks very much in advance.

    Posted 5 years ago #
  7. Mmmh .. my solution is playing pretty nice with the standard Thematic header .. it does it on my machine .. OK .. you're using some CSS tricks to move the blog title and the blog description out of sight and create a clickable banner ..

    Why don't you use some action tricks in your functions.php to reach the same effects?!

    // we're removing the standard blog title and blog description
    function new_header() {
        remove_action('thematic_header','thematic_blogtitle',3);
        remove_action('thematic_header','thematic_blogdescription',5);
    }
    add_action('init', 'new_header');
    
    // and now we're creating a new blog title
    function my_blogtitle() { ?>
    <div id="blog-title"><span>here you should have the code for your clickable banner</span></div>
    <?php
    }
    add_action('thematic_header','my_blogtitle',3);

    I haven't tested this code (too busy at the moment) but I'm sure that it'll work.

    Now you can remove all the CSS tricks and fine tune the position of your banner and your widgetized area.

    Cheers,

    Chris

    Posted 5 years ago #
  8. kingsinger
    Member

    Okay, but I think it was Ian who said he used some of those tricks to maintain the text on the page SEO purposes but out of site. What effect will your code have?

    Posted 5 years ago #
  9. kingsinger
    Member

    Sorry should have proofread the last post.

    It should read: Okay, but I think it was Ian who said he used some of those tricks to maintain the text on the page for SEO purposes while keeping it out of sight. What effect will your code have on that?

    Posted 5 years ago #
  10. I think a link to your test site would probably clear it up. It's almost impossible to modularize CSS snippets, especially if you're adding a header image and widgets in the header.

    Posted 5 years ago #
  11. kingsinger
    Member

    Dropped this code in and everything went blank. Had to rename the existing functions.php, create a new one, refresh, then remove the new code from the old functions file, rename and refresh to get it back where I started.

    If the image I want to use is located here: "images/banner5e.jpg", what info exactly am I supposed to put between the span elements in the newest code?

    Maybe I screwed that up.

    Does it matter where in the functions file I drop your code? Can I just put it after the last function presently in the code but before the final "?>"? Or does it need to be inserted earlier in the code?

    Posted 5 years ago #
  12. kingsinger
    Member

    Ian: I'm really new at this stuff. Not sure I totally understand your comment.

    Posted 5 years ago #
  13. Sorry, what I mean to say is, if the code snippets are working fine we'd need to actually see a live version of the site to help with the CSS.

    Posted 5 years ago #
  14. kingsinger
    Member

    Okay. Got it. Well, so far the header widget seems to work with the default blog title. But the code Chris suggested to replace the blog title with a graphic doesn't seem to work. The code you suggested a while back to replace the title with an image did work, but didn't seem to play well with the header widget. That or my ignorance didn't allow me to get it working.

    So perhaps Chris will have some thoughts on the last code snippet he suggested, which makes sense conceptually to me, but seemed make the screen go blank.

    Posted 5 years ago #
  15. Let me test my code snippets with a simple banner with the standard Thematic CSS for the header. Give me about 30 minutes.

    Cheers,

    Chris

    Posted 5 years ago #
  16. Ok .. took me a bit longer to realize that XAMPP starts again messing with the backslashes .. anyway here's a working code .. working means:

    Standard Thematic install
    Child Theme runs the standard CSS plus:

    /* Moves blog name & description to the left */
    #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;
    }

    I added the following code at the end of my functions.php:

    // we're removing the standard blog title and blog description
    function new_header() {
        remove_action('thematic_header','thematic_blogtitle',3);
        remove_action('thematic_header','thematic_blogdescription',5);
    }
    add_action('init', 'new_header');
    
    // and now we're creating a new blog title
    function my_blogtitle() { ?>
    <div id="blog-title"><span><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>"><img src="<?php echo (STYLESHEETPATH . '/images/whatever.jpg');?>" alt="<?php bloginfo('name') ?>" /></a></span></div>
    <?php
    }
    add_action('thematic_header','my_blogtitle',3);

    The banner is still on the very left side but you can move it to the right with padding-left.

    Cheers,

    Chris

    Posted 5 years ago #
  17. kingsinger
    Member

    Regrettably, still no love. I drop it in and the screen goes white. I don't think I'm doing anything non-standard. Here is the total contents of my functions.php file:

    <?php

    // // Custom Child Theme Functions //

    // I've included a "commented out" sample function below that'll add a
    home link to your menu // More ideas can be found on "A Guide To
    Customizing The Thematic Theme Framework" //
    http://themeshaper.com/thematic-for-wordpress/guide-customizing-thematic
    -theme-framework/

    // Adds a home link to your menu //
    http://codex.wordpress.org/Template_Tags/wp_page_menu //function
    childtheme_menu_args($args) { // $args = array( // 'show_home'
    => 'Home', // 'sort_column' => 'menu_order', //
    'menu_class' => 'menu', // 'echo' => true // ); // return
    $args; //} //add_filter('wp_page_menu_args','childtheme_menu_args');

    function new_header() {
    remove_action('thematic_header','thematic_brandingopen',1);
    remove_action('thematic_header','thematic_access',9); }
    add_action('init', 'new_header');
    add_action('thematic_header','thematic_access',1);
    add_action('thematic_header','thematic_brandingopen',2);

    // This will create your widget area function my_widgets_init() {
    register_sidebar(array( 'name' => 'Header Aside', 'id' =>
    'header-aside', 'before_widget' => '<li id="%1$s" class="widgetcontainer
    %2$s">', 'after_widget' => "", 'before_title' => "<h3
    class=\"widgettitle\">", 'after_title' => "</h3>\n", ));

    } add_action( 'init', 'my_widgets_init' );

    // adding the widget area to your child theme function
    my_header_widgets() { if ( function_exists('dynamic_sidebar') &&
    is_sidebar_active('header-aside') ) { echo '<div id="header-aside"
    class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
    dynamic_sidebar('header-aside'); echo '' . "\n" . '</div><!--
    #header-aside .aside -->'. "\n"; } } add_action('thematic_header',
    'my_header_widgets', 8); // we're removing the standard blog title and
    blog description function new_header() {
    remove_action('thematic_header','thematic_blogtitle',3);
    remove_action('thematic_header','thematic_blogdescription',5); }
    add_action('init', 'new_header');

    // and now we're creating a new blog title function my_blogtitle() { ?>
    <div id="blog-title"><span>/"
    title="<?php bloginfo('name') ?>"><img src="<?php echo (STYLESHEETPATH .
    '/images/banner5e.jpg');?>" alt="<?php bloginfo('name') ?>"
    />
    </span></div> <?php }
    add_action('thematic_header','my_blogtitle',3);

    ?>

    Posted 5 years ago #
  18. kingsinger
    Member

    You're using WP 2.7.1 yes? That's what I'm using

    Posted 5 years ago #
  19. kingsinger
    Member

    Also, note that one of the comments on the code at the end should be on its own line, but got wrapped up into the next one. I'm aware of that.

    Posted 5 years ago #
  20. kingsinger
    Member

    I think I may have solved it. I was able to get Ian's CSS for the header image to work after I made the width of the branding div smaller. At least that's how it seems now.

    That being said, if the other code can be made to work and is better in some other ways, I'm open to trying it out.

    Posted 5 years ago #
  21. I did a last test and added Ian's code to my style.css just to see if I can reproduce the blank page .. display still works as expected .. I tried to add blanks, carriage-returns at the end of my functions.php, which is a no-go resulting in all kinds of strange effects .. and even then it worked as expected.

    The only idea I have is that something went wrong during your copy & paste session. If you could send me your functions.php to chris (at) wupperpiraten (dot) de .. I could check it. I can't check the code you posted here because I can't detect where it is wrapped only because of the CSS styling.

    Or let me know if you're still be willing to do some testing I could send you my functions.php. That's all I have to offer at the moment.

    Cheers,

    Chris

    Posted 5 years ago #
  22. kingsinger
    Member

    Why don't you send me a functions.php file. Send it to kingsinger at g mail. I seem to have it mostly working now without the new code. But I'd be curious to see how your code works, as it may solve some issues I'm still having.

    This has been a great learning experience for me. I have a much better understanding of how firebug works, and how various things interrelate. But I've still got a long way to go too.

    Posted 5 years ago #
  23. Email is on its way .. there're a couple more filters and so on included which are not activated. You still need to change the image url which is hardcoded due to XAMPP's problems translating backslashes.

    Cheers,

    Chris

    Posted 5 years ago #
  24. kingsinger
    Member

    I'll see how it works. One problem I've been having, which may relate more to my ignorance of css/html/php is this: When I create a header widget that is more or less the same width as the primary aside widget below it in the main body, it won't stay aligned with the primary aside when I change the size of my browser window, and if I make the window too, small, it wraps down below the header logo image, instead of just staying put and getting covered up as the right edge of the browser window gets smaller.

    Does that make sense?

    Posted 5 years ago #
  25. kingsinger
    Member

    Also, I'm not sure I understand your comment about the image. Where do I change that? In the CSS or in the functions php?

    Posted 5 years ago #
  26. Yes .. that makes sense :-)

    Sounds as if you made the basic structure of the theme wider than 960px. If yes you should have changed body {min-width:960px;} according to the new max width of your theme.

    In case you haven't changed the 960px I need a link where I can see what you did in your style.css.

    And .. nearly forgot to answer this .. you change the picture url in the functions.php.

    Cheers,

    Chris

    Posted 5 years ago #
  27. The default #header div stretches to the full width of the browser window. When I float #branding to the left and the new #header-aside to the right, they both float to the edge of #header (which is all the way on the edge of the browser window).

    I would like these two elements to line up with the rest of the content (i.e. keep the default look of #branding and have #header-aside's left edge line up with the rest of the content's left edge).

    I'm no CSS guru, but I suspect the easiest way to do this is to contain them both within a div of 960px (which would somehow be centered). This way they won't be floating to far to the sides.

    What is the easiest way to add a containing div around the existing #branding element and the added #header-aside?
    ...or is there an easier pure CSS solution I'm missing?

    Posted 5 years ago #
  28. Hey ..

    add the following code to your child theme's style.css:

    #header_box {
    	clear: both;
    	margin: 0 auto;
    	overflow: hidden;
    	position: relative;
    	width: 960px;
    }
    
    /* Moves blog name & description to the left */
    #branding {
      float: left;
      width: 620px;
      margin: 0 0 0 10px;
    }
    
    /* 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;
    }

    and the following code to your child theme's functions.php:

    // This will create your widget area
    function my_widgets_init() {
        register_sidebar(array(
           	'name' => 'Header Aside',
           	'id' => 'header-aside',
           	'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
           	'after_widget' => "",
    		'before_title' => "<h3 class=\"widgettitle\">",
    		'after_title' => "</h3>\n",
        ));
    
    }
    add_action( 'init', 'my_widgets_init' );
    
    // adding the widget area to your child theme
    function my_header_widgets() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-aside') ) {
        echo '<div id="header-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
        dynamic_sidebar('header-aside');
        echo '' . "\n" . '</div><!-- #header-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);

    Cheers,

    Chris

    Posted 5 years ago #
  29. gretchenlouise
    Member

    Thanks for the great copy-and-paste code for using an image for the header. It's working great at ylcf.org. I was so glad to finally see an option for using an image as a blog title that didn't seem to be a silly work-around. I did have one problem with the code--I don't know enough about PHP to tell you exactly what was wrong, but I copied parts of my working favicon code and got it to work. I had to change the part that looked for the image in the stylesheet path.

    I changed this line: <div id="blog-title"><span>/" title="<?php bloginfo('name') ?>"><img src="<?php echo (STYLESHEETPATH . '/images/whatever.jpg');?>" alt="<?php bloginfo('name') ?>" /></span></div>

    to this line: <div id="blog-title"><span>/" title="<?php bloginfo('name') ?>"><img src="<?php echo bloginfo('stylesheet_directory') ?>/images/whatever.jpg" alt="<?php bloginfo('name') ?>" /></span></div>

    However, my question is this: I am trying to have the image on the right, in the header-aside widget, be positioned down next to my drop-down menu (instead of having that blank white space above the rest of the sidebar). No matter how I drop it down there, the white bar of "access" covers it up--and I can't figure out how to make access transparent or set the image on top. I saw it done at http://www.stanats.com/blog01/, I just can't figure out what I'm doing differently. Any ideas? Thanks so much.

    Posted 5 years ago #
  30. cannobbio
    Member

    Im trying to follow this instructions to create the same Header Aside but it seems there are no closing li and ul for the widget area.
    I suck bigtime at php but I'm an expert copy-paster and tryed to fix the code like this:
    Added
    'after_widget' => "</li>\n",
    and
    echo '' . "\n" . '</ul>'. "\n";

    Can you please confirm?
    Thaks for your time and great work.

    // This will create your widget area
    function my_widgets_init() {
        register_sidebar(array(
           	'name' => 'Header Aside',
           	'id' => 'header-aside',
           	'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
           	'after_widget' => "</li>\n",
    		'before_title' => "<h3 class=\"widgettitle\">",
    		'after_title' => "</h3>\n",
        ));
    
    }
    add_action( 'init', 'my_widgets_init' );
    
    // adding the widget area to your child theme
    function my_header_widgets() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-aside') ) {
        echo '<div id="header-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
        dynamic_sidebar('header-aside');
        echo '' . "\n" . '</ul>'. "\n";
        echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";
    }
    }
    add_action('thematic_header', 'my_header_widgets', 8);
    Posted 5 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.