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();
}
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 want the modified child theme site-banner1.css stylesheet to load after the parent theme so it overwrites the parent file with the changes. I am using the enqueue array() to try and push site-banner1.css to the end of the queue by inputting the last style id (CSS from a plugin) into the array function. Here is the code from functions.php:
<?php
if ( !defined( 'ABSPATH' ) ) exit;
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit(
get_template_directory_uri() ) . 'style.css', array( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
function my_theme_enqueue_styles() {
$parent_style = 'tesseract-site-banner';
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/css/site-banner.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/site-banner1.css',
array( $parent_style, 'tt-easy-google-font-styles')
); }
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles',99999 );
Currently site-banner1.css is visible in the source code but it is not the last stylesheet to load and so the changes are not visible. The parent site-banner.css is still visible in the dev tools with the styles. By adding the last CSS id into the array can I force site-banner1.css to load after it, I think code is missing from the array but not sure what? If this is incorrect what is the way to force the sheet to load at the end of the queue?
I managed to fix the problem using wp_deregister_style:
<?php
if ( !defined( 'ABSPATH' ) ) exit;
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit(
get_template_directory_uri() ) . 'style.css', array( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
add_action( 'wp_enqueue_scripts', 'load_alta_styles', 200 );
function load_alta_styles() {
wp_dequeue_style( 'tesseract-site-banner' );
wp_deregister_style( 'tesseract-site-banner' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() .
'/site-banner1.css' );
}
I have been trying to include Gridster into my WordPress Backend but it simply doesn't work. The frontend works fine, but I can't figure out why, because the files are actually in the following directories.
First way I tried it:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__ ), array('jquery') );
wp_enqueue_script( "gridster-script-extra", plugins_url( '/js/jquery.gridster.with-extras.min.js', __FILE__ ), array('gridster-script'), true );
wp_enqueue_script( "gridster-script-custom", plugins_url( '/js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
}
Second one:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('gridster-script', plugin_dir_url(__FILE__) . '/js/jquery.gridster.min.js', array('jquery') );
wp_enqueue_script('gridster-script-extra', plugin_dir_url(__FILE__) . '/js/jquery.gridster.with-extras.min.js', array('gridster-script') );
wp_enqueue_script('gridster-script-custom', plugin_dir_url(__FILE__) . '/js/gridster.js', array('jquery') );
}
Third and last one:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script( 'gridster-script', get_template_directory_uri() . '/js/jquery.gridster.min.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'gridster-script-extra', get_template_directory_uri() . '/js/jquery.gridster.with-extras.min.js', array('gridster-script'), '1.0.0', true );
wp_enqueue_script( 'gridster-script-custom', get_template_directory_uri() . '/js/gridster.js', array('jquery'), '1.0.0', true );
}
You can't randomly use plugin url functions, and need to choose the correct one for your use case. Assuming __FILE__ is correctly referring to the main plugin file, you'll need to hook that function into the admin_enqueue_scripts action hook:
function add_my_scripts() {
wp_enqueue_script( "gridster-script", plugins_url( 'js/jquery.gridster.min.js', __FILE__ ), array('jquery') );
wp_enqueue_script( "gridster-script-extra", plugins_url( 'js/jquery.gridster.with-extras.min.js', __FILE__ ), array('gridster-script'), true );
wp_enqueue_script( "gridster-script-custom", plugins_url( 'js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'add_my_scripts' );
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');