CODEWITHSUNDEEP
phpwordpress
fightstarr20
fightstarr20

Reputation: 12568

Wordpress load a stylesheet through plugin

I have written a WordPress plugin and want to make it include some css stylesheets, I have tried to use the process I usually use in a themes functions.php file...

add_action('wp_enqueue_script','register_my_scripts');

function register_my_scripts(){
    $dir = plugin_dir_path( __FILE__ );
    wp_enqueue_style( $dir . 'css/style1.css');
    wp_enqueue_style( $dir . 'css/style2.css');
}

But this is not loading anything, what am I doing wrong?

Upvotes: 24

Views: 34217

Answers (4)

Rahil Wazir
Rahil Wazir

Reputation: 10132

You are using plugin_dir_path which outputs filesystem directory path. Instead you need URL.

Also the first parameter of wp_enqueue_style is $handler name.

Use plugins_url

wp_enqueue_style( 'style1', plugins_url( 'css/style1.css' , __FILE__ ) );

Full code:

add_action('wp_enqueue_scripts','register_my_scripts');

function register_my_scripts(){
    wp_enqueue_style( 'style1', plugins_url( 'css/style1.css' , __FILE__ ) );
    wp_enqueue_style( 'style2', plugins_url( 'css/style2.css' , __FILE__ ) );
}

Upvotes: 9

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

Load styles from wp plugin folder using plugin url

function add_plugin_stylesheet() 
    {
      wp_enqueue_style( 'style1', plugins_url( '/css/styleFileName1.css', __FILE__ ) );
      wp_enqueue_style( 'style2', plugins_url( '/css/styleFileName2.css', __FILE__ ) );
    }

    add_action('admin_print_styles', 'add_plugin_stylesheet');

Upvotes: 0

Obmerk Kronen
Obmerk Kronen

Reputation: 15949

try :

wp_enqueue_style('custom-style', plugins_url( '/css/my-style.css', __FILE__ ), array(),'all'); where plugins_url is relative to plugin base without slash.

Upvotes: 2

Nathan Dawson
Nathan Dawson

Reputation: 19308

The hook you need to use is wp_enqueue_scripts, you were missing the 's'.

You're getting the directory path when what you need is the directory URL.

wp_enqueue_style's first parameter is a handle and not the URL.

function wpse_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'style1', $plugin_url . 'css/style1.css' );
    wp_enqueue_style( 'style2', $plugin_url . 'css/style2.css' );
}
add_action( 'wp_enqueue_scripts', 'wpse_load_plugin_css' );

Upvotes: 41

Related Questions