ThemeShaper Forums » Thematic

[closed]

Adding Search Box To Header

(8 posts)
  • Started 4 years ago by rezdwanhamid
  • Latest reply from Chris
  • This topic is not resolved

Tags:

  1. rezdwanhamid
    Member

    Hello everyone

    I am new here so please bear with me.

    I have searched the forum for answers as to how I can add a search box to the header. I know that it has been answered before and trust me when I say that I have tried it.

    It does not really work as I wanted it (or maybe I just did not do it correctly). I get so confused trying to follow the instructions on one topic (with various solutions).

    I know that it can be done and I just want it as simple as the one on Thematic Feature Site theme. Vertically aligned to the blog title/description, horizontally aligned to the right edge of the sidebar, no search button and no widget title. Of course, widgetized!

    So please help me with the codes for functions.php and style.css. Perhaps, Ian Stewart could give us the same codes that he uses for the Thematic Feature Site theme, please?

    Thanks in advance for all the help.

    Regards,
    Rezdwan Hamid

    Posted 4 years ago #
  2. Hi Rezdwan,

    get the current SVN copy of Thematic as described here: How to get the latest SVN copy of Thematic?

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

    // 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);
    
    function add_header_aside($content) {
    	$content['Header Aside'] = array(
    		'admin_menu_order' => 50,
    		'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');
    	}
    }

    .. and the following code to your child theme's style.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;
    }

    Chris

    Posted 4 years ago #
  3. rezdwanhamid
    Member

    Hello Chris

    Thank you for replying very quickly to my questions.

    I did what you told me to and everything works great! Just like I wanted it except for one minor thing.

    Somehow the float:right; does not make the search box move all the way to the right. I'm not sure why this happens.

    Any idea as to how I can fix the search box alignment issue?

    By the way, I modified the style.css a little to align the blog title and description to the left edge of the wrapper (I think). Here's the new code.

    #header_box {
        clear:both;
        margin:0 auto;
        overflow:hidden;
        position:relative;
        width:940px;
    }
    
    #branding {
        float:left;
        width:640px;
    }
    
    /* 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;
    }

    Notice that I have changed #header_box and #branding width a little.

    Other than that, I'm quite happy with how things have turned out. Thanks!

    Regards,
    Rezdwan Hamid

    Posted 4 years ago #
  4. So, I'm assuming that there should be a widget area for the header in the admin? Don't see it... is there something magical that needs to be done?

    Posted 4 years ago #
  5. Hi,

    if you use the code mentioned above, you should see a widget area called 'Header Aside' in your Widgets section.

    Chris

    Posted 4 years ago #
  6. That's the problem. "Header Aside" does not show up.

    Posted 4 years ago #
  7. dcolumbus-

    Just a stab in the dark here. Which version of thematic are you using 9.5.1 or the latest SVN version?

    -Gene

    Posted 4 years ago #
  8. .. sounds like the current release instead of the current SVN copy.

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.