09 Feb 2014
Customize the WordPress Search
We can change the design and add additional fundability in the search widget provided by WordPress. Make a file “searchform.php“ in your theme folder and add the blow given code. You can also add your style or script as need in this file.
<?php
/**
* The template for displaying Search Results pages
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?>
<script>
function validate(){
var txt = document.getElementById(‘search’);
if(txt.value == “” || txt.value==’Enter your text’) {
txt.style.color = “red”;
txt.value = ‘Enter your text’;
return false
}
}
function def(txt) {
txt.style.color =””;
}
</script>
<div class=”searchBox”>
<form action=”<?php echo home_url( ‘/’ ); ?>” method=”get”>
<input type=”submit” value=”” class=”searchIcon” onClick=”return validate()”/>
<input onKeyPress=”def(this)” name=”s” type=”text” id=”search” value=”<?php if($_GET[‘s’]){ echo $_GET[‘s’]; } else {?>Enter your text”
/**
* The template for displaying Search Results pages
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?>
<script>
function validate(){
var txt = document.getElementById(‘search’);
if(txt.value == “” || txt.value==’Enter your text’) {
txt.style.color = “red”;
txt.value = ‘Enter your text’;
return false
}
}
function def(txt) {
txt.style.color =””;
}
</script>
<div class=”searchBox”>
<form action=”<?php echo home_url( ‘/’ ); ?>” method=”get”>
<input type=”submit” value=”” class=”searchIcon” onClick=”return validate()”/>
<input onKeyPress=”def(this)” name=”s” type=”text” id=”search” value=”<?php if($_GET[‘s’]){ echo $_GET[‘s’]; } else {?>Enter your text”
About Author
bestonetechnologies
I am a software developer.
