April 10th, 2009

HOW-TO, WordPress FAQs

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Tags: functions, HOW-TO, javascript, jQuery, search, WordPress, WordPress Hack

Responses

Comments

Hicham (36 comments.) says:

4/10/2009 at 3:23 am

This is very neat!

I wonder whether there’s another code that highlights the results in two colours in case I searched for 2 words?
- Thaya Kareeson (51 comments.) says:
  
  4/12/2009 at 10:26 pm
  
  I didn’t come across any during my search, but I’m sure there’s some out there on the net.
  - Hicham Maged (36 comments.) says:
    
    4/17/2009 at 4:22 pm
    
    Thanks Thaya for your reply
- RavanH (11 comments.) says:
  
  5/8/2009 at 6:02 pm
  
  I did a little WordPress plugin based on this article (I am not the only one I saw ) where similar to this code does wrapping for an array of search terms:
  
  [code]
  jQuery(document).ready(function($){
  if(typeof(hls_query) != ‘undefined’){
  for (i in hls_query){
  $(‘#post-area’).highlight(hls_query[i], 1, ‘hilite term-‘ + i);
  }
  }
  });
  [/code]
  
  The plugin is suitebly called Highlight Search Terms and you can find it in WP Extend
Li-An (13 comments.) says:

4/10/2009 at 4:16 am

Very nice tip ! I try it now !
Mattias (32 comments.) says:

4/10/2009 at 4:51 am

Nice post, things like this should be core imo.
- Thaya Kareeson (51 comments.) says:
  
  4/12/2009 at 10:27 pm
  
  I think the Automattic team is aware that search has been pretty lacking in WordPress, and they are working hard to make the default search a lot better. Let’s see what they come up with in version 2.8!
  - DD32 (1 comments.) says:
    
    4/18/2009 at 12:50 am
    
    Unfortunately, You’re going to have to wait for 2.9 or 3.0 before we see any major search improvements.
David says:

4/10/2009 at 5:07 am

Nice. Be nicer still if this was a plugin so core code didn’t need modifying.
- silent (2 comments.) says:
  
  4/10/2009 at 5:41 am
  
  it doesn’t modify core code. functions.php IS theme’s file.
Danny Brown (2 comments.) says:

4/10/2009 at 6:09 am

You could also use the Lijit search plugin. This brings back results from not only your blog, but your network and contacts as well as the general web.

It also offers search results and analytics behind the scenes. Seriously, awesome little plugin.

You can see it in action on my blog:

http://dannybrown.me/

Or just go straight to Lijit and set up your details:

http://www.lijit.com/

(And no, this is *not* a sponsored comment)
PimpMyWordPress (1 comments.) says:

4/10/2009 at 6:21 am

Great tip!!! Can’t wait to try it on my blog
Adrian says:

4/10/2009 at 7:17 am

Yeah, it’s great, useful and easy to add on the theme.

But i have a problem with it:
I’m only getting the first post of each search highlighted, any idea?

Thank you and good job
- Adrian says:
  
  4/10/2009 at 7:21 am
  
  Ok I’ve fixed it, wrong ID.
George Serradinho (107 comments.) says:

4/10/2009 at 11:39 pm

Very nice hack, must try it some day on my site. Thanks for sharing this.
Loz says:

4/11/2009 at 1:24 am

Hi

thanks for the tip.

However I have found a problem.

It works just fine for single phrase words. But 2 phrase words the page just keeps refreshing itself.
- Thaya Kareeson (51 comments.) says:
  
  4/12/2009 at 10:32 pm
  
  It works fine for me for 2+ search phrases. There might be some other JavaScript on your page that is causing your page to reload. I’m guessing that there is some sort of JavaScript has an action bounded to a HTML element (could be anything from <a> links to <div> blocks) that might be causing the page to reload if the HTML element is modified in anyway.
  
  If this method doesn’t work for you, you might want to try one of the more established WordPress plugins, such as Search Unleashed. Though the plugin has a heavier footprint than this hack, it might work well for you.
pinoy2 (1 comments.) says:

4/11/2009 at 10:04 am

very nice post.. i just see some blogs with highlighted wordpress post if you land in their wp blog.

If you search in search engines and some highlighted words are comming from the top screen saying

“are you looking for these terms: _ _ _”

Then highlight all the the search terms…

This mightbe the big help i need…
Ben Licher (1 comments.) says:

4/11/2009 at 2:48 pm

Good tip, I’ll try it and will follow the comment for the answers ont he questions above
Showfom (1 comments.) says:

4/11/2009 at 6:52 pm

Cool function!
W-Shadow (3 comments.) says:

4/13/2009 at 11:22 am

Here it is in a plugin form and with some additional features like multiple highlight colors – Highlight Search Terms WP plugin.
- Thaya Kareeson (51 comments.) says:
  
  4/13/2009 at 12:40 pm
  
  Thanks W-Shadow. I would’ve created a plugin out of it myself, but I have too many things on my hands right now to support another plugin!
RavanH says:

4/16/2009 at 12:09 pm

Two things i wonder:

1. Doesn’t the script use the reserved ‘syntax’ class incorrectly? `highlight: function(search, insensitive, class)` should be something like `highlight: function(search, insensitive, hls_class)`

2. How would i go about it if I wanted to subject EVERYTHING inside the to the script, not just what’s inside some div with some ID? `$(“body”).highlight(hls_query, 1, “hls”);` seems to generate problems for FireFox but works in IE…

Thanks for any thoughts on this
- Thaya Kareeson (51 comments.) says:
  
  4/16/2009 at 2:08 pm
  
  You are right, it should be hls_class to not violate the reserved word. I will change the post. Thank you!
  
  Everything inside a tag? The syntax you gave me shouldn’t been fine according to the jQuery documentation.
  - RavanH (11 comments.) says:
    
    4/16/2009 at 7:41 pm
    
    I thought so too but found that when using $(”body”) I got very weird results in FF2 and FF3.
    
    It seems to be some kind of conflict with about EVERY other little piece of javascript on the same page… a small date script, google analytics script, skype check script, google ads, and many others. After disabling about every other script, the highlights worked in FF.
    
    Strange how this apparently is no issue at all when any div ID or even class is used…
    
    Anyway, thanks for this article and response!
Francisco Lopez (1 comments.) says:

4/27/2009 at 4:47 pm

Take out the \\b off the var regex variable, if you want to match the term any where in the text – not just at a word boundary.

var regex = new RegExp(“(]*>)|(“+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,”\\$1″) +”)”, insensitive ? “ig” : “g”);

Cheers,
- RavanH (11 comments.) says:
  
  5/8/2009 at 6:08 pm
  
  Thanks, Fransisco, for this tip. I’ll be testing with it
Thomas (1 comments.) says:

5/24/2009 at 8:54 am

Tried to make this work, but keep running into an issue caused by a conflict with my theme, which uses the DIV ID Container. RavanH’s plugin caused the same issue. Ah well.
- RavanH (11 comments.) says:
  
  5/25/2009 at 6:19 am
  
  Hi Thomas, at first I had set up my plugin to use “body” as post-area so that a user could then use custom CSS to control to which area highlighting would be limited. While this approach should work (as far as I can figure) this turned out to result in some unpredictable behaviour in different browsers and to conflict with about EVERY other bit of javascript on the same page. So I decided to hard code the container ID #content which is used in a wide variety of themes. Do I understand correctly that you changed the code of the plugin to use #container and still there is a conflict? If so, can you give me a link or contact me directly (see plugin) so I can take a look at what might be happening?
ZK@Web Marketing Blog (1 comments.) says:

6/20/2009 at 2:17 pm

As you may have noticed if you read this blog on occasion I’ve been doing quite a bit of work with the jQuery JavaScript library in the last few months. I’ve kind of fallen into a couple of very client heavy projects and jQuery is turning out to be a key part in these particular projects. jQuery is definitely one of those tools that has got me really excited as it has changed my perspective in Web Development considerably from dreading of doing client development to actually looking forward to applying richer and more interactive client principles.
Katherine says:

12/2/2009 at 6:27 am

It’s great feature, but it doesn’t work…
I insert necessary code, change #content to .post, but there is no any highlighting (even if I enable Default theme).
What’s the problem?

WordPress 2.8.6 + plugins:
Google Analytics,
Akismet,
All in one SEO,
Contact Form 8,
Shutter Reloaded and Subscribe to Comments…
kaman says:

2/21/2010 at 10:38 pm

Help please!
I did everything according to your instruction.
And it works…

BUT, when I add google adsense code in the index.php(I think the wordpress search results page use index.php too)…..it does NOT work any more. I only can see a blank page.

Remove either google adsense code or your JS code…the results will be OK.

Why? thanks very much.
- RavanH (11 comments.) says:
  
  2/22/2010 at 3:09 pm
  
  I noticed the same. And with lots of other javascript too. After making this high-lite code into a wordpress plugin I ran into toooo much problems by various users that I have long abandoned the project too bad…
  - Thaya Kareeson (51 comments.) says:
    
    2/24/2010 at 5:58 pm
    
    That’s a bummer! I’m only guessing, but this might be because the regex is searching and replacing stuff in other JavaScripts. I’m not sure if there’s a way to fix this other than just making sure that all JavaScripts do not clash with this on your search page.
WP Tricks (5 comments.) says:

3/2/2010 at 9:50 am

I like it.. I want tried it on my website
RavanH (11 comments.) says:

4/7/2010 at 3:59 am

Ran into an error in IE8: Object doesn’t support this property or method

And the error line: var regex = new RegExp(‘(]*>)|(\\b’+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,’\\$1′) +’)’, insensitive ? ‘ig’ : ‘g’);

Anyone know what’s wrong with the regular expression in IE ?
Mike Gulline (1 comments.) says:

3/14/2012 at 11:52 am

just what i was looking for… almost!

i tweaked your js a bit to highlight multiple word matches (each with their own, incremental class!). i am sure it will be of use to someone (ME).

if(typeof(hls_query) != ‘undefined’){
hls_queryA = hls_query.split(‘ ‘);
for(var i=0; i<hls_queryA.length; i++) {
$("#post-area").highlight(hls_queryA[i], 1, "hls"+i);
}
}

as you can see, i just split your "hls_query" into an array and looped through, incrementing the "hls" class along the way.

be sure to add the new styles to your CSS…

hls0 {color}
hls1 {color}
hls2 {color}
hls3 {color}
and so on…

thanks again! great script.

mike
Jan Bengtsson (1 comments.) says:

9/14/2012 at 10:07 am

Hi, I’m using this nice script on two Swedish sites. It works very well – with one exception: When the search term has one of the Swedish special characters åäöÅÄÖ as the initial letter, the script fails to find the word on the page. I suppose this issue can be handled by the regular expression, but I don’t know how. Anyone able to help? Thank’s in advance. //Jan