― I’M SHISHIR RAVEN

WEBSITE & App Builder

Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry’s standard dummy text.

Remove Default CSS and JS from wordpress Template

Removing all the Default Theme Javascript and CSS from a WordPress Template.

Why?

Case : Using a VueJS Application in a WordPress Plugin and Theme CSS is Clashing.

There are some default CSS/JS which are included in every page + there is the Theme CSS which is also included on every page. I did not required any for it to work on my page. Since you are reading this page your requirement would be similar

How?

Strategy

On `wp_enqueue_scripts` hook usually add our own scripts, so before adding our own CSS/JS we will dequeue all the scripts and style.

Code

The following is an example function that I use.


function goals_enqueue_stuff() {

  if ( is_page_template( wp_normalize_path(plugin_dir_path( __FILE__ ) . 'templates\goals_vue_app.php') ) ) 
  {


    //  Removing all Scripts. 
    global $wp_scripts;
    foreach( $wp_scripts->queue as $script ) :
         wp_dequeue_script( $script );
    endforeach;

    // Removing all Styles
    global $wp_styles;
    foreach( $wp_styles->queue as $style ) :
        wp_dequeue_style( $style );
    endforeach;


   wp_enqueue_media();
    wp_enqueue_style( 'goal-routine-css', plugin_dir_url( __FILE__ ) . 'goal-app/dist/assets/index.css');
    wp_enqueue_script( 'goal-routine-module', plugin_dir_url( __FILE__ ) . 'goal-app/dist/assets/index.js');
    wp_enqueue_script( 'goal-routine-modulepreload', plugin_dir_url( __FILE__ ) . 'goal-app/dist/assets/vendor.js');
  } 
}
add_action( 'wp_enqueue_scripts', 'goals_enqueue_stuff',1000 );


Posted

in

by

Tags: