CODEWITHSUNDEEP
phpwordpress
anurag
anurag

Reputation: 2246

Include Multiple Stylesheets in Wordpress Plugin

I am creating a wordpress plugin, where I need to include multiple stylesheets and JS files.

I have used the following code,

1. TRIAL 1- Including styles and scripts together

define( 'DELTA__PLUGIN_URL', plugin_dir_url( __FILE__ ) );

add_action('wp_enqueue_scripts', 'imwi_scripts'); 
    function imwi_scripts() {

        wp_register_style( 'delta-styles', DELTA__PLUGIN_URL . "css/style.css" );
        wp_register_style( 'delta-styles', DELTA__PLUGIN_URL . "css/jquery.dataTables.css" );
        wp_register_style( 'delta-styles', DELTA__PLUGIN_URL . "css/font-awesome.min.css" );

        wp_register_script( 'delta-scripts', plugins_url('/js/jquery.dataTables.js', __FILE__) , array('jquery'), true );

        wp_enqueue_style( 'delta-styles' );
        wp_enqueue_script( 'delta-scripts' );
    }

2. TRIAL 2-Including scripts and styles seperately

define( 'DELTA__PLUGIN_URL', plugin_dir_url( __FILE__ ) );

//EN-QUEUING JAVASCRIPTS
add_action('wp_enqueue_scripts', 'imwi_scripts'); 
    function imwi_scripts() {

        wp_register_script( 'delta-scripts', plugins_url('/js/jquery.dataTables.js', __FILE__) , array('jquery'), true );

        wp_enqueue_script( 'delta-scripts' );
    }

//EN-QUEUING STYLES
add_action("wp_enqueue_scripts", "imwi_styles");
    function imwi_styles() {
        wp_register_style( 'delta-styles', DELTA__PLUGIN_URL . "css/style.css" );
        wp_register_style( 'delta-styles', DELTA__PLUGIN_URL . "css/jquery.dataTables.css" );
        wp_register_style( 'delta-styles', DELTA__PLUGIN_URL . "css/font-awesome.min.css" );

        wp_enqueue_style( 'delta-styles' );
    }

RESULT 1. jquery.dataTables.js and style.css is getting enqueued in the page successfully.

PROBLEM:

  1. jquery.dataTables.css and font-awesome.min.css didnot get included.

  2. I want to keep my styles seperate, so I can't import my stylesheets into a single stylesheet (say delta.css) and en-queue the delta.css through wp_enqueue_style().

  3. Use of CDN is not possible, because [WordPress.org Plugins] mailed back with this response Offloading images, js, css, cgi, and other scripts to Google (or jquery.com or anywhere else frankly) is disallowed because you're introducing an unnecessary dependency on another site.

QUESTION: Is it possible to include all the scripts and styles without creating multiple functions per stylesheet and script?

Thank you for helping..

Upvotes: 1

Views: 187

Answers (1)

schoeffman
schoeffman

Reputation: 486

Yes, it is possible. You need to have a different name for each script using wp_register_style

From the codex on this topic :

<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>

$handle (string) (required) Name of the stylesheet (which should be unique as it is used to identify the script in the whole system). Default: None

So, instead of calling all three (from example 1) delta-styles , call them

  1. delta-styles
  2. delta-styles-jquery
  3. delta-styles-font-awesome

Then wp_enqueue_style all three so: 

wp_enqueue_script( 'delta-scripts' );
wp_enqueue_script( 'delta-scripts-jquery' );
wp_enqueue_script( 'delta-scripts-font-awesome' );

Upvotes: 3

Related Questions