JavaScript in Customizr Theme


You want to add some custom JavaScript to a particular page. How do you do that? Suppose you know the page id is 42. An article on the Internet at WordPress.org says that you can add some code and your script to the functions.php file in your child theme. At this site we are using a Customizr child theme. The code is shown below.

add_action('wp_footer', 'add_my_extra_js', 100);
function add_my_extra_js(){
    if ( is_page(42) ) {
        ?>
        <script type="text/javascript">
            //YOUR SCRIPT HERE
        </script>
        <?php
    }
}

If you want to add the code to a particular post (not a page) then you will need to change the code above from is_page() to is_single(). This post’s id is 4093. I know that because In the WordPress dashboard, while editing this post, I had a look at the address bar of the browser. To test this we could just write a simple function that has an alert box that displays a message when the user clicks a button.

function alertHelloWorld () {
    alert("Hello World!");   
}

Click button below to get a message from JavaScript code inside functions.php file of child theme.

So now our new updated code for this post is shown below. All we need to do now is add this code to WordPress’ functions.php file in our child theme. As recommended by the experts, we are running a child theme at this site. You need to FTP into your site and locate the correct file, functions.php, open it and add the code and save it back to the server.

add_action('wp_footer', 'add_my_extra_js', 100);
function add_my_extra_js(){
    if ( is_single(4093) ) {
        ?>
        <script type="text/javascript">
            function alertHelloWorld () {
                alert("Hello World!");   
            }
        </script>
        <?php
    }
}

To fill in this discussion, I have shown the HTML code used in this post to display the button above. Note that the button’s onclick event calls the JavaScript function called alertHelloWord() which exists inside of the functions.php file in the child theme, which loaded our function into the footer of this particular post only.

<input type="button" value="Click me" onclick="alertHelloWorld()" />

For more information on add_action you can read this add_action article at WordPress.org.

A Safer Way

I like this way for the simple addition of some JavaScript for a single page or post. If you have a bunch of JavaScript functions that you want to be made available in all of your pages and posts, there is a better way. A great site called wpbeginner.com has an article on adding JavaScript (and CSS) to you site that will prevent conflicts. For example, if you use the manual way as described in this post, and you add jQuery, and another plugin add jQuery, you then have jQuery loaded twice. That slows down the site. You could also be using different versions of jQuery which could cause conflicts in the operation of your site. The name of that article is How to Properly Add JavaScripts and Styles in WordPress. The next post, JavaScript Enqueue will discuss this enqueue system.

Leave a comment

Your email address will not be published. Required fields are marked *