Please forgive me, this is probably a duplicate, but I am not sure what to search anymore, as I do not get any error code.

I want to implement text highlighting with javascript from this code example here:

For this, I made this miserable attempt at my first ever custom plugin:

<?php
/*
Plugin Name: InPage-Search-Highlight
Plugin URI:  http://link to your plugin homepage
Description: Highlights all occurences of a search term within the same page.
Version:     1.0
Author:      morph3us - based off of /
Author URI:  
License:     CC0
*/

function inpage_search_highlight() {
    $pluginurl = plugins_url('/inpage-search-highlight/js/hilitor.js');

    echo "<div class='inpage-search' style='margin-top:300px'>
        <script type='text/javascript' src='{$pluginurl}'></script>
        <script type='text/javascript'>
          var myHilitor = new Hilitor('page-template'); // id of the element to parse
          myHilitor.apply('highlight words');
        </script>
    </div>";
}

add_shortcode('inpage_search_highlight', 'inpage_search_highlight');
?>

I obviously additionally added a folder named "js" and a file within called "hilitor.js". In the latter I copied the code from the website.

The contents of the echo are visible in the chrome developer tools, however no searchbox appears on the actual page.

Edit

Moral of the story: I did initialize the Javascript, but did not provide any UI to call them. There's just so much new stuff for me, that I overlooked the obvious.

I was kind of mislead by the phrasing in the art of web tutorial. Because paragraph 2 is titled "how to implement", I thought this would be the whole integration, it should probably be more specifically called "how to initialize the highlitor class" or something.

Way down in section 5, there is an example that was a breeze to implement and works even better than what I had originally envisioned.

Thanks for the help, guys, you really made me rethink the right things! So the working echo part in the code is:

    echo "<div class='inpage-search' style='margin-top:300px'>
        <form>
            <p>Highlight keywords as you type: <input id='keywords' size='24'></p>
        </form>

        <script src='{$pluginurl}'></script>
        <script>

          window.addEventListener('DOMContentLoaded', function(e) {
            var myHilitor2 = new Hilitor('playground');
            myHilitor2.setMatchType('left');
            document.getElementById('keywords').addEventListener('keyup', function(e) {
              myHilitor2.apply(this.value);
            }, false);
          }, false);

        </script>   
    </div>";

Please forgive me, this is probably a duplicate, but I am not sure what to search anymore, as I do not get any error code.

I want to implement text highlighting with javascript from this code example here:

https://www.the-art-of-web/javascript/search-highlight/#box1

For this, I made this miserable attempt at my first ever custom plugin:

<?php
/*
Plugin Name: InPage-Search-Highlight
Plugin URI:  http://link to your plugin homepage
Description: Highlights all occurences of a search term within the same page.
Version:     1.0
Author:      morph3us - based off of https://www.the-art-of-web/javascript/search-highlight/
Author URI:  http://www.morph3us
License:     CC0
*/

function inpage_search_highlight() {
    $pluginurl = plugins_url('/inpage-search-highlight/js/hilitor.js');

    echo "<div class='inpage-search' style='margin-top:300px'>
        <script type='text/javascript' src='{$pluginurl}'></script>
        <script type='text/javascript'>
          var myHilitor = new Hilitor('page-template'); // id of the element to parse
          myHilitor.apply('highlight words');
        </script>
    </div>";
}

add_shortcode('inpage_search_highlight', 'inpage_search_highlight');
?>

I obviously additionally added a folder named "js" and a file within called "hilitor.js". In the latter I copied the code from the website.

The contents of the echo are visible in the chrome developer tools, however no searchbox appears on the actual page.

Edit

Moral of the story: I did initialize the Javascript, but did not provide any UI to call them. There's just so much new stuff for me, that I overlooked the obvious.

I was kind of mislead by the phrasing in the art of web tutorial. Because paragraph 2 is titled "how to implement", I thought this would be the whole integration, it should probably be more specifically called "how to initialize the highlitor class" or something.

Way down in section 5, there is an example that was a breeze to implement and works even better than what I had originally envisioned.

Thanks for the help, guys, you really made me rethink the right things! So the working echo part in the code is:

    echo "<div class='inpage-search' style='margin-top:300px'>
        <form>
            <p>Highlight keywords as you type: <input id='keywords' size='24'></p>
        </form>

        <script src='{$pluginurl}'></script>
        <script>

          window.addEventListener('DOMContentLoaded', function(e) {
            var myHilitor2 = new Hilitor('playground');
            myHilitor2.setMatchType('left');
            document.getElementById('keywords').addEventListener('keyup', function(e) {
              myHilitor2.apply(this.value);
            }, false);
          }, false);

        </script>   
    </div>";

• php
• javascript
• text

• 1 "I have read about "wp_register_script" but didnt fully understand it. Is it okay in this case to omit it?" - technically it is ok not to use it. But it doesn't make sense in the WP world. Check the doc with its examples, it should be quite simple. Do you see the file loaded in the network tab? – kero Commented Jan 5, 2021 at 16:58
• 1 What do you actually want to highlight via the JS lib? – Q Studio Commented Jan 5, 2021 at 17:21
• 1 @kero: yes, the hilitor.js is present in the network tab @ Q Studio: I am using wpdownloadmanager with the extended shortcuts plugin, which lists a bunch of downloads in a tree view. I found out it is heavily based on this site: abeautifulsite/jquery-file-tree I still have to look into your solution, will update when I know more. Thanks, both of your for trying to help! Appreciate it greatly! – morph3us Commented Jan 5, 2021 at 20:43
• Just a thought on my first attempt: Could iti be, that I dont see any Ui, because there is none? I initially thought that the UI would be generated in the Javascript, but I think its not. So basically, my problem would maybe be that I did not add a form and need to learn how to hook up the right function calls to the form's button? – morph3us Commented Jan 6, 2021 at 1:29

1 Answer 1

You could "borrow" the html form from the example and include this in your template - either directly of via a filter like wp_footer:

<form method="GET" action="/javascript/search-highlight/" onsubmit="myHilitor.apply(hilite.value); return false;">
<fieldset>
<legend>Highlight Words</legend>
<label>Keywords</label><span><input type="text" size="32" name="hilite" value="search engine keywords">
<input type="submit" value="Apply">
<input type="button" value="Remove" onclick="myHilitor.remove();"></span>
</fieldset>
</form>