Within a wp plugin, I see the following code on the php file of the plugin.
public function register_plugin_scripts() {
/*** Styles ***/
$cyclone_css = add_query_arg(array('cyclone_templates_css' => 1), home_url( '/' ));
wp_register_style( 'cyclone-slider-plugin-styles', $cyclone_css );//contains our combined css from ALL templates
wp_enqueue_style( 'cyclone-slider-plugin-styles' );
/*** Scripts ***/
wp_register_script( 'cycle', $this->plugin_url.'js/jquery.cycle.all.min.js', array('jquery') );
wp_enqueue_script( 'cycle' );
}
Now, I want to alter some of it. Right now, this plugin is used at every single page. Implying both the 1) combined css 2) jquery.cycle.all.min.js is requested each page. However, I only use this plugin for the main page. So how do I fix it, making the css file + js to only be loaded for the main page, nothing else.
Next, I do not want to combine css from all templates. Instead, it should be pinpointed to a selected location. How to do that?. Thanks in advance. Plugin is Cyclone Slider 2.
If you were happy to edit the plugin code directly, it would be a simple matter of making the wp_enqueue_script() calls conditional on being on the home page.
public function register_plugin_scripts() {
/*** Styles ***/
$cyclone_css = add_query_arg(array('cyclone_templates_css' => 1), home_url( '/' ));
wp_register_style( 'cyclone-slider-plugin-styles', $cyclone_css );//contains our combined css from ALL templates
/*** Scripts ***/
wp_register_script( 'cycle', $this->plugin_url.'js/jquery.cycle.all.min.js', array('jquery') );
if (is_front_page()){
wp_enqueue_style( 'cyclone-slider-plugin-styles' );
wp_enqueue_script( 'cycle' );
}
}
However, you almost certainly don't want to edit the plugin, because your changes will get overwritten when the plugin is updated.
I would therefore use wp_dequeue_script and wp_dequeue_style to get stop the scripts loading where you don't want them to.
Per Wordpress Function reference, you could add this code in your theme function.php file or similar:
/**
* Dequeue a queued script.
*
* Hooked to the wp_print_scripts action, with a late priority (100),
* so that it is after the script was enqueued.
*/
function wpcyclone_dequeue_script() {
wp_dequeue_script( 'cycle' );
wp_dequeue_script( 'cyclone-slider-plugin-styles' );
}
if (!is_front_page()){
add_action( 'wp_print_scripts', 'wpcyclone_dequeue_script', 100 );
}
Related
I'm developing my first WordPress plugin. I need to use a custom CSS for the settings pages that I created for the plugin but when I enqueue my stylesheet file, it affects the whole WordPress backend and not just my plugin's settings page.
Is possible to solve this problem? How?
When you want to add styles or scripts in WordPress you enqueue them using hooks. For the admin side the hook you are looking for is called admin_enqueue_scripts.
You can add something like
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style() {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
You just need to be careful to correctly specify the url of the css script you want to enqueue.
Hope this helps.
Oh and https://developer.wordpress.org page is great for finding out about WordPress functionality, core functions, hooks etc.
Also check out the plugin handbook: https://developer.wordpress.org/plugins/
Loads of useful information can be found there :)
EDIT:
admin_enqueue_scripts has a parameter you can use read more
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style( $hook ) {
if ( $hook === 'edit.php' ) {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
This will load the script only on the edit post screen.
You can see what hook is loaded on your screen by adding
error_log( print_r( $hook, true ) );
In your wpdocs_enqueue_custom_admin_style function before the condition. Enable the debug log in your wp-config.php and you'll get a name of your custom post screen hook.
Alternatively, you could target the $current_screen to match the CPT's screen. This will load the script only on that page.
When enqueueing a Wordpress child theme stylesheet the correct way the new styles override the parent's styles.
However, since Divi introduced Builder support for custom post types, a new stylesheet style-cpt.css has been added.
All the styles in this stylesheet (a lot of which unfortunately have !important after them) are declared after enqueued child styles, so will override any matching ones.
Is there any way of overriding such "custom" stylesheets?
The "remove_action(...);" solution no longer works as of Divi version 4.10.6 (Sept '21) as the "et_divi_replace_stylesheet" action was removed.
What I did to solve it was to overwrite line #776 (as of version 4.14.6) from Divi/includes/builder/core.php, so that the function et_builder_should_wrap_styles() always returns false:
function et_builder_should_wrap_styles() {
static $should_wrap = null;
if ( null === $should_wrap ) {
$post_id = get_the_ID();
// Warp on custom post type archives and on non-native custom post types when the builder is used.
$should_wrap = et_builder_is_custom_post_type_archive() || ( et_builder_post_is_of_custom_post_type( $post_id ) && et_pb_is_pagebuilder_used( $post_id ) );
}
// return $should_wrap; /*** ORIGINAL CODE ***/
return false; /*** NEW CODE ***/
}
Then to make sure I don't lose this edit when Divi updates, I set up an action to automatically rewrite this line every time a Divi update occurs:
add_action('upgrader_process_complete', 'edit_files_on_update'), 10, 2);
function edit_files_on_update($upgrader_object, $hook_extra) {
if ($hook_extra['action'] !== 'update') return false;
if ($hook_extra['type'] === 'theme' && isset($hook_extra['themes'])) {
// Divi - disable CPT CSS wrapper
if (array_search('Divi', $hook_extra['themes']) !== false) {
$file_location = get_template_directory().'/includes/builder/core.php';
$file_contents = file_get_contents($file_location);
$file_contents = str_replace('return $should_wrap;', 'return false;', $file_contents);
file_put_contents($file_location, $file_contents);
}
}
}
I know it's technically incorrect to edit a theme's original file, BUT the "correct" alternative is to overwrite the entire Divi/includes/builder/core.php file in my child theme, which is 7253 lines long! Chances are high that future Divi updates would edit that original file, leaving me without those edits reflected in the child theme version.
After some experimentation, I found that the following code in functions.php works... (please note, this will enqueue both the standard theme stylesheet as well as Divi's custom post child theme).
You can include all the styles you want to override in your own style-cpt.css file in your child theme folder.
function my_theme_enqueue_styles() {
$parent_style = 'divi-style';
$template_directory = get_template_directory_uri();
$stylesheet_directory = get_stylesheet_directory_uri();
wp_enqueue_style( $parent_style, $template_directory . '/style.css' );
wp_enqueue_style( 'child-style',
$stylesheet_directory . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
$parent_style = 'divi-cpt-style';
wp_enqueue_style( $parent_style, $template_directory . '/style-cpt.css' );
wp_enqueue_style( 'child-cpt-style',
$stylesheet_directory . '/style-cpt.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
I am using this and is working fine:
function disable_cptdivi(){
remove_action( 'wp_enqueue_scripts', 'et_divi_replace_stylesheet', 99999998 ); } add_action('init', 'disable_cptdivi');
very late to the party but I managed to block the CPT styles from divi by prepending the #page-container selector to my Custom CSS in Theme Options, e.g.:
.header --> #page-container .header
#nav_toggle --> #page-container #nav_toggle
Will override the #et-boc selector
Tested with Divi 6.1.1
I'm currently developing a plugin for wordpress.
My plugin-content gets fired on defined shortcode. I pass a parameter to the shortcode to make some conditionals. I am able to load JS conditionally, but I also need to load CSS conditionally.
Lets say I use the shortcode: [myshortcode css="dark"]
I make a database query and inject the wanted css.
Is this somehow possible?
I have read some threads about it. I know it is because the Code fires after head is loaded. I wasn't able to find a solution.
What options do I have?
Thank you!
Probably you are searching for these functions:
has_shortcode()
get_shortcode_regex() - here you can find nice example, which is close to your request
You can check your post, page or custom post type on hook by add_action ( 'wp', 'yourCustomFunction' ) and test if your get_post_field ( 'post_content' ) contains specified shortcode and conditionally enqueue CSS file based on specified attribute.
There is a better way. You can simply register your css and scripts with wp_enqueue_scripts by wp_register_style or wp_register_script and then enqueue the registered scripts from your shortcode. You will have opportunity to enqueue scripts based on certain condition there.
Here is a code example.
/**
* Register scripts
*/
function my_plugin_scripts() {
wp_register_style( 'dark-css', $css_path );
wp_register_script( 'script-name', $js_path, array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );
/**
* My Shortcode
*/
function my_plugin_shortcode( $atts ) {
$atts = shortcode_atts( array(
'css' => 'default'
), $atts );
if ( $atts['css'] == 'dark') {
wp_enqueue_style('dark-css')
}
// do shortcode actions here
}
add_shortcode( 'shortcode-id','my_plugin_shortcode' );
If I understand your question correctly, you could do something like this to load one stylesheet or the other:
function aw_shortcode_function($atts) {
$a = shortcode_atts( array(
'css' => 'light', // this is the default value
), $atts );
$colorTheme = $a['css'];
if ($colorTheme == 'dark') {
// load/enqueue/get/do whatever based on the css="dark" shortcode attribute
}
}
I've been trying with no success to add a new stylesheet to my template. It's my first time creating a wordpress template. I'm using underscore and this is what I have in functions.php:
style.css is the stylesheet shipped with the template starter.
wp_enqueue_style( 'name-style', get_stylesheet_uri() );
I just want to add foundation-icons.css, foundation.min.css and custom.css. Any help? Thanks.
This is how I do it in all of my templates
/* Enqueue Scripts
-----------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'template_enqueue_scripts' );
function template_enqueue_scripts() {
wp_register_style('Sub-CSS', get_template_directory_uri() .'sub-style.css');
wp_enqueue_style( 'Sub-CSS');
}
This is the best way to my knowledge, like I said, I always do it this way. It works flawlessly, and I have never had a problem doing it this way.
Edit
You will notice that no one else uses wp_register_style, and the wp_register_style is the safest way to setup your style for actual enqueue.
Make sure that you wrap the wp_register_style & wp_enqueue_style in a function.
Try this code :
<?php
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );
/**
* Add stylesheet to the page
*/
function safely_add_stylesheet() {
wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );
}
?>
I am embedding my Jplayer code into my website however there is already jquery within the wordpress installation but when I copy my code across the player is broken as it shows no the volume icon with the x over it. When I include an external jquery script it breaks the entrie site but the player works. Is there any better way for me to include jPlayer into my wordpress site?
The jPlayer script enqueueing has to play by WordPress rules. The easiest (and maybe only) way is with a Shortcode. There are lot of developers, mainly Theme developers, that ignore that we don't dequeue the bundled jQuery version and load any version from some CDN (at least, we don't do it without knowing exactly what we're doing).
Here's a rough test, the shortcode callback function has to be polished a lot.
public function plugin_setup() // hooked into plugins_loaded
{
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
add_shortcode( 'jplayer', array( $this, 'shortcode' ) );
}
public function enqueue()
{
wp_register_script(
'sj-jplayer',
$this->plugin_url . 'js/jquery.jplayer.min.js',
array( 'jquery' ), // <------- Dependencies
false,
true
);
wp_register_style( 'sj-skin', $this->plugin_url . 'skin/blue.monday/jplayer.blue.monday.css' );
wp_enqueue_script( 'sj-jplayer' );
wp_enqueue_style( 'sj-skin' );
}
public function shortcode( $atts, $content )
{
ob_start();
require_once('html-shortcode.php');
$var = ob_get_clean();
return $var;
}
The file html-shortcode is basically this demo code adapted like:
<?php
/*
* Prints the shortcode
*/
?>
<script type="text/javascript">
jQuery(document).ready(function($) // <------ WP noConflict
{
$("#jquery_jplayer_1").jPlayer({});
});
</script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
I tested this jPlayer shortcode inside another that does a jScrollPane, and it worked on the iPad.