"Custom" WP Search Box

Discussion in 'Web Design and Development' started by MorphingDragon, Jan 15, 2012.

  1. MorphingDragon macrumors 603


    Mar 27, 2009
    The World Inbetween
    I've been trying to implement a custom WP search box and I'm a bit stuck. Normally I would just use the default WP search however it just doesn't suit the website design. I'm don't really know any PHP or Javascript so I've been struggling to implement this.

    I basically want it to behave as you would expect a search box to behave. (IE, enter text and press enter)

    I have attached a quick mockup of the website header so you can see what I want to achieve.

    This is the default WP code if it helps.

    <form action="/" method="get">
            <label for="search">Search in <?php echo home_url( '/' ); ?></label>
            <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
            <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />

    Attached Files:

  2. brisbaneguy29 macrumors 6502


    Nov 27, 2007
    Don't try and change the PHP, just place the search form code
    <?php get_search_form(); ?>
    in a new DIV and style it with the CSS.

    Why try and change the PHP, just style the existing.

Share This Page