I making a small plugin for wordpress and that works through a shortcode. is it possible that the page that uses my shortcode has only my js and style rather than having theme style and js as well. I want that page to only load resources and nothing else:

Here is my code but I don't know how to make it conditional:

function addFiles(){
    wp_enqueue_style('bootstrap' , '.3.5/css/bootstrap.min.css');
    wp_enqueue_style('fontii' , ';display=swap');
    wp_enqueue_style('font-awesome' , '.8.2/css/all.css');
    wp_enqueue_style('jqueryUI' , '.12.1/themes/base/jquery-ui.css');
    wp_enqueue_script( 'jquery', '.9.1/jquery.min.js' );
    wp_enqueue_script( 'bootstrap-js', '.3.5/js/bootstrap.min.js' );
    wp_enqueue_script( 'j-ui', '.12.1/jquery-ui.js' );
}
add_action( 'init', 'addFiles' );

basically all I want a way for removing default style and script for a specific url or where my shortcode is used. I guess a specific url would be easier.

Thanks for all the help.

I making a small plugin for wordpress and that works through a shortcode. is it possible that the page that uses my shortcode has only my js and style rather than having theme style and js as well. I want that page to only load resources and nothing else:

Here is my code but I don't know how to make it conditional:

function addFiles(){
    wp_enqueue_style('bootstrap' , 'http://maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css');
    wp_enqueue_style('fontii' , 'https://fonts.googleapis/css?family=Gayathri&display=swap');
    wp_enqueue_style('font-awesome' , 'https://use.fontawesome/releases/v5.8.2/css/all.css');
    wp_enqueue_style('jqueryUI' , 'https://cdnjs.cloudflare/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css');
    wp_enqueue_script( 'jquery', 'https://ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js' );
    wp_enqueue_script( 'bootstrap-js', 'http://maxcdn.bootstrapcdn/bootstrap/3.3.5/js/bootstrap.min.js' );
    wp_enqueue_script( 'j-ui', 'https://code.jquery/ui/1.12.1/jquery-ui.js' );
}
add_action( 'init', 'addFiles' );

basically all I want a way for removing default style and script for a specific url or where my shortcode is used. I guess a specific url would be easier.

Thanks for all the help.

• plugins
• wp-enqueue-script
• wp-enqueue-style

Share Improve this question asked Sep 13, 2019 at 13:19 aliali 6511 gold badge11 silver badge55 bronze badges 1

• 1 It sounds like you're wanting to take over an entire page. Is that correct? If so, a shortcode isn't going to work because the only way to dequeue all other theme and plugin JS and CSS is to know what specific themes and plugins the site is using. Instead, you should look into creating your own template in the plugin itself, and then just have site authors apply that page template wherever they want to use it. That way, your template can contain only your code and nothing else from the theme or other plugins. – WebElaine Commented Sep 13, 2019 at 13:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The problem with this is that the styles and scripts you want to remove gets printed in the head (some scripts in the footer), while your shortcode will most likely only be triggered after that.

One way will be as you suggested, doing this based on the url, but rather doing it based on the page (if possible). Using is_page, wp_deregister_style, wp_dequeue_style, wp_deregister_script and wp_dequeue_script.

if (is_page( array( 1, 2, 'about-us' ) )) {
    add_action( 'init', 'addFiles' );
    add_action( 'init', 'removeFiles' );
}

function addFiles(){
    wp_enqueue_style('bootstrap' , 'http://maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css', array(), '3.3.5');
    ...
}
function removeFiles() {
    wp_deregister_style( $handle );
    wp_dequeue_style( $handle );
    wp_deregister_style( $handle );
    wp_dequeue_script( $handle );
}

This way you can execute the functions in time to deregister dequeue and the scripts and styles. The downside is you need to manually specify the page id, slug or title. Luckily you can pass it as an array, so you can add multiple pages at once.

It is 'safer' to deregister and dequeue the styles and scripts that you want to remove, since at the time your function executes, some might only be registered, and some might already be enqueued. The $handle is the name set for the script/style when it was registered or enqueued, like 'bootstrap' for the wp_enqueue_style in the example above.

Remember to add the version to you wp_enqueue_(s). Usually during development I use time() to avoid caching.

Also note that you can use the native jQuery-ui that wordpress provides by using:

wp_enqueue_script( 'jquery-ui-core' );

Here is a list of what you can load: jQuery-ui and WordPress