WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] search box styling (5 posts)

  1. piedro
    Member
    Posted 4 years ago #

    Hello!

    I added a simple search box to my sidebar:
    `
    <?php get_search_form(); ?>; ?>

    But I want the <search> button to appear like another Navigation Link (no button!) and I like the text input box to be smaller.

    How can I control the layout of the built in searhbox?

    thx,
    p.

  2. muthukswamy
    Member
    Posted 4 years ago #

    Use CSS to control the design. The unique IDs for these are:

    1. Search Field - #s
    2. Search Button - #searchsubmit

  3. piedro
    Member
    Posted 4 years ago #

    thx alot, that works!

    This has worked for the look so far. But I still have an issue:
    I don't no how to change the order of the input field and the button - I really should have the button input field first. Is this possible? And where to change?

    You have a hint on that also?

    thx,
    piedro

  4. muthukswamy
    Member
    Posted 4 years ago #

    Goto your theme folder and look for a file named "searchform.php" that is where the code for search form resides. I usually have this file with content:

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    	<fieldset>
    		<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    		<input type="submit" id="searchsubmit" value="Search" />
    	</fieldset>
    </form>

    If you wish to have the search button first make it:

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    	<fieldset>
    		<input type="submit" id="searchsubmit" value="Search" />
    		<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    	</fieldset>
    </form>
  5. piedro
    Member
    Posted 4 years ago #

    Thx muthukswamy!

    I've been searching through includes & functions to find the appropriate code - and there it is! So simple if you know it ...

    That's all I need,
    thx for your effort,
    cu, p.

Topic Closed

This topic has been closed to new replies.

About this Topic