How to Use jQuery in a Custom PHP Page in WordPress

By /

jQuery is the latest javascript library which can be used in html or php pages to enhance user experience and functionality.It simplifies the HTML dom traversal,interaction and animation for any page.In this guide we will learn how to use jquery in a custom PHP page in wordpress.

Step 1: Add Code to a custom PHP Page In WordPress

I have child theme astra-child activated in my dashboard.

Navigate to astra-child folder under wp-content/themes folder. Create a folder custom-templates inside astra-child folder.

Create a custom page template named as custom-page.php inside custom-templates folder.

Now we need to assign this template to any page.Create a Page , Home Page under Pages in admin.We will assisgn this template to Home Page under Pages in admin. Now Home Page has custom template page assigned.

If you are not familiar with custom PHP page in wordpress you can go through the tutorial here.In this tutorial I have already explained in detail how to setup a custom PHP Page In WordPress.

Since we have created a custom PHP Page now we need to add some html code in template page.Check the code below for this:

/**
 * Template Name: Custom jQuery Page
 */
get_header(); // Include the header
?>
<div id="custom-content-area">
    <h1>Welcome Custom jQuery Section</h1>
    <button id="custom-button">Click Here!</button>
    <div id="result-area"></div>
</div>
<?php
get_footer(); // Include the footer

In the above code I have added html code with a button.With jQuery we will attach some event handling on this button.But before this we need to add jquery and custom js script within the page.

Step 2: Enqueuing jQuery In WordPress

Though wordpress has jQuery included you should enqueue jQuery in WordPress properly to avoid conflicts.Open your functions.php code and add the below code in it

function my_enqueue_scripts() {
    // Enqueue jQuery
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

my_enqueue_scripts() is a custom function which enqueue scripts in the page.

wp_enqueue_script(‘jquery’) tells the wordpress to load jQuery in frontend.

add_action(‘wp_enqueue_scripts’, ‘my_enqueue_scripts’) This line hooks my_enqueue_scripts() function into wp_enqueue_scripts action.

Step 3: Adding custom jQuery Scripts In Template Page

Now we need to add an event to button.In this event whenever the button with id custom-button is clicked result-area section will be updated with text.

To add this event we need to add custom jQuery in the page .

Open custom-page.php page.This is a template page in custom-templates folder.Add the below code to custom-page.php page above get_footer().

See the screenshot below:

Check the below code for this:

<script>
    jQuery(document).ready(function($) {
    $('#custom-button').on('click', function() {
        $('#result-area').text('Button was clicked! This is jQuery in action.');
    });
});
 </script>

In the code above I have attached a click event on button with id custom-button .Whenever the button will be clicked the div with id result-area will be updated with text.

Step 4: Test jQuery functionality

Now we have added custom html with custom jquery in our template file.Now we need to test this functionality

Navigate to url: http://localhost/phpgurublog in browser.

You can see the page with text and Click here button.See the screenshot below:

Now when you will click on Click Here button , text will be updated below button.Check the screenshot below:

Step 5: Best Practices

To ensure smooth functionality with jQuery you should follow below practices:

1.Always use wordpress functions : use wordpress function wp_enqueue_scripts to load jQuery in frontend

2.Use jQuery in no conflict mode: Always use jQuery or $ variable with document.ready() function

3.Debugging: For debugging check your console for any jQuery errors.If jQuery is not loaded or is there any other jQuery error you can check it in console and fix it.

In this guide we learned how to add a basic custom jQuery code integration within a customtemplate file.WIth this now you can extend it as per your requirements.You can create more dynamic and interactive pages with jQuery.

Happy Coding!

Scroll to Top