How to write a Javascript function inside the func

Question

I'm altering a plugin on developer recommendations (See latest post), which advices to write a bit of Javascript in the functions.php of Wordpress.

Now, when I did that my whole wordpress went blank. Well, after a bit of thinking.. "You can't write plain Javascript inside of PHP"..

So I wrote them inside a <script> tag, and that inside of a echo ", "; tags. Now.. I'm unsure of the function working (have not tested that yet), but Wordpress is showing again, but.. I'm getting the message

Notice: Undefined variable: group in /home/appelhulp/domains/appelhulp.nl/public_html/wp-content/themes/Divi/functions.php on line 8
Notice: Undefined variable: option in /home/appelhulp/domains/appelhulp.nl/public_html/wp-content/themes/Divi/functions.php on line 9
Notice: Undefined variable: option in /home/appelhulp/domains/appelhulp.nl/public_html/wp-content/themes/Divi/functions.php on line 25

And this is the code file

So my question:
What is the problem and how do I make those messages disappear?

The correct answer

Although I accepted @Burak's answer, this is only half of the correct answer. Please also see @RahilWazir's part, which half of his/her answer belongs to the solution. As Burak came with the correct script, RahilWazir came with the suggestion to place it in the footer.php instead of functions.php. And placing it there, did the trick. In functions.php didn't let me achieve what I was seeking. Therefor, thanks both!

Answer 1

there is a better and standard way in wordpress

<?php
function add_js_functions(){
?>
<script>
// your js functions here 
</script>
<?php
}
add_action('wp_head','add_js_functions');

Answer 2

When you use double quotes "" to define JS string, PHP will interpret $group as a variable. In order to fix it, you need to use single quotes '' instead.

Answer 3

As you are using double quotes, PHP will think that the variable with $ signs as a php variable. You need to either change them to single quote and rearrange the code either you need to take a look at heredoc which is suitable for situations like this.

echo <<<'EOT'
<script>
( function() {
    var categories = {};
    var $group = jQuery();
    jQuery('select.app_select_services option').remove().each(function() {
        var $option = jQuery(this),
            contents = $option.text().split(' - '),
            group = jQuery.trim(contents[1]);

        if (!categories.hasOwnProperty(group)) {
            var optGroup = jQuery('<optgroup />', { label: group });
            optGroup.appendTo('select.app_select_services');
            categories[group] = optGroup;
        }

        categories[group].append(jQuery('<option />', {
            text: jQuery.trim(contents[0]),
            value: jQuery(this).val()
        }));
    });
} )();
</script>
EOT;

Answer 4

You need to wait for DOM to be fully initialized. So wrap your jQuery snippet within ready handler. Or even better place is to place this snippet in your footer.php file before closing </body> tag.

jQuery(document).ready(function($) { // <-- wrap it
    var categories = {};
    var $group = jQuery();
    jQuery('select.app_select_services option').remove().each(function() {
        var $option = jQuery(this),
            contents = $option.text().split(' - '),
            group = jQuery.trim(contents[1]);

        if (!categories.hasOwnProperty(group)) {
            var optGroup = jQuery('<optgroup />', { label: group });
            optGroup.appendTo('select.app_select_services');
            categories[group] = optGroup;
        }

        categories[group].append(jQuery('<option />', {
            text: jQuery.trim(contents[0]),
            value: jQuery(this).val()
        }));
    });
});