ThemeShaper Forums » Thematic


Moving search to top right corner

(6 posts)
  • Started 11 years ago by eastjane
  • Latest reply from eastjane
  • This topic is resolved


  1. eastjane


    I would like to move the search box to the top right corner of my site. I don't have a live site just yet so I am copying my code below. I tried the methods talked about in this post:, but was not successful.

    I am using the Child theme development format.

    My style.css looks something like this. (after all the import statements on top)

    /*Have a clickable logo on the left most site */
    #blog-title a {
    width: 317px;
    height: 200px;
    #wrapper {
    background:url('images/logo.jpg') no-repeat top left;
    background-position: 5% 0%;
    #branding {
    padding:8px 0 1px;
    /*Don't need secondary*/
    #secondary {display:none;}

    And my functions.php is empty.

    I am new to web development. I would appreciate any help.


    Posted 11 years ago #
  2. Hey there,

    Check my site - Is this what you want to do as well?

    If so, then you have to add code to functions.php in your child theme along with the necessary CSS styles in your style.css file.

    Let me know and I'll share with you what I have and the little I know.


    Posted 11 years ago #
  3. eastjane

    Yes something along those lines is what I am looking for. I would appreciate your help.


    Posted 11 years ago #
  4. eastjane

    Please help me, I am really stuck on this problem. None of the methods talked about in this post: work for me.


    Posted 11 years ago #
  5. Erin

    You need to add a searchbar to your header before you can style it. Here is how I did it: Add to function.php:

    /* add search form to header
    function add_searchbar(){
    include (TEMPLATEPATH . '/searchform.php');

    Then, style in your childtheme's stylesheet.

    Posted 11 years ago #
  6. eastjane

    Ok I got it! Thanks for your help. I did the following:

    In function.php

    // This will create your widget area
    function search_widgets_init() {
           	'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', 'search_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";
    		echo '' . "\n" . '</ul>'. "\n";
    		echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";
    add_action('thematic_header', 'my_header_widgets', 8);
    function remove_branding() {
    add_action('init', 'remove_branding');
    function my_brandingopen() { ?>
    	<div id="header_box">
        	<div id="branding">
    <?php }
    /* add search form to header
    function add_searchbar(){
    include (TEMPLATEPATH . '/searchform.php');
    add_action('thematic_header','add_searchbar', 8);

    In 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;
    	padding:8px 0 1px;
    /* Moves the new widgetized area to the right and levels it with #branding */
    #header-aside {
      float: right;
      width: 300px;
      padding: 88px 0 44px;

    Thanks for your help!

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.