#9 Search Box

Amy Marsh Is A Fashion Technologist In Training


Every single thing went right when I was making this! Now this is one of the easiest pieces of code I have done for this blog,  I didn’t even have to alter the css a second time. It was done in a flash! The coding fairies (yes I believe) were definitely on my side for this post and I hope they are for you too!


So to make sure you enjoy your Saturday even more this will take a matter of minutes!


Let’s get started!



First open up your SC Theme Editor and open your function.php file. Paste this code into the file at the bottom:



This allows us to edit what WordPress sets up as a search form. I have added into the code above the value=”search” so now the word search will appear in the search box as displayed below:


Screen Shot


Next we need to set the styling, open up the style.css and file and find the code which starts:

In-between the { } of this section of replace the current code with:


Add this code beneath and outside the closing bracket of the  #searchform input#s code above, this removes the original search button:


Finally add this section of code to the for add a black glow around the search box when the box is active:




Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!





Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">