MP6uccess – Tips and Tricks

Notice: Since WordPress 3.8 came out, you DO NOT need to install MP6 for anything to work. Promise. If you want the extra color schemes, use Admin Color Schemes, but everything else works in core WP.

I like MP6. It’s far, far, far easier for me to read the back end of WordPress with it. It has legible fonts, larger fonts, and best of all, it’s mobile friendly.

The biggest complaint has been that it’s too dark. And I get that, I really do. I personally have trouble seeing white on black (computers only), and white on green (yes, road signs). So for me, the black sidebar was a little heavy, but something I could live with. Then version 2.0 came out and behold, color schemes!

I immediately ran this update, zipped to my profile page (where I knew it had to be), and saw this:

The other options right now are Blue (looks like the old blue), Seaweed, Pixel, and Ectoplasm. Seaweed is my favorite, but I decided to make each site a little different and distinct, so I have Ectoplasm running right now on one site and Seaweed on the other. I can tell right away which is which. My only wish is the toolbar was colorized on both ends.

Tips & Tricks

Okay, okay, I’ll stop selling the plugin, and instead tell you what’s cool to do with it.

Styling Menu Items

The items on your menu sidebar default to some pretty boring icons. Bleah. For years we’ve always uploaded our own images to change things in our plugin and custom post types. Here’s an example for my own code for an old Custom Post Type, because I wanted a custom video icon to show up on my sidebar:

function cptname_post_type_css() {
   echo "<style type='text/css' media='screen'>
           #menu-posts-CPTNAME .wp-menu-image {
                background: url(/path/to/CPTNAME.png) no-repeat 6px -17px !important;
        }
           #menu-posts-CPTNAME:hover .wp-menu-image, #menu-posts-CPTNAME.wp-has-current-submenu .wp-menu-image {
                 background-position: 6px 7px!important;
        }
    </style>"
}
add_action( 'admin_head', 'cptname_post_type_css' );

Now that I’m using MP6, I have access to Dashicons, which already has a video icon included, so I can use this:

function cptname_post_type_css() {
   echo "<style type='text/css' media='screen'>
           .mp6 #adminmenu #menu-posts-CPTNAME .wp-menu-image:before {
                content: '\\f126';
            }
         </style>";
}
add_action('admin_head', 'cptname_post_type_css');

No need for a hover image, because this is a font and not an image, so the hover is automagically taken care of. The result is exactly what I wanted. It looked just like it was built into WordPress from day one, and my co-authors know right where they’re supposed to go to make a new video post.

There are a lot of options to nab from, and there’s a double edged sword to having some ‘standards’ built in. While it’s super easy for me to make a plugin or CPT use what I want, the same goes for other people. I imagine a lot of shopping cart plugins will want to use '\f174' (the shopping cart) if they don’t have their own. Also it means that to ‘match’ you’ll have to use Font Icons yourself, and they’re not super easy to make. Not that everyone worries about matching.

Force a Choice

Okay, what if you want to force a choice for everyone?

add_filter('get_user_option_admin_color', 'change_admin_color');
function change_admin_color($result) {
    return 'ectoplasm';
}

This is the same as it’s always been, actually. But now everyone gets to use purple and green, yay! Keep in mind, this is a hard force. Everyone uses this. There’s no changing. I have this on one site, since the ecotplasm color actually matched the theme. I set it, went away for the weekend, and found the users laughing and loving the perfect match.

Also check out…

I’m sure I’m not the first person do dig out these tricks for MP6. At WordCamp Chicago I remarked that a cool plugin would be “MP6SS” – it would let you pick four colors (similar to the blocks the current MP6 plugin offers), and you could make your own colors on the fly. A little dangerous, but the next option up from that would be a fork of the CSS plugin in Jetpack, which lets you totally customize your MP6 CSS 100%.

Here’s some links I’ve found to more MP6 fun:

• Till Krüss’ MP6 Icon Examples
• Ben Dunkle’s SVG icons
• Jon Masterson’s Font-Awesome MP6
• MP6 Light Plugin

Do you have any tricks? Post links to your code!