How to Add a Search Form Above the Headway Theme Footer
Some people have noticed the search form at the bottom of this website. I personally got the inspiration from the WooThemes website.
It’s actually fairly easy to add a search bar to the footer of Headway, so I thought I’d walk you through it. Check it out!
How to Add a Search Bar Headway Theme Footer
The first thing we need to do is add the following code to custom_functions.php file.
function footer_search() { ?>
<div id="search-container">
<div id="footer-search">
<p>Looking for Something?</p>
<form action="<?php bloginfo('url'); ?>" method="get" id="footer-searchform">
<div>
<input type="text" accesskey="S" onclick="if(this.value == 'Type Here To Search, Then Press Enter') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Type Here To Search, Then Press Enter';}" value="Type Here To Search, Then Press Enter" name="s" id="s">
</div>
</form>
</div>
</div>
<?php }
add_action('headway_before_footer', 'footer_search', 1);
What this does is define a function for our search bar, call the PHP code, and inserts it into the extremely useful “Before Footer” hook.
This hook may be missing from the
codex. But trust me, it works.
Once that’s done, add the following to the bottom of your custom.css file:
/* Make the Container Fluid */
body.custom div#search-container {padding: 10px; padding-top: 5px; padding-bottom: 5px; width: 100%; overflow: hidden;}
/* Give the Footer a Fixed Width for Your Site */
body.custom div#footer-search {width: 950px; margin: auto; overflow: hidden;}
/* Float the Text Left */
body.custom div#footer-search p {margin-left: 1%; font-size: 16px; color: #fff; display: inline; float: left;}
/* Display the Form Inline */
body.custom div#footer-search form#footer-searchform {float: left; margin-top: 1.5%; width: 500px; margin-left: 1%; display: inline;}
This code lines up our “Looking for Something?” text with our search form to create a nicely defined footer search. That’s it, you’re done!
Ask Questions About This Tutorial
What questions do you have about adding a search bar to the footer? Have you already added your search bar? Share your thoughts and opinions below!
You just finished reading How to Add a Search Form Above the Headway Theme Footer. Consider leaving a comment. Is the content out of date?
Let us know so we can update it.
Some people have noticed the search form at the bottom of this website. I personally got the inspiration from the WooThemes website.
It’s actually fairly easy to add a search bar to the footer of Headway, so I thought I’d walk you through it. Check it out!
How to Add a Search Bar Headway Theme Footer
The first thing we need to do is add the following code to custom_functions.php file.
function footer_search() { ?>
<div id="search-container">
<div id="footer-search">
<p>Looking for Something?</p>
<form action="<?php bloginfo('url'); ?>" method="get" id="footer-searchform">
<div>
<input type="text" accesskey="S" onclick="if(this.value == 'Type Here To Search, Then Press Enter') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Type Here To Search, Then Press Enter';}" value="Type Here To Search, Then Press Enter" name="s" id="s">
</div>
</form>
</div>
</div>
<?php }
add_action('headway_before_footer', 'footer_search', 1);
What this does is define a function for our search bar, call the PHP code, and inserts it into the extremely useful “Before Footer” hook.
This hook may be missing from the
codex. But trust me, it works.
Once that’s done, add the following to the bottom of your custom.css file:
/* Make the Container Fluid */
body.custom div#search-container {padding: 10px; padding-top: 5px; padding-bottom: 5px; width: 100%; overflow: hidden;}
/* Give the Footer a Fixed Width for Your Site */
body.custom div#footer-search {width: 950px; margin: auto; overflow: hidden;}
/* Float the Text Left */
body.custom div#footer-search p {margin-left: 1%; font-size: 16px; color: #fff; display: inline; float: left;}
/* Display the Form Inline */
body.custom div#footer-search form#footer-searchform {float: left; margin-top: 1.5%; width: 500px; margin-left: 1%; display: inline;}
This code lines up our “Looking for Something?” text with our search form to create a nicely defined footer search. That’s it, you’re done!
Ask Questions About This Tutorial
What questions do you have about adding a search bar to the footer? Have you already added your search bar? Share your thoughts and opinions below!
">
http://headwayhub.com/2010/06/19/how-add-search-form-above-headway-theme-footer/
Tweet
Some people have noticed the search form at the bottom of this website. I personally got the inspiration from the WooThemes website.
It’s actually fairly easy to add a search bar to the footer of Headway, so I thought I’d walk you through it. Check it out!
How to Add a Search Bar Headway Theme Footer
The first thing we need to do is add the following code to custom_functions.php file.
function footer_search() { ?> <div id="search-container"> <div id="footer-search"> <p>Looking for Something?</p> <form action="<?php bloginfo('url'); ?>" method="get" id="footer-searchform"> <div> <input type="text" accesskey="S" onclick="if(this.value == 'Type Here To Search, Then Press Enter') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Type Here To Search, Then Press Enter';}" value="Type Here To Search, Then Press Enter" name="s" id="s"> </div> </form> </div> </div> <?php } add_action('headway_before_footer', 'footer_search', 1);What this does is define a function for our search bar, call the PHP code, and inserts it into the extremely useful “Before Footer” hook.
Once that’s done, add the following to the bottom of your custom.css file:
/* Make the Container Fluid */ body.custom div#search-container {padding: 10px; padding-top: 5px; padding-bottom: 5px; width: 100%; overflow: hidden;} /* Give the Footer a Fixed Width for Your Site */ body.custom div#footer-search {width: 950px; margin: auto; overflow: hidden;} /* Float the Text Left */ body.custom div#footer-search p {margin-left: 1%; font-size: 16px; color: #fff; display: inline; float: left;} /* Display the Form Inline */ body.custom div#footer-search form#footer-searchform {float: left; margin-top: 1.5%; width: 500px; margin-left: 1%; display: inline;}This code lines up our “Looking for Something?” text with our search form to create a nicely defined footer search. That’s it, you’re done!
Ask Questions About This Tutorial
What questions do you have about adding a search bar to the footer? Have you already added your search bar? Share your thoughts and opinions below!
">