• Hi,

    I have a load of CSS/JS files, that I’m trying to merge into just one CSS/JS file. I would use an existing plugin – BUT those tend to make it on the fly (and don’t seem to take into account things like ../foo/ URLs). So, I’ve got the following:

    <?php
    /*
    Plugin Name: My Load Reducer
    Description: Removes unneeded and unwanted stylesheets from other plugins
    Version: 0.1
    */
    
    //Use a class to avoid conflicts
    class my_load_reducer {
        function __construct() {
            //Hook into wp_enqueue_scripts with a high priority
            add_action( 'wp_enqueue_style', array($this, 'deregister_styles'), 99999 );
            add_action( 'wp_enqueue_scripts', array($this, 'deregister_styles'), 99999 );
            add_action( 'init', 'deregister_styles', 99999 );
        }
        function deregister_styles() {
            // remove stuff first...
            wp_deregister_style( 'login-with-ajax' );
            wp_deregister_style( 'contact_form_maker_frontend' );
            wp_deregister_style( 'fontawesome' );
            wp_deregister_style( 'genericons' );
            wp_deregister_style( 'jetpack_css' );
            wp_dequeue_style( 'jetpack_css' );
            wp_deregister_style( 'maxgalleria-image-tiles' );
            wp_deregister_style( 'maxgalleria-image-tiles-skin-standard-css' );
    
            wp_deregister_script( 'googlemap' );
            wp_deregister_script( 'rwmb-map' );
            wp_deregister_script( 'gmap_form_api' );
            wp_deregister_script( 'gmap_form' );
    
            wp_enqueue_style( "common-css", '/wp-content/common.min.css' );
        }
    }
    
    //Instantiate the class
    $my_load_reducer = new my_load_reducer();

    What exactly is the different with :

    wp_enqueue_style
    wp_enqueue_scripts
    and
    init

    For some CSS, the first one is needed – others the 2nd one is needed, and I read somewhere about the “init” function as well (which doesn’t seem to do anything for me). One that has been annoying/avoiding me, is the JetPack CSS (I have this in my own CSS file now,so want to skip it);

    $version = Jetpack::is_development_version() ? filemtime( JETPACK__PLUGIN_DIR . 'css/jetpack.css' ) : JETPACK__VERSION;
    
    wp_enqueue_style( 'jetpack_css', plugins_url( 'css/jetpack.css', __FILE__ ), array(), $version );
    		wp_style_add_data( 'jetpack_css', 'rtl', 'replace' );

    I have tried both:

    wp_deregister_style( 'jetpack_css' );
            wp_dequeue_style( 'jetpack_css' );

    Yet neither seem to work ?? (I’ve disabled W3 TotalCache, just so I can be sure it wasn’t a caching issue)

    TIA

    Andy

Viewing 5 replies - 1 through 5 (of 5 total)
  • Dion

    (@diondesigns)

    You put your plugin in a class. so instead of this:

    add_action( ‘init’, ‘deregister_styles’, 99999 );

    you will need this:

    add_action(‘init’, array($this, ‘deregister_styles’), 99999);

    Thread Starter andynewby

    (@andynewby)

    Thanks for the reply Dion. I’ve tried that, but still seems to run BEFORE the other stuff has been registered (so obviously it can’t remove, if its not added yet). In the gallery plugin (one of the places I’m having the issue), we have this to set up the css:

    // The main styles for this template
    		$main_stylesheet = apply_filters(MAXGALLERIA_FILTER_IMAGE_TILES_MAIN_STYLESHEET, MAXGALLERIA_PLUGIN_URL . '/addons/templates/image-tiles/image-tiles.css');
    		wp_enqueue_style('maxgalleria-image-tiles', $main_stylesheet);

    Now, I added an “echo” alongside that (so I can see when its being added in the process tree), and then in my code I also added:

    echo "foo test";

    ..so I can see where my code runs. For mine, it runs at the very start of the page (before any rendering). For the gallery, it seems to add it just before the post is shown:

    <section class="entry-content clearfix" itemprop="articleBody">
    
    									running tiles
    running tiles
    running tiles
    running tiles
    running tiles
    running tiles
    running tiles
    running tiles
    <p>I’m always in awe

    I’m at a loss as to what I’m doing wrong ??

    TIA

    Andy

    Dion

    (@diondesigns)

    Perhaps you should try a different action hook:

    add_action(‘wp’, array($this, ‘deregister_styles’), 99999);

    The wp_loaded hook would probably work as well.

    Thread Starter andynewby

    (@andynewby)

    Thanks. The nuts thing, is that only shows the 1 item:

    login-with-ajax | x
    <!DOCTYPE html>

    If I add a bit more debugging into the functions.php call, I use:

    global $wp_scripts;
                global $wp_styles;
                echo "Scripts: \n";
                print_r($wp_scripts->queue);
    
                echo "\nStyles: \n";
                print_r($wp_styles->queue);

    and get:

    Scripts:
    Array
    (
        [0] => login-with-ajax
    )
    
    \Styles:
    Array
    (
        [0] => login-with-ajax
    )

    Arrrrggh!

    As an example, here is what I see in the HTML source on that same page:

    <script type='text/javascript' src='https://steampunk-reviews.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
    <script type='text/javascript' src='https://steampunk-reviews.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
    <script type='text/javascript' src='https://steampunk-reviews.com/wp-content/themes/valenti/plugins/login-with-ajax/login-with-ajax.js?ver=4.2.2'></script>
    <script type='text/javascript' src='https://maps.google.com/maps/api/js?sensor=false&ver=4.2.2'></script>
    <script type='text/javascript' src='https://steampunk-reviews.com/wp-content/plugins/contact-form-builder/js/if_gmap_front_end.js?ver=4.2.2'></script>
    <script type='text/javascript' src='https://steampunk-reviews.com/wp-content/plugins/contact-form-builder/js/cfm_main_front_end.js?ver=1.0.20'></script>
    <script type='text/javascript' src='https://steampunk-reviews.com/wp-content/themes/valenti/library/js/modernizr.custom.min.js?ver=2.6.2'></script>

    and some of the CSS as well:

    <link rel='stylesheet' id='common-css-css'  href='https://steampunk-reviews.com/wp-content/common.min.css?ver=4.2.2' type='text/css' media='all' />
    <link rel='stylesheet' id='open-sans-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.2.2' type='text/css' media='all' />
    <link rel='stylesheet' id='dashicons-css'  href='https://steampunk-reviews.com/wp-includes/css/dashicons.min.css?ver=4.2.2' type='text/css' media='all' />
    <link rel='stylesheet' id='admin-bar-css'  href='https://steampunk-reviews.com/wp-includes/css/admin-bar.min.css?ver=4.2.2' type='text/css' media='all' />
    <link rel='stylesheet' id='jquery-ui-css'  href='https://steampunk-reviews.com/wp-content/plugins/contact-form-builder/css/jquery-ui-1.10.3.custom.css?ver=4.2.2' type='text/css' media='all' />
    <link rel='stylesheet' id='contact_form_maker_frontend-css'  href='https://steampunk-reviews.com/wp-content/plugins/contact-form-builder/css/contact_form_maker_frontend.css?ver=4.2.2' type='text/css' media='all' />
    <link rel='stylesheet' id='cb-main-stylesheet-css'  href='https://steampunk-reviews.com/wp-content/themes/valenti/library/css/style.css?ver=4.0.3' type='text/css' media='all' />
    <link rel='stylesheet' id='cb-font-stylesheet-css'  href='//fonts.googleapis.com/css?family=Oswald%3A400%2C700%2C400italic%7COpen+Sans%3A400%2C700%2C400italic&subset=greek%2Cgreek-ext&ver=4.0.3' type='text/css' media='all' />
    <link rel='stylesheet' id='fontawesome-css'  href='https://steampunk-reviews.com/wp-content/themes/valenti/library/css/fontawesome/css/font-awesome.min.css?ver=4.3.0' type='text/css' media='all' />

    The mind boggles ??

    Thread Starter andynewby

    (@andynewby)

    Ok, so making a bit of progress!

    I’m not sure why $wp_scripts->queue doesn’t work – but this does:

    global $wp_scripts;
                global $wp_styles;
    
                foreach ($wp_scripts->registered as $val) {
                    echo "BLA: " . $val->handle . " at " . $val->src . " \n";
                }
    
                foreach ($wp_styles->registered as $val) {
                    echo "BLA: " . $val->handle . " at " . $val->src . " \n";
                }

    The weird thing though – is that

    JS: utils at /wp-includes/js/utils.min.js
    JS: common at /wp-admin/js/common.min.js
    JS: wp-a11y at /wp-includes/js/wp-a11y.min.js
    JS: sack at /wp-includes/js/tw-sack.min.js
    JS: quicktags at /wp-includes/js/quicktags.min.js
    JS: colorpicker at /wp-includes/js/colorpicker.min.js
    JS: editor at /wp-admin/js/editor.min.js
    JS: wp-fullscreen at /wp-admin/js/wp-fullscreen.min.js
    JS: wp-ajax-response at /wp-includes/js/wp-ajax-response.min.js
    JS: wp-pointer at /wp-includes/js/wp-pointer.min.js
    JS: autosave at /wp-includes/js/autosave.min.js
    JS: heartbeat at /wp-includes/js/heartbeat.min.js
    JS: wp-auth-check at /wp-includes/js/wp-auth-check.min.js
    JS: wp-lists at /wp-includes/js/wp-lists.min.js
    JS: prototype at //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
    JS: scriptaculous-root at //ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js
    JS: scriptaculous-builder at //ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/builder.js
    JS: scriptaculous-dragdrop at //ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/dragdrop.js
    JS: scriptaculous-effects at //ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/effects.js
    JS: scriptaculous-slider at //ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/slider.js
    JS: scriptaculous-sound at //ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/sound.js
    JS: scriptaculous-controls at //ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/controls.js
    JS: scriptaculous at
    JS: cropper at /wp-includes/js/crop/cropper.js
    JS: jquery at
    JS: jquery-core at /wp-includes/js/jquery/jquery.js
    JS: jquery-migrate at /wp-includes/js/jquery/jquery-migrate.min.js
    JS: jquery-ui-core at /wp-includes/js/jquery/ui/core.min.js
    JS: jquery-effects-core at /wp-includes/js/jquery/ui/effect.min.js
    JS: jquery-effects-blind at /wp-includes/js/jquery/ui/effect-blind.min.js
    JS: jquery-effects-bounce at /wp-includes/js/jquery/ui/effect-bounce.min.js
    JS: jquery-effects-clip at /wp-includes/js/jquery/ui/effect-clip.min.js
    JS: jquery-effects-drop at /wp-includes/js/jquery/ui/effect-drop.min.js
    JS: jquery-effects-explode at /wp-includes/js/jquery/ui/effect-explode.min.js
    JS: jquery-effects-fade at /wp-includes/js/jquery/ui/effect-fade.min.js
    JS: jquery-effects-fold at /wp-includes/js/jquery/ui/effect-fold.min.js
    JS: jquery-effects-highlight at /wp-includes/js/jquery/ui/effect-highlight.min.js
    JS: jquery-effects-puff at /wp-includes/js/jquery/ui/effect-puff.min.js
    JS: jquery-effects-pulsate at /wp-includes/js/jquery/ui/effect-pulsate.min.js
    JS: jquery-effects-scale at /wp-includes/js/jquery/ui/effect-scale.min.js
    JS: jquery-effects-shake at /wp-includes/js/jquery/ui/effect-shake.min.js
    JS: jquery-effects-size at /wp-includes/js/jquery/ui/effect-size.min.js
    JS: jquery-effects-slide at /wp-includes/js/jquery/ui/effect-slide.min.js
    JS: jquery-effects-transfer at /wp-includes/js/jquery/ui/effect-transfer.min.js
    JS: jquery-ui-accordion at /wp-includes/js/jquery/ui/accordion.min.js
    JS: jquery-ui-autocomplete at /wp-includes/js/jquery/ui/autocomplete.min.js
    JS: jquery-ui-button at /wp-includes/js/jquery/ui/button.min.js
    JS: jquery-ui-datepicker at /wp-includes/js/jquery/ui/datepicker.min.js
    JS: jquery-ui-dialog at /wp-includes/js/jquery/ui/dialog.min.js
    JS: jquery-ui-draggable at /wp-includes/js/jquery/ui/draggable.min.js
    JS: jquery-ui-droppable at /wp-includes/js/jquery/ui/droppable.min.js
    JS: jquery-ui-menu at /wp-includes/js/jquery/ui/menu.min.js
    JS: jquery-ui-mouse at /wp-includes/js/jquery/ui/mouse.min.js
    JS: jquery-ui-position at /wp-includes/js/jquery/ui/position.min.js
    JS: jquery-ui-progressbar at /wp-includes/js/jquery/ui/progressbar.min.js
    JS: jquery-ui-resizable at /wp-includes/js/jquery/ui/resizable.min.js
    JS: jquery-ui-selectable at /wp-includes/js/jquery/ui/selectable.min.js
    JS: jquery-ui-selectmenu at /wp-includes/js/jquery/ui/selectmenu.min.js
    JS: jquery-ui-slider at /wp-includes/js/jquery/ui/slider.min.js
    JS: jquery-ui-sortable at /wp-includes/js/jquery/ui/sortable.min.js
    JS: jquery-ui-spinner at /wp-includes/js/jquery/ui/spinner.min.js
    JS: jquery-ui-tabs at /wp-includes/js/jquery/ui/tabs.min.js
    JS: jquery-ui-tooltip at /wp-includes/js/jquery/ui/tooltip.min.js
    JS: jquery-ui-widget at /wp-includes/js/jquery/ui/widget.min.js
    JS: jquery-form at /wp-includes/js/jquery/jquery.form.min.js
    JS: jquery-color at /wp-includes/js/jquery/jquery.color.min.js
    JS: suggest at /wp-includes/js/jquery/suggest.min.js
    JS: schedule at /wp-includes/js/jquery/jquery.schedule.js
    JS: jquery-query at /wp-includes/js/jquery/jquery.query.js
    JS: jquery-serialize-object at /wp-includes/js/jquery/jquery.serialize-object.js
    JS: jquery-hotkeys at /wp-includes/js/jquery/jquery.hotkeys.min.js
    JS: jquery-table-hotkeys at /wp-includes/js/jquery/jquery.table-hotkeys.min.js
    JS: jquery-touch-punch at /wp-includes/js/jquery/jquery.ui.touch-punch.js
    JS: masonry at /wp-includes/js/masonry.min.js
    JS: jquery-masonry at /wp-includes/js/jquery/jquery.masonry.min.js
    JS: thickbox at /wp-includes/js/thickbox/thickbox.js
    JS: jcrop at /wp-includes/js/jcrop/jquery.Jcrop.min.js
    JS: swfobject at /wp-includes/js/swfobject.js
    JS: plupload at /wp-includes/js/plupload/plupload.full.min.js
    JS: plupload-all at
    JS: plupload-html5 at
    JS: plupload-flash at
    JS: plupload-silverlight at
    JS: plupload-html4 at
    JS: plupload-handlers at /wp-includes/js/plupload/handlers.min.js
    JS: wp-plupload at /wp-includes/js/plupload/wp-plupload.min.js
    JS: swfupload at /wp-includes/js/swfupload/swfupload.js
    JS: swfupload-swfobject at /wp-includes/js/swfupload/plugins/swfupload.swfobject.js
    JS: swfupload-queue at /wp-includes/js/swfupload/plugins/swfupload.queue.js
    JS: swfupload-speed at /wp-includes/js/swfupload/plugins/swfupload.speed.js
    JS: swfupload-all at
    JS: swfupload-handlers at /wp-includes/js/swfupload/handlers.min.js
    JS: comment-reply at /wp-includes/js/comment-reply.min.js
    JS: json2 at /wp-includes/js/json2.min.js
    JS: underscore at /wp-includes/js/underscore.min.js
    JS: backbone at /wp-includes/js/backbone.min.js
    JS: wp-util at /wp-includes/js/wp-util.min.js
    JS: wp-backbone at /wp-includes/js/wp-backbone.min.js
    JS: revisions at /wp-admin/js/revisions.min.js
    JS: imgareaselect at /wp-includes/js/imgareaselect/jquery.imgareaselect.min.js
    JS: mediaelement at /wp-includes/js/mediaelement/mediaelement-and-player.min.js
    JS: wp-mediaelement at /wp-includes/js/mediaelement/wp-mediaelement.js
    JS: froogaloop at /wp-includes/js/mediaelement/froogaloop.min.js
    JS: wp-playlist at /wp-includes/js/mediaelement/wp-playlist.js
    JS: zxcvbn-async at /wp-includes/js/zxcvbn-async.min.js
    JS: password-strength-meter at /wp-admin/js/password-strength-meter.min.js
    JS: user-profile at /wp-admin/js/user-profile.min.js
    JS: language-chooser at /wp-admin/js/language-chooser.min.js
    JS: user-suggest at /wp-admin/js/user-suggest.min.js
    JS: admin-bar at /wp-includes/js/admin-bar.min.js
    JS: wplink at /wp-includes/js/wplink.min.js
    JS: wpdialogs at /wp-includes/js/wpdialog.min.js
    JS: word-count at /wp-admin/js/word-count.min.js
    JS: media-upload at /wp-admin/js/media-upload.min.js
    JS: hoverIntent at /wp-includes/js/hoverIntent.min.js
    JS: customize-base at /wp-includes/js/customize-base.min.js
    JS: customize-loader at /wp-includes/js/customize-loader.min.js
    JS: customize-preview at /wp-includes/js/customize-preview.min.js
    JS: customize-models at /wp-includes/js/customize-models.js
    JS: customize-views at /wp-includes/js/customize-views.js
    JS: customize-controls at /wp-admin/js/customize-controls.min.js
    JS: customize-widgets at /wp-admin/js/customize-widgets.min.js
    JS: customize-preview-widgets at /wp-includes/js/customize-preview-widgets.min.js
    JS: accordion at /wp-admin/js/accordion.min.js
    JS: shortcode at /wp-includes/js/shortcode.min.js
    JS: media-models at /wp-includes/js/media-models.min.js
    JS: media-views at /wp-includes/js/media-views.min.js
    JS: media-editor at /wp-includes/js/media-editor.min.js
    JS: media-audiovideo at /wp-includes/js/media-audiovideo.min.js
    JS: mce-view at /wp-includes/js/mce-view.min.js
    JS: login-with-ajax at https://steampunk-reviews.com/wp-content/themes/valenti/plugins/login-with-ajax/login-with-ajax.js
    CSS: colors at 1
    CSS: wp-admin at /wp-admin/css/wp-admin.min.css
    CSS: login at /wp-admin/css/login.min.css
    CSS: install at /wp-admin/css/install.min.css
    CSS: wp-color-picker at /wp-admin/css/color-picker.min.css
    CSS: customize-controls at /wp-admin/css/customize-controls.min.css
    CSS: customize-widgets at /wp-admin/css/customize-widgets.min.css
    CSS: press-this at /wp-admin/css/press-this.min.css
    CSS: ie at /wp-admin/css/ie.min.css
    CSS: buttons at /wp-includes/css/buttons.min.css
    CSS: dashicons at /wp-includes/css/dashicons.min.css
    CSS: open-sans at //fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin,latin-ext
    CSS: admin-bar at /wp-includes/css/admin-bar.min.css
    CSS: wp-auth-check at /wp-includes/css/wp-auth-check.min.css
    CSS: editor-buttons at /wp-includes/css/editor.min.css
    CSS: media-views at /wp-includes/css/media-views.min.css
    CSS: wp-pointer at /wp-includes/css/wp-pointer.min.css
    CSS: imgareaselect at /wp-includes/js/imgareaselect/imgareaselect.css
    CSS: wp-jquery-ui-dialog at /wp-includes/css/jquery-ui-dialog.min.css
    CSS: mediaelement at /wp-includes/js/mediaelement/mediaelementplayer.min.css
    CSS: wp-mediaelement at /wp-includes/js/mediaelement/wp-mediaelement.css
    CSS: thickbox at /wp-includes/js/thickbox/thickbox.css
    CSS: media at /wp-admin/css/deprecated-media.min.css
    CSS: farbtastic at /wp-admin/css/farbtastic.css
    CSS: jcrop at /wp-includes/js/jcrop/jquery.Jcrop.min.css
    CSS: colors-fresh at
    CSS: login-with-ajax at https://steampunk-reviews.com/wp-content/themes/valenti/plugins/login-with-ajax/widget.css
    CSS: grunion.css at https://steampunk-reviews.com/wp-content/plugins/jetpack/modules/contact-form/css/grunion.css

    ..yet I can clearly see it in the HTML:

    <link rel='stylesheet' id='jetpack_css-css' href='https://steampunk-reviews.com/wp-content/plugins/jetpack/css/jetpack.css?ver=3.5.3' type='text/css' media='all' />

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Best way to remove plugins CSS/JS files?’ is closed to new replies.