PassMark Logo
Home » Forum


No announcement yet.

Wordpress Jump to Highlight

  • Filter
  • Time
  • Show
Clear All
new posts

  • Wordpress Jump to Highlight


    No issue with the basic search function, but can't get the jump to highlight feature to work.

    I have these 2 lines in my header.php file:
    <style type="text/css">.highlight { background: #FFFF40; }</style>
    <script type="text/javascript" src="highlight.js"></script>

    I have the highlight.js file in my wordpress root folder.

    Checked the configure option that says "Jump to match and highlight within document"

    When I go to a results page for "balance", the url reads as:
    That url is a tip off that the jump should be working, yes?

    So, I'm a bit stumped...


  • #2
    I can't see in your PHP files from here, but when I look in the HTML code for the page, I couldn't find the script include line for the "highlight.js" file.

    So as the JS file isn't being included this would explain why there is no highlighting.


    • #3
      Yeah, I noticed, as well. Viewing browser's "page source" of any of my pages shows the .highlight { background: #FFFF40; } style in the <head>, but not the src="highlight.js" script. Even though I'm looking at my Header.php right here in Dreamweaver and see both lines, one above the other, and it's been saved and uploaded a couple/three times already. Maybe I'm tired, ha. Must be something stupidly simple, but I'm at a loss.


      • #4
        Since the time your last post and looking at your site now. I see that the script include line is now included in the <head>, but the location is incorrect. If you placed it in your site's root directory as mentioned previously, then try

        <script type="text/javascript" src="/highlight.js"></script>

        Additionally, looking at the source code for the page you now have two <body> tags. You should move the onload() call into the existing body tag or an alternative would be to put the following line on the very last line of your HTML file (eg: after the closing </body> tag) so that it can perform the highlighting after the content has been downloaded:

        <script type="text/javascript">highlight();</script>


        • #5
          So I moved both lines in header.php to a position above the Yoast script. Now both lines can be seen in the page source. Why that is, I have no idea.
          Also in header.php, I put <body onload="highlight();"> under the <body class> tag

          Jump to highlight now works, but only for the home page. So, a step in the right direction, but...



          • #6
            Ok, that backslash in front of highlight.js did the trick. Highlight/Jump works for all pages, now. Not sure about the two body tags you mentioned, but I guess if it works...
            Thanks much for the help, appreciate it : )