1

WordPress core ships css files in both source and minified form. E.g. wp-includes/css/admin-bar.css and wp-includes/css/admin-bar.min.css. Does anyone know exactly what tool they use to do the minification? I just tried using the web-based tool at cssminifier.com on the admin-bar.css file in core 4.4.2, and it produces different output from the admin-bar.min.css file that ships with 4.4.2. I want to make some changes to the css, and I first want to verify that I can minify the source the same way that WordPress did it, before making changes to the source and then minifying the result.

Please no comments about not changing core files. I know all about it, and have been maintaining a small number of core file changes in git since version 3.7 up through version 4.4.2 (in addition to a large number of filters and actions). I have a strong preference to customize "the right way", but sometimes it's not feasible :-)

  • 1
    "Please no comments about not changing core files." - you've come to the wrong place then. You should NOT be editing core files. Customizing "the right way" is always feasible, if you think it's not, you're just doing it wrong. So tell us what you are trying to do exactly and we'll show you the right way to go about it. By the way, WordPress ships minified files as opposed to including their minification tools in core. There are numerous PHP libraries that will help you minify JS/CSS even HTML, or you can use tools such as Gulp or Grunt if you use those in your workflow. – Adam Feb 22 '16 at 3:17
  • @userabuser Okay, maybe I came to the wrong place, but I'll bite. What I want to do is replace the W logo everywhere on admin pages that currently display it using a dashicon in a ::before pseudo-element with content \f120. I have tried dashboard customization plugins, they only do it partially, not what I want. I thought it simplest to see how it looks just to edit the css, and once happy with the appearance then consider writing some javascript to do it (which is what the plugins do). Of course targeting pseudo-elements is a problem in itself. – sootsnoot Feb 22 '16 at 3:35
  • @userabuser As stated in the post, I wanted to use the same tool that core uses - I know there are lots of libraries and online tools to minify, I just wanted to get the same result as core gets. Not a big deal, if you don't know, or if you do and they're not available, that's okay. Saying that core ships minified files doesn't add any information. – sootsnoot Feb 22 '16 at 3:39
  • My comment, albeit not an asnwer provides plenty of information. No one here is going to go out of there way to show you how to hack core files like you want because of the ensuing downvote avalanche that'll soon follow. Instead people here, very knowledgeable and helpful, will show you the right way to do things... So don't jump the gun just yet... mate. – Adam Feb 22 '16 at 3:56
  • Not jumping the gun. My second paragraph was intended to decouple this from "asking how to hack core files". I just wanted to know the specific tool used in creating the minified files shipped in core for verification purposes while running some "what if" experiments. I'd be delighted to learn a better/right way to produce the result I'm looking for once I've prototyped it. BTW, nice username - seems apropos :-) – sootsnoot Feb 22 '16 at 4:08
2

Before:

enter image description here

add_action('admin_head', function(){

?>

    <style type="text/css">

    #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
        content: "LOL";
        top: 2px;
    }   

    </style>

<?php 

});

After:

enter image description here

You may also use admin_enqueue_scripts action hook:

function my_enqueue($hook) {

    wp_enqueue_style( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'my-style.css' );
}

add_action( 'admin_enqueue_scripts', 'my_enqueue' );

See:

...didn't even have to hack a core file.

That should get you on your way.

Regarding your comment about "My Sites" for multi-site:

enter image description here

What did I change?

#wpadminbar .quicklinks li .blavatar::before {
    content: "??";
    display: inline-block;
    height: 16px;
    margin: 6px 8px 0 -2px;
    width: 16px;
}

All you need to do is inspect the DOM using Chrome Dev tools or Firebug/Web Inspector in Firefox depending on your preferred method, find the selectors responsible and modify to suit your needs.

You would add the above snippet to the example showed earlier.

| improve this answer | |
  • Comment/answer collision. This looks great - since the plugins used javascript to change styles, I didn't think to look at using regular hooks to emit css that would override. This approach is indeed simpler/better than editing the css directly, even for prototyping (assuming it works, which I'd think it would). Thanks very much! What this doesn't address is changing the icon on the drop-down menu of "my sites". I'll have to do some digging to find hooks for that, but I'll trust they exist :-) – sootsnoot Feb 22 '16 at 4:19
  • Can you elaborate more on "doesn't address is changing the icon on the drop-down menu of my sites" ...realistically we should be able to target everything you want to just by using the aformentioned hooks via CSS (before even needing to resort to JS which by the way can be enqueued on the same hooks or injected inline). If you can show more specifically what else or if you have trouble targeting other elements, then elaborate on those and we'll give a shot. This methodology will save you a lot of headache and you won't lose your changes when core updates. – Adam Feb 22 '16 at 4:23
  • Yes, I was thinking exactly that after I entered my reply. The trick isn't finding a hook, but finding the css selectors to use. I was thinking that by editing the \f120 content values in core, that would get everything. But given that I've found the \f120 values in the core css anyway, the selectors are right there, so this technique should work just as well. Thanks again, I'll mark this as the accepted answer. Extremely helpful! – sootsnoot Feb 22 '16 at 4:29
  • No worries, see my edit above anyway which targets multisite dropdown logos. – Adam Feb 22 '16 at 4:32
  • Okay, since you've been so helpful, now I have to push my luck... I typically use both Chrome developer tools or firebug exactly as you suggest to find the css selectors. But for things like the javascript drop-down menu of sites on multi-site, I can't find them in the DOM. I was pretty sure that at one time I could hover on them in the main window and they would show up in the dev tools window, but I don't see that anymore. Is there a trick to finding the style on hidden elements? – sootsnoot Feb 22 '16 at 4:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.