Wordpress: Unique Custom Plugin CSS

Question

I would like to add custom CSS for several WordPress plugins I have in development. After some Googling around, I managed to find this bit of code:

function namespace_custom_style() {
    wp_register_style('namespace', plugins_url('namespace/style/style.css'));
    wp_enqueue_style('namespace');
}
add_action('init', 'namespace_custom_style');

The issue with this, however, is that the styling made in this included file is used across the entire WordPress backoffice, whereas I would like unique styling per plugin. For example:

For Plugin A I would like to have the meta-box be placed below the publish box, as it only has minor extra fields.
For Plugin B this would not make sense, as this plugin allows users to select custom styling, such as the position of a child-element, colours, etc. As such, I would like to keep it below the MCE to make better use of the wider space.

I am aware that there exists an element with the ID [plugin_name]_meta that I can style to my hearts-content, so if the above is not an option I can do some hocus-pocus on that.

So in short: Is it possible to give simple WordPress plugins their own unique look-and-feel, and how?

If it's necessary for me to provide extra information, do not hesitate to ask.

Maybe. "Plugin A" and "Plugin B" are specific plugins, authored by people who may have written them in very different ways. We'd need to know specifically which plugin (please ask only ONE at a time, per SO guidelines on How to Ask), and specifically where you want the styles applied (front end, back end, specific page / metabox, etc). Details matter! — random_user_name
– random_user_name, Commented Dec 3, 2018 at 23:21
Also, if you DO enqueue styles, please know two things: 1. Do it on the wp_enqueue_scripts hook (not the init hook), and 2. You can do the whole thing in wp_enqueue_style(...) (you don't need to register on one line, then enqueue on another. wp_enqueue_style supports the same arguments as wp_register_style, and also enqueues the style. — random_user_name
– random_user_name, Commented Dec 3, 2018 at 23:22
check this topic, hope it helps you - stackoverflow.com/questions/46320928/… — Angel Deykov
– Angel Deykov, Commented Dec 4, 2018 at 7:21
@cale_b My apologies. I should have been specific that the styling should only be applied to the backoffice. Also, the plugins are not public yet, as they are still in development on my local machine, hence I could not provide the name of the plugins. — Zubaja
– Zubaja, Commented Dec 4, 2018 at 7:25
@AngelDeykov thank you! The code in that thread worked -I can't believe I never found that topic, even after x-hours of Googling. — Zubaja
– Zubaja, Commented Dec 4, 2018 at 7:50

Zubaja · Accepted Answer · 2018-12-04 07:53:33Z

1

Thanks go out to Angel Deykov who pointed me to the right topic here on StackOverflow (Wordpress: Load custom CSS for specific plugin admin Page)

I have updated my code like so:

add_action('admin_enqueue_scripts', 'register_bonwaysbe_css_js');
function register_bonwaysbe_css_js($hook)
{
    $current_screen = get_current_screen();
    $screenId = $current_screen->id;

    if ($screenId !== 'bonway-static-block') {
        return;
    } else {
        wp_enqueue_style('bonwaysbe_style', plugins_url('style/style.css',__FILE__ ));
    }
}

Granted, the example provided used strpos to compare the ID and name, but for some reason that always returned false for me, hence the !==.

answered Dec 4, 2018 at 7:53

Zubaja

2615 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Wordpress: Unique Custom Plugin CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related