CODEWITHSUNDEEP
javascriptphpwordpresswp-enqueue-scripts
JoSch
JoSch

Reputation: 990

WordPress how to enqueue custom script on frontend and avoid enqueueing it on the admin panel

I'm loading a custom script (app-min.js) into a WordPress site. From the site's functions.php:

wp_enqueue_script('app-min', get_template_directory_uri() . '/app/app-min.js', false, 1.0, true);

Works fine on the frontend, but the script is also loaded in the admin panel:

Screenshot, DevTools showing custom script being loaded in WordPress admin panel

Why is this happening and how can I avoid it?

Upvotes: -1

Views: 1881

Answers (4)

X9DESIGN
X9DESIGN

Reputation: 783

Solution for Loading Scripts Only on the Front-End in WordPress

When working with WordPress, it's often necessary to ensure that certain scripts or styles are only loaded on the front-end and not in the WordPress Admin area. A common approach is to use the is_admin() function, but this can sometimes be inadequate or cause issues. Here's a more precise method using did_action() to check if front-end hooks like get_header() or get_footer() have been executed.

Step 1: Create a Function to Determine Front-End Context

Create a function that checks if the code is being executed on the front-end by verifying if get_header() or get_footer() has been called:

if ( ! function_exists( 'is_front_end' ) ) {
    function is_front_end() {
        if ( did_action( 'get_header' ) || did_action( 'get_footer' ) ) {
            return true;
        }
        return false;
    }
}

Step 2: Use the New Function to Add Actions

Instead of using if ( ! is_admin() ) {}, use the is_front_end() function to ensure that your scripts are only enqueued on the front-end:

if ( is_front_end() ) {
    wp_enqueue_script('app-min', get_template_directory_uri() . '/app/app-min.js', false, 1.0, true);
}

Explanation

did_action('get_header') and did_action('get_footer'): These functions check if the get_header or get_footer hooks have been executed, which are specific to the front-end. In the admin area, these hooks are never called.

is_front_end(): By creating this function, you add an extra layer of control over where your code is executed, ensuring that scripts and styles are only loaded where needed.

Upvotes: 0

philip
philip

Reputation: 413

I'm having the same problem and for some reason the bool is_admin() method did not work, insomuch as the script was still being loaded in the admin. After some digging around, this solution worked for me. FYI I'm adding the script to the footer (last parameter of wp_enqueue_script = false).

function child_enqueue_styles() {
    $is_admin = current_user_can('manage_options');

    if (!$is_admin) {
        wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'),'1.1.6', true );
    }
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

Note that the above solution prevents the script being loaded on the frontend whilst you are logged in. You'll either have to log out or load the front end into an incognito browser window to see the script being loaded.

Upvotes: 0

Akash Dhawade
Akash Dhawade

Reputation: 21

Please use the hook 'wp_enqueue_scripts' to enqueue css and js meant to be specifically used only on frontend. More details on https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

function theme_enqueue_script() {
    wp_enqueue_script('app-min', get_template_directory_uri() . '/app/app-min.js', false, 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_script' );

Upvotes: 1

Ruvee
Ruvee

Reputation: 9097

You could exclude it from the admin panel by using is_admin condition. So your code would be something like this:

if(!is_admin()){
  wp_enqueue_script('app-min', get_template_directory_uri() . '/app/app-min.js', false, 1.0, true);
}

is_adminDocs

Let me know if it works for you!

Upvotes: 1

Related Questions