Twenty Ten Child Theme part 2

I’ve been playing around a bit more with Twenty ten did a few neat things with it. One thing I added was a search to the header on my site, you can see it at the top.

To do this, I searched Google for some code for a search box, wrapped it in a div and added the style to my own CSS.

First make a copy of Twenty Tens header.php then open it in any editor. I wanted mine to show on the right in the Nav menu, so do a search for

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

This is the code that shows the Menu at the top of my site. At the end of it, go down a line and add the code for the actual search form.

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" value="<?php echo $search_text; ?>"name="s" id="s"onblur="if (this.value == '')
{this.value = '<?php echo $search_text; ?>';}"onfocus="if (this.value == '<?php echo $search_text; ?>')
{this.value = '';}" /><input type="hidden" id="searchsubmit" />
</form>

Now save your new header.php into your child themes folder and refresh your page. You should see a search box near the left above your links. If you do, great, now we need to style it so it looks better.

To style it, we need to add some more code to what we have already. Go to where you added the form code, and just before it add

<div class="search-form">

Then at the end of the search form code add a closing div tag.

</div>

Now save it again and close it. You won’t see any changes to your site yet though. Now we need to add some CSS to make it match the site better. Goto your child theme folder and open the style.css. I’ll use an example and explain what each line does. Goto the bottom of your style.css and add this code to it.

.search-form input {
  width: 150px;
  color: #777;
  font-family:"arial", sans-serif;
  background: #FFF;
  border: none;
  position:absolute;
  left:150px;
  top:150px;
  }

Now save your style.css and refresh your page, the search form should be in your header somewhere, if you see it, great. Now all we have to do is change the colors and move the form to where we want it.

The css is pretty easy to figure out, where it says width: 150px this controls how wide you want your search box to be, change it to whatever you want. The color: #777 controls what color you want the text to be, background controls what color we want the background.

The position:absolute tells it to move the search box to the exact area we want it by changing the left: 150px and top: 150px. Top controls how far from the top of the page, and left controls how far from the left we want it.

If your header is like mine, then use

.search-form input {
  width: 150px;
  color: #aaaaaa;
  font-family:"arial", sans-serif;
  background: #000;
  border: none;
  position:absolute;
  left:785px;
  top:10px;
  }

If it’s off by a few pixels, you can easily change it. Anyways, it’s nothing much but it might come in handy for someone.

Related posts:

  1. Twenty Ten Child Themes
  2. Easy Highlight Author
  3. Highlight Sticky Post
  4. Wizzart – Recent Comments – Tip
  5. Twenty Ten Weaver
This entry was posted in Code, Tips and tagged , , . Bookmark the permalink.

5 Responses to Twenty Ten Child Theme part 2

  1. Bradford says:

    Thanks, I’ve just started experimenting with child themes on Twenty Ten. I used really similar code but I used the following CSS

    .search-form input {
    width: 65px;
    color: #666;
    background: #E0E0E0;
    border: none;
    display: block;
    margin: 8px 8px 0 0;
    text-align: right;
    float: right;
    }
    .search-form input:focus {
    width: 150px;
    background: #FFFFFF;
    text-align: left
    }

    I don’t like using absolute positioning so it simply aligns it to the right of the menu bar. I also used the CSS focus event to spice it up a little bit.

  2. Bradford says:

    I forgot to mention I added your suggested code to my header file, in addition to this line above it:

    This searches the $_REQUEST array and if there is a s value (meaning the user is in the middle of a search), then it populates the text with that search term. Otherwise, it populates it with “…search”. Pretty cool stuff!

  3. Bradford says:

    Hah, looks like it didn’t like my php. Here it is again, just surround this with the php html tags:

    $search_text = ($_REQUEST["s"]==”)?”…search”:$_REQUEST["s"];

  4. Bradford says:

    Sorry for all this spam, if you want to edit my comments to appear in one single comment feel free, haha. Anyway, the PHP got jumbled when it was posted, the ==” should be ==” with TWO SINGLE quotes, not one double quote.

  5. Zeaks says:

    Thanks, I couldn’t figure out how to get around using absolute positioning, this works much better.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>