wp_enqueue_style for Plugin with multiple stylesheets

10 Views

I’m making a navigation plugin which adds animations to your wordpress navigation.

I read in WordPress Codex that I would need to use wp_enqueue_style().

Read More

First, How do I use this code for multiple css files?
in my main plugin file.

Now according to this question, I would add stylesheets like this: 

function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet');

Since my plugin requires multiple stylesheets to be added, which of the two codes should I use? 

function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet');

function add_my_stylesheet1() 
{
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet1');

Or 

function add_my_stylesheet1() 
{
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS.css', __FILE__ ) );
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet1');

Now I know where to add this code. But how do I call the stylesheet I want to use?

Also, just to clear what my plug would do:
The main plugin file would only load the stylesheet required.
And the options page would allow the user to select which of the stylesheet to require.

for example, in php format I would use the following: 

<link href="nav-<?php echo $name; ?>.css">

The $name should be the one selected from the options page, but how do I call in the required stylesheet?

I hope my question is clear enough.

Post Views: 10

Related posts

3 comments

  1. To answer your first question, you would use the second style, i.e.

    function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet');

    What the add_action() function does is tell WordPress, “When the admin_print_styles action occurs, run this add_my_stylesheet() function.” Confusingly, the practice of using the admin_print_styles and admin_enqueue_styles actions to enqueue stylesheets is incorrect – as counter-intuitive as it is, you should use admin_enqueue_scripts instead.

    The calls to wp_enqueue_style() then add the specified stylesheets to a list of stylesheets that will be loaded (if you specify the dependencies argument, then WordPress will also take care of making sure that your stylesheets load in the correct order). You don’t need to “call” an enqueued stylesheet as you suggested – if it is enqueued, then it will be printed out in an HTML <link ...> element in the <head></head> section in the same manner that WordPress loads it’s own stylesheets.

    In order to select which stylesheet will be loaded, you simply add your logic to your add_my_stylesheet() function; if you don’t wish for a stylesheet to be used, then you don’t enqueue it, i.e.:

    function admincolorplugin_enqueue_styles() 
{
    // Get the user's stylesheet choice from the options, default to "white"
    $stylesheet = get_option( 'admincolorplugin_stylesheet', 'white' );

    // Conditionally load the appropriate stylesheet
    if( $stylesheet == 'black' ) {
        wp_enqueue_style( 'admincolorplugin-black', plugins_url( '/css/black.css', __FILE__ ) );
    }
    else {
        wp_enqueue_style( 'admincolorplugin-white', plugins_url( '/css/white.css', __FILE__ ) );
    }
}

add_action('admin_enqueue_scripts', 'admincolorplugin_enqueue_styles' );

  2. Use an if to check if it conforms to your criteria, for example

    1. a specific page/post (id)
    2. all pages/post
    3. related to the admin option.

    That way it’ll only pull the CSS that you want on the desired page / when the desired admin option is selected.

        function add_my_stylesheet1() 
    {
        if(is_page(41)){
            wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS.css', __FILE__ ) );
        }else{
            wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
        }
    }

    Or:

        function add_my_stylesheet1() 
    {
        $adminopt = get_option( $option, $default );
        if($adminopt == "Normal CSS"){
            wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
        }else{
            wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
        }
    }

  3. add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );

/** * Add stylesheet to the page*/
function safely_add_stylesheet_to_admin() {
    wp_enqueue_style( 'prefix-style', plugins_url('plugin_styles.css', __FILE__) );
    wp_enqueue_style( 'prefix-basic', plugins_url('/css/basic.css', __FILE__) );

}

Comments are closed.