Tag Archives: Search

Highlight WordPress search terms with JQuery

Posted on by
3

Quite frankly, no one really cares about search page. I too, previously, until the day I search for a site and find it hard to catch the terms on the search page. Instead of finding it, I search using browser CTRL+F again, double my search job.

There are numorous of plugins available for WordPress to highlight the search terms, some even have tutorial on how to highlight without using a plugin. I tested, it doesn’t work too well for me. Perhaps, the updated version of JQuery conflicted with it.

Highlight

Yet again, WordPress template tags comes to save my time :) There is this the_search_query tags in WordPress. It will shows the term you searched. Simply, .replace() it with JQuery.

<script type="text/javascript" >
jQuery(document).ready(function($){
jQuery(".post").each(function() {  // The DIV of the result
  jQuery(this).html(jQuery(this).html().replace(/ <?php the_search_query(); ? >/ig, " <span class='highlight' > <?php the_search_query(); ? > </span >"));
});
}); // END
</script >

Simply placed the above code in search.php and you’re good to go :)

Limit the search keywords in WordPress

Posted on by
1

If you are having a nich content, there are times you wanted to only let visitor search a few specific keywords, to boost the site keyword ranking or whatever reason. In default, WordPress come with a simple search form, with an input and a button. A lot of users find it quite useless.

While searching for some solution on my project, I find some trick on limiting the keyword, but using a dropdown selection menu.

<select name="s">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

Search select
WordPress engine use the name="s" as its listener for keyword. Now that I am using manual selection, I can bascially place only keywords I want the visitor to search for. Well, unless the visitor is a WordPress user too, as there is always possible to manully type in /?s=keyword.