How can I target WordPress 3.8 new interface MP6 with CSS?

1 Views

When MP6 was a plugin in WordPress 3.6+ it changes the body class of the admin and added an “admin-mp6” class which helps me to style my plugin accordingly.

Now with the latest Alpha of WordPress 3.8 the class was removed. I know since it’s an alpha version the class may come back but I wonder if there are any official “best practices”

Post Views: 1

Related posts

3 comments

  1. While it’s not specific to MP6 (I am not following its development) and its CSS, to me your question sounds like “how to check that WP version is equal to greater than one some feature was introduced in?”.

    So I would just examine content of $wp_version global. If it’s 3.8 feature then anything with fitting version has it.

    Also from quick look at body classes in admin there is branch-3-7 class, which makes possible to target branch-3-8 (however cannot be targeted conditionally as anything >=3.8 since that’s not something CSS does).

  2. I also prefer a CSS-only variant. Unfortunately, that’s not entirely possible. The route I’m taking is a hybrid of CSS and PHP.

    First, we use PHP to detect the version of WordPress installed and, optionally, whether or not MP6 is installed. This is fairly easy using the MP6 constant defined by the plugin and the $wp_version global as suggested by Rarst. Once we know we’re living in an MP6 world, we add our own body class. I’m choosing to use the class name “flaticons”:

    /**
 * Filter body classes to detect MP6 or WordPress 3.8 so we can substitute the correct styles.
 *
 * @param array $classes
 *
 * @global $wp_version
 *
 * @return array
 */
function flaticons_body_class( $classes ) {
    global $wp_version;

    if ( ( defined( 'MP6' ) && MP6 ) || version_compare( $wp_version, '3.8', '>=' ) ) {
        $classes[] = 'flaticons';
    }

    return $classes;
}

    Now, in our CSS wherever we were previously using the .admin-mp6, .admin-color-mp6, or .mp6 selectors, we can use .flaticons instead.

    This will work both with MP6 on older installs and WordPress 3.8+ once it’s released. Not optimal, but a solid, future-proof solution.

  3. Andrew Nacin posted some “offical” approach to this topic here

    The CSS only variant should use the branch-3-x class to target the versions before 3.8 and the defaults should get applied to all upcoming versions so you don’t have to care about further version: 

    .branch-3-6 .some-selector,
.branch-3-7 .some-selector {
     /* some rules go here for 3.6 and 3.7 */
}
.some-selector {
     /* 3.8+ rules go here */
}

    Read more about this topic on the make.wordpress.org page

Comments are closed.