Yesterday, I posted a topic on Stack Overflow about how to change the search value in Wordpress using a drop-down selector. Initially, I implemented it with the help of Fredrik, but later I changed my approach. Instead of having a select input, I decided to create links with Font Awesome icons, which improved the overall look.
This is my final search form:
<div class="searchbox">
<form action="<?php echo home_url( '/' ); ?>" method="get"><button name="search" class="btn">
<span></span></button>
<input type="text" id="s" name="s" value="" />
<input type="hidden" name="post_type" value="post" />
<div class="select_search">
<span class="wrs">
<i class="fa fa-video-camera" id="search_type_icon"></i>
<i class="fa fa-caret-down"></i>
</span>
<div class="drop_search">
<span data-searchtype="photos">
<i class="fa fa-picture-o"></i>
</span>
</div>
</div>
</form>
</div>
Here's the JavaScript code:
<script type="text/javascript">
function SearchPostValue(e) {
e.preventDefault();
var t = $(this);
var searchtype = t.attr('data-searchtype');
if (searchtype == 'post') {
$('#search_type_icon').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
$('[data-searchtype]').attr('data-searchtype', 'gallery').find('i').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
} else {
$('#search_type_icon').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
$('[data-searchtype]').attr('data-searchtype', 'post').find('i').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
}
$('.searchbox #search_type').attr('value', searchtype);
}
$(document).ready(function(){
$('.searchbox .drop_search [data-searchtype]').click(SearchPostValue);
});
</script>
I had some difficulties making everything work as intended. When clicking on the picture icon, I wanted to change the value from "Post" to "Gallery," but nothing happened when clicking on the photo icon.
Below is my CSS:
.select_search {
position:absolute;
right: 40px;
z-index:10;
display:inline-block;
width:58px;
height:31px;
cursor:pointer;
vertical-align:middle;
}
/* More CSS styles... */
.fa-picture-o {
width:20px;
height:14px;
margin:6px 5px 0 0;
}
Lastly, I made an edit to the HTML code:
<div class="searchbox">
<form action="<?php echo home_url( '/' ); ?>" method="get"><button name="search" type="submit" class="btn">
<span></span></button>
<input type="text" id="s" name="s" value="" />
<input type="hidden" id="#search_type" name="post_type" value="post" />
<div class="select_search">
<span class="wrs">
<i class="fa fa-video-camera" id="search_type_icon"></i>
<i class="fa fa-caret-down"></i>
</span>
<div class="drop_search">
<span data-searchtype="photos">
<i class="fa fa-picture-o"></i>
</span>
</div>
</div>
</form>
</div>
<script type="text/javascript">
function SearchPostValue(e) {
e.preventDefault();
var t = $(this);
var searchtype = t.attr('data-searchtype');
if (searchtype == 'post') {
$('#search_type_icon').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
$('[data-searchtype]').attr('data-searchtype', 'gallery').find('i').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
} else {
$('#search_type_icon').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
$('[data-searchtype]').attr('data-searchtype', 'post').find('i').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
}
$('.searchbox #search_type').attr('value', searchtype);
}
$(document).ready(function(){
$('.searchbox .drop_search [data-searchtype]').click(SearchPostValue);
});
</script>