Support » Themes and Templates » Search box in WordPress Theme Header

  • Resolved rubai


    I wanted to know how to place a search box in the top right corner in a wordpress theme. I am new and young (10 years old) and that is why i don’t know these stuff. Also can someone tell me how to use customize the search box interface. I drew an interface which you can see here: Image


Viewing 3 replies - 1 through 3 (of 3 total)
  • Goodness! When I was 10 there were only about five computers in the world! This is making me feel really old.

    I’m assuming you know a bit about what you’re doing, or you wouldn’t be posting here. For instance, I’m assuming you know the basics of CSS. If you don’t, I suggest you take a look at this tutorial. You can then look at some other, more advanced, online tutorials or consult a good book. This forum doesn’t aim to teach these things, so you may need to do a bit self-help in this respect.

    The first thing you should know is that the only recommended way to make changes to WordPress themes is via a Child Theme. It is a very simple thing to do. I start every new WordPress project by creating a basic child theme of the theme my clients are using, and activating it in the usual way, in the site’s dashboard. At this point it just looks and acts like the parent theme, ready for me to make the changes my client wants.

    If you are using a default theme like twentyeleven or twentyten, you must use a child theme. With other themes, you don’t have to, but wise people almost certainly will do.

    Having done that, there is at least one thing you can do to see if you can save yourself a bit of work.

    • Check in your dashboard (Dashboard –> Appearance –> Widgets) to see if your theme provides a widget area at the location where you want to put your search box
    • If there *is* a convenient widget area, just drag your search widget from its current location to the new one

    If there isn’t a convenient widget area, you’ll need to make some changes in your (child) theme’s header.php file. Take a look at this thread. You may need to modify the advice a bit to locate the search box exactly where you want it to go in your HTML.

    To modify a child theme’s header.php file, copy the parent’s header.php file into the child theme’s directory. You’ll probably need to do this by using an FTP client. Once you have a copy of header.php in your child theme directory you will be able to modify it from your dashboard using Dashboard –> Appearance –> Editor.

    Having got the code for the search box into your header’s HTML you should be able to see it, but it probably won’t be exactly where you want it or look exactly like you want it to look. You can position it and style it using CSS. Put whatever rules you want into your child theme’s style.css file. So, for example, if you wanted to absolutely position your search box within your header element, you could add something like this to the end of your child theme’s style.css file. If these are your first changes to your child theme, these new rules will come immediately after the @import statement that references your parent theme’s style sheet:

    header {
      position: relative;
    #searchform {
      position: absolute;
      left: 720px;
      top: 50px;

    For the other style changes you want to make, I’m afraid your link didn’t work for me; but, basically, you just add rules to your style sheet – the child theme’s style.css file – that give you the look and feel that you want.

    If you need more help or clarification, please just post again and we’ll do our best.



    The index tabs (at the top of my homepage),containing the titles of my pages and posts, are arranged horizotally. I am talking about the tabs with wordings “A basic guide to penny stocks”, “Penny stock training” etc.

    I now want to shift the tags and re-arrange them vertically at the right hand side of the home page, like a side bar or wedge.They should be positioned at the top of the home page.

    Can anybody explain to me how to do it? I’ll be really grateful if you can explain the procedure step by step. I am not too good at following technical instructions.

    J P Brits

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Search box in WordPress Theme Header’ is closed to new replies.