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?
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' );
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__ ) );
}
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.
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');
Related
I have a block registered that adds different styles to the editor and front end of a block display.
The editor styles are showing, but I can't get the frontend styles to show.
Here is what I have in my index.php file:
<?php
defined('ABSPATH') || exit;
// add_action engueue_block_editor_assets
add_action( 'enqueue_block_editor_assets', 'block_examples_02_stylesheets_block_enqueue_block_editor_assets');
// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_editor_assets() {
wp_enqueue_script(
// name of script
'block-examples_02-stylesheets-block-editor',
// full url of script location
plugins_url( 'block.build.js', __FILE__ ),
// dependencies of script
array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
// version number
filemtime( plugin_dir_path( __FILE__) . 'block.build.js')
);
wp_enqueue_style(
'block-examples_02-stylesheets-block-editor',
plugins_url( 'editor.css', __FILE__ ),
array('wp-edit-blocks'),
filemtime( plugin_dir_path( __FILE__) . 'editor.css')
);
}
// add_action engueue_block_editor_assets
add_action( 'enqueue_block_assets', 'block_examples_02_stylesheets_block_enqueue_block_assets');
// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_assets() {
wp_enqueue_style(
'block-examples_02-stylesheets-block',
plugins_url( 'style.css', __FILE__ ),
array('wp-blocks'),
filemtime( plugin_dir_path( __FILE__) . 'style.css')
);
}
Ok, so it appears that removing 'wp-blocks' fixes the issue and the block is now reflecting the styling from the style.css file.
// add_action engueue_block_editor_assets
add_action( 'enqueue_block_assets', 'block_examples_02_stylesheets_block_enqueue_block_assets');
// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_assets() {
wp_enqueue_style(
'block-examples_02-stylesheets-block',
plugins_url( 'style.css', __FILE__ ),
array(),
filemtime( plugin_dir_path( __FILE__) . 'style.css')
);
}
Php Code Before
if($options['videojs_cdn'] == 'on') { //use the cdn hosted version
wp_register_style( 'videojs', plugins_url('jw/video-js.css' , __FILE__ ) );
wp_register_script( 'videojs', plugins_url( 'jw/video.min.js' , __FILE__ ) );
Now I have add jw/jwplayer.css, resume/dist/videojs-resume.min.css and dist/videojs-resume.min.jsbut none of the ones I added did work! This is a WordPress Plugin? how i can fix this?
if($options['videojs_cdn'] == 'on') { //use the cdn hosted version
wp_register_style( 'videojs', plugins_url('jw/video-js.css' , __FILE__ ) );
wp_register_style( 'videojs', plugins_url( 'jw/jwplayer.css' , __FILE__ ) );
wp_enqueue_style( 'videojs' );
wp_register_style( 'videojs', plugins_url( 'resume/dist/videojs-resume.min.css' , __FILE__ ) );
wp_enqueue_style( 'videojs' );
wp_register_script( 'videojs', plugins_url( 'jw/video.min.js' , __FILE__ ) );
wp_register_script( 'videojs', plugins_url( 'dist/videojs-resume.min.js' , __FILE__ ) );
You have conflicting handles, each file you register or enqueue with wp_enqueue_style() and wp_enqueue_script() needs its own handle.
As an aside, you don't need to register and then enqueue unless you're using more advanced functionality, typically for simple CSS and JS loading, you can replace all the register functions with enqueue as long as they have unique handles.
wp_enqueue_style( 'videojs', plugins_url('jw/video-js.css' , __FILE__ ) );
wp_enqueue_style( 'jwplayer', plugins_url( 'jw/jwplayer.css' , __FILE__ ) );
wp_enqueue_style( 'videojs-resume', plugins_url( 'resume/dist/videojs-resume.min.css' , __FILE__ ) );
wp_enqueue_script( 'videojs', plugins_url( 'jw/video.min.js' , __FILE__ ) );
wp_enqueue_script( 'videojs-resume', plugins_url( 'dist/videojs-resume.min.js' , __FILE__ ) );
I created two plugins for Wordpress. Both plugins have different scripts and stylesheets. To load this scripts I use this method:
class load_scripts{
function register_market(){
add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_market') );
}
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
}
if( class_exists( 'load_scripts')){
$load_scripts = new load_scripts();
$load_scripts->register_market();
}
Of course I used different function and class names.
Now the problem is if both plugins are activated the scripts are loaded from only one plugin.
I tried to do this, but does not work:
add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_market'), 0 );
What can I do to solve this conflict?
Your issue lies on these two lines:
wp_enqueue_style( 'pluginstyle', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript', plugins_url( '/assets/backend-script.js', __FILE__ ) );
Namely, you probably have 'pluginstyle' and 'pluginscript' as the handles in both your plugins. The $handle parameter should be unique in accordance with the wp_enqueue_style() and wp_enqueue_script() function references. For example:
Plugin 1:
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle-1', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript-1', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
Plugin 2:
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle-2', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript-2', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
I have a wordpress local installation and I am trying to load scripts and styles with wp_enqueue but none of these are working, the front-end is not capturing any of the files,
Here is the code:
<?php
function all_the_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css' );
wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/css/custom.css' );
wp_enqueue_script( 'bootstrap.bundle', get_template_directory_uri() . '/assets/js/bootstrap.bundle.js' , array ( 'jquery' ) );
wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/assets/js/custom-scripts.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'all_the_scripts' );
?>
I have double checked everything, all the files are in the correct locations and all required arguments are given, but still no result.
I tried wp_register_script but they say that it is optional and not needed
Use
get_stylesheet_directory_uri()
instead of
get_template_directory_uri()
The get_template_directory_uri() reference to the parent theme if you're developing Child Themes, and get_stylesheet_directory_uri() returns the URI of the current theme.
I'm trying to develop a wordpress theme from scratch, but I have som problem with function.php. I want to add additional style scripts like bootstrap and animate.css, but the thing is that they are not loading with the "package" and when I check the links I get style.css before my css folder. If I remove style.css I can se my file in my browser. How do I solve this problem? To remove style.css from the links.
http://localhost/humlan/wp-content/themes/humlan/style.css/css/bootstrap.min.css?ver=3.0.3'
THIS IS CODE IN FUNCTION.PHP
/**
* Enqueue scripts and styles.
*/
function humlan_scripts() {
wp_enqueue_style( 'bootstrap.min', get_stylesheet_uri() . '/css/bootstrap.min.css',false,'3.0.3','all');
wp_enqueue_style( 'prettyPhoto', get_stylesheet_uri() . '/css/prettyPhoto.css',false,'1.1','all');
wp_enqueue_style( 'font-awesome.min', get_stylesheet_uri() . '/css/font-awesome.min.css',false,'1.1','all');
wp_enqueue_style( 'animate', get_stylesheet_uri() . '/css/animate.css',false,'1.1','all');
wp_enqueue_style( 'main', get_stylesheet_uri() . '/css/main.css',false,'1.1','all');
wp_enqueue_style( 'responsive', get_stylesheet_uri() . '/css/responsive.css',false,'1.1','all');
wp_enqueue_style( 'humlan-style', get_stylesheet_uri() );
wp_enqueue_script( 'humlan-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'humlan-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'humlan_scripts' );
Try This
function load_styles(){
wp_enqueue_script( 'jQuery-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js');
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '3.3.7', true );
}
Instead of loading css from your server, use CDN links that are comparatively faster...
Use get_stylesheet_directory_uri() - as that returns the folder of your stylesheet. What you're using returns the URI of the actual stylesheet.