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:
Why is this happening and how can I avoid it?
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' );
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);
}
Let me know if it works for you!
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.
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.
