Adding a Searchbox Image

The second in this series of tutorials is adding a searchbox images to the Top Menu Bar, we created our own search box image that suited our theme, the stylesheets elements need to be added tp match our theme.

If we follow the steps in this tutorial we will be able to add a second section in a menu bar of a WordPress theme, have looked at the styling, and how to add the searchbox styling for a navigation bar.

We will need to do the following steps, locate a suitable images, add the image to out theme and create a different style for the top menu, to accept our search box.

If you have not worked through the first tutorial you can download the starting theme from the downloads page or from getting started two this code requires the sample theme top menu, if you are not using the starting theme then you will need to work through this tutorial.

Searchbox Image

The standard searchbox and button often spoil the look of a theme, more and more we see image searchboxes, these are more styled to the theme, we are going to add one to our theme.

There are not to many places to get a searchbox image on the internet, searching in Google and using an image is something you should not do, not all images are free to use, it would not be nice if your client had an email asking for the image to be removed by the copyright holder.

We just created our own image for this tutorial in PhotoShop and grant you the rights to use it as you want.

In the download for this tutorial are the two search images, before we can use this in our stylesheet we should copy the images to the child themes images folder.

Download Support Files: Tutorial 2 Searchbox Files (2093)

We have created the two images one is a background image the other transparent image and will be used as a placeholder to accept the search mouse click.

Style the Searchbox

Add the contents of the file ‘lesson-2-style.css’ from the changes folder, to the end of the child themes style.css.

/* Lesson #2 styles starts here */
/* Remove the top padding */
#header {
padding: 0;
}

/* Hide the header section */
#branding {
display: none;
}

/* re-size the top menu for our search box */
#pagemenu {
width: 700px;
}

/* style our search box */
/* Container */
.nav-search {
float: right;
background: url(images/search-bar.png) no-repeat;
color: #212121;
height: 30px;
width: 205px;
padding-left: 6px;
}

.search-text {
float: left;
display: block;
margin-top: 3px;
background: none !important;
-moz-box-shadow: none !important;
border: none !important;
color:#666666;
height:20px;
width:160px;
}
/* Lesson #2 styles ends here */

The first part of the style #header is more for part four where we will be adding our own header section, the second part #branding hide the section between the two menus.

Now we get to the style of our search box, we have reduced the width of the page menu, this allows enough room for our search box to exist in the same space, we reduce the page menu to 700px, allowing 240px for our search box.

The second menu section is a container to hold the textbox and clickable image, it has the same height as our menu bar, notice we float the container to the right, and the width is set to our image width, we have added the image here in the stylesheet.

Search Text is the searchbox where we will enter the search terms before clicking the image to carry out the search, in the twenty ten stylesheet there are a few more styles we had to adjust, when you complete this section use FireBug to look at the effects of the changes.

Notice the !important this tells wordpress that priority should be given to this style, overriding and calls without the !important call.

Search Box Code

It the child themes folder create a php file for ur new template part, call this file navigation-search.php, in the support files final you will find a file with this code, or copy and paste the code below.

<!-- Begin Search Box -->
<div class="nav-search">
<form method="get" id="navsearchform" action="<?php bloginfo('url'); ?>/">
<input class="search-text" type="text" value="Search this website... " name="s" id="navsearchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" />
<input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/images/search-button.gif" value="Search" alt="Search" />
</form>
</div>
<!-- End Search Box -->

Here the code is adding a search form into the menu bar, the input type=”text” is the search imput box, and the input type=”image” is our clickable region, the onfocus code clears the default text when we select the textbox.

Adding the Searchbox

To add our new searchbox we will add two lines of code from the changes folder lesson-2-header.php file, to our header.php file, we do this to create lines 64-65 and our code will be calling the new template part, just after our call to navigation 2.

<?php /* Add support for the menu search box */ ?>
<?php get_template_part( 'navigation', 'search' ); ?>

We have included the files in the final folder so you can check the placement of the code, if our menu had a different background then we would have to nest the searchbox inside the menu container, you will see an example of this in the next tutorial.

Now when we visit our local website we will see our new searchbox, and the hidden header.

 

 

In our next tutorial we will be adding a nice theme options page to our theme.

 

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

6 thoughts on “Adding a Searchbox Image

  1. I have a pretty simple question (I think) … how do I get the widget search box and search button to have the same height, the search box to be as wide as the sidebar, and a bit of padding between them.

  2. There maybe an error in the code here since I have followed the instructions and even overwritten my style sheet and header.php with the final files as provided and the search box is still not showing. All that is showing is an input box with the text ‘Search this Site’ – no search box image or search button image although there is a placeholder for the button as there is a small clickable area next to the search button which will set the search running.

    • I sorted this problem out by downloading the support files and using them to overwrite the files I had created from the tutorial – the search bar then worked fine.

    • The reason why it didn’t work is because the code in the post is missing the class declarations in the navigation-search.php file. You need to insert class=”nav-search” in the div tag and class=”search-text” in the input tag. You can see it in the download file.

      Maybe Digital Raindrops leaves things out here and there to keep us on our toes ;-).

      Thanks for the tutorials they are great!

      • Hi TopCun,
        Nothing as smart, When we copy across the code or use WLW and save, if we miss a text format tag, using a syntaxhighligher plugin, the older WordPress removed the class declarations, I thought I had put them all back, and now add the code after saving and re-save.

        That is why we have the downloads so a compare can be done if something does not work, leading to more skills for bug tracing and fixing 🙂

        Thanks for taking the time to leave a comment, it is always amazing how many reads and dowloads happen before someone takes the time to leave a comment for a bug.

        David

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tutorials 2010 Two

screenshot

For this series of tutorials we need to have a local WordPress setup. This will enable easy deployment of the theme files. This series will be added to over two weeks, rather than one big set of files since we … Continue reading

Read More