How do I register a stylesheet inside a WordPress widget? - css

I'm developing a WordPress widget following Dave Clements tutorial. It works well. Now I want to add some styles to it. I want the styles to be in an extra css file which will be loaded during runtime. I'm calling this function
function myprefix_add_my_stylesheet() {
wp_register_style( 'myprefix-style', plugins_url('mystyle.css', __FILE__) );
wp_enqueue_style( 'myprefix-style' );
}
right before "// Widget output //" using this statement.
add_action( 'wp_enqueue_scripts', 'myprefix_add_my_stylesheet' );
But nothing seems to happen. What am I doing wrong?

Your wp_enqueue_scripts action do not work because you call it too late, in widget() function (widget output). It's too late because Wordpress already print/send head of page.
For example, you can add this action on widget construct function.

Related

Wordpress Child Theme Enqueue and Dequeue and Localize

I am trying to enqueue an edited js file from my child theme and dequeue the original one from the parent. It should be simple, however, the parent theme is calling a function where all enqueues are made. I managed to enqueue it but not to dequeue. In addition, the original enqueue is followed by wp_localize_script() function.
If I copy the whole function to my child it works, but I am looking for a cleaner and better way to achieve that.
Here is how the original code is set up (Parent Theme):
In function.php this function is called
add_action('wp_enqueue_scripts', 'wpestate_scripts');
The wpestate_scripts function is found in another file, css_js_include.php
function wpestate_scripts() {
// A bunch of files being enqueued and some variables being assigned
wp_enqueue_script('wpestate_property', trailingslashit( get_stylesheet_directory_uri() ).'js/property.js',array('jquery','wpestate_control'), '1.0', true);
wp_localize_script('wpestate_property', 'property_vars',
array(
// Variables being localized
)
);
}
I have already added wp_dequeue_script('wpestate_property') and wp_deregister_script('wpestate_property') to my child function.php. And it did not work.
Any help is appreciated.
You need to make sure the function you're calling is fired after the script is enqueued by the parent. Typically this is done by adding a high integer value to the $priority argument for add_action().
add_action( 'wp_enqueue_scripts', 'modify_wpestate_scripts', 99 );
function modify_wpestate_scripts() {
wp_dequeue_script('wpestate_property');
// Enqueue your custom script instead
wp_enqueue_script( 'custom-wpestate_property', 'custom-wpep.js', [], '1.0', true );
wp_localize_script('custom-wpestate_property', 'property_vars',
array(
// Variables being localized
)
);
}
This adds it to the same action hook (wp_enqueue_scripts) as the parent function, but the priorty is set to 99 so it runs later (the default priority is 10).

WP load scripts if template has shortcode

I have a plugin, it has many css theme files. Of course I do not want to load all of them, only one. It depends on config. For post I use has_shortcode function, but how todo the same thing with template that use do_shortcode function.
Note:
I found a good solution, I use
$this->loader->add_action( 'init', $plugin_public, 'register_scripts');
$this->loader->add_action( 'wp_footer', $plugin_public, 'print_scripts');
Inside shortcode handle I set a global var to true
global $imagelink_plugin_shortcode_used;
$imagelink_plugin_shortcode_used = true;
The function print_scripts add my scripts if my global var is true
public function print_scripts() {
global $imagelink_plugin_shortcode_used;
if ( ! $imagelink_plugin_shortcode_used )
return;
wp_print_scripts($this->plugin_name . '-imagelinks');
}
Thanks for answers.
Instead of using has_shortcode function, what you can do is register and enqueue those files when that shortcode is rendered.
First, register your css files with wp_register_script. Make sure to hook this into wp_enqueue_scripts
Now, inside your shortcode function, enqueue the files.
wp_enqueue_style('theme-css')
Using this way you can use the shortcode anywhere you want and the script is loaded only when shortcode is present on the page whether it is on content or template.

Wordpress, dokan errors to upload banner

I had errors when uploading banners and photos, I know I must put this code in the child theme to repair it, but I'm using the handy store theme for my store and I have not created any child theme.
Can someone explain me where I should place the code to fix the error?
my code:
function mgt_dequeue_stylesandscripts() {
if ( class_exists( 'woocommerce' ) ) {
wp_dequeue_style( 'select2' );
wp_deregister_style( 'select2' );
wp_dequeue_script( 'select2');
wp_deregister_script('select2');
} }
Should I put the code in the file 'function' of the theme 'handy store'? or one of dokan?
The best is to put your function in functions.php, but it will never work without a triggered action.
With your code you will need to add something like this :
add_action('wp_enqueue_scripts', mgt_dequeue_stylesandscripts, 99);
The last parameter (99) is the priority, the action will trigger later with higher number.

Unregister WordPress plugin widget from theme

Question about WordPress theme - plugins interaction.
Can i unregister widget that was added by plugin using theme functions.php file?
Tried to unregister it using sample code, but it didn't work for me:
function remove_some_widget() {
unregister_widget('some_plugin_widget');
}
add_action( 'widgets_init', 'remove_some_widget' );
The parameter to pass in unregister_widget function is the name of a class that extends, so, pass the appropriate class name. Here is an example of unregister_widget to Unregister all widgets
function unregister_default_widgets() {
unregister_widget('WP_Widget_Pages');
unregister_widget('WP_Widget_Calendar');
unregister_widget('WP_Widget_Archives');
unregister_widget('WP_Widget_Links');
unregister_widget('WP_Widget_Meta');
unregister_widget('WP_Widget_Search');
unregister_widget('WP_Widget_Text');
unregister_widget('WP_Widget_Categories');
unregister_widget('WP_Widget_Recent_Posts');
unregister_widget('WP_Widget_Recent_Comments');
unregister_widget('WP_Widget_RSS');
unregister_widget('WP_Widget_Tag_Cloud');
unregister_widget('WP_Nav_Menu_Widget');
unregister_widget('Twenty_Eleven_Ephemera_Widget');
}
add_action('widgets_init', 'unregister_default_widgets', 11);

what to do after registering and enqueing a css file inside a plugin folder to use it

I have been looking for an answer for this in SOF but didn't find a clear answer
I have a plugin that forces pages to be shown when certain conditions are met. but when i try to include css files for styling i get no response .
I tried to include the file using normal html and this was a failure
then tried the wp_register_style and wp_enqueue_style as such:
function rw_add_style(){
$rw_path = plugins_url('kawaleb/style.css');
wp_register_style('testili',plugins_url('kawaleb/style.css'));
wp_enqueue_style( 'testili' );
}
add_action ('wp_enqueue_scripts','rw_add_style');
wp_enqueue_style( 'testili' );
}
I placed this code on the page that should be shown when the conditions are met
What I don't know here is how to procede after enqueing !
do I need to use html to include the stylesheet file ( and then what is the use of enqueing ?) or does it do that by itself (and then what I am missing here ? )
In the doc of codex they dont go further than telling you to register the style then enqueue it !!!
Thank you all :)
You don't need to register the style, you can just enqueue it. Also, you mentioned that you've put the code in the file where you'd like it to display, you should put it in the index file of your plugin, so in /your-plugin/index.php or whatever the main file is called, add this code:
function rw_add_style() {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
If you need it only on a certain page then you should add your conditional within the function, so you could do this for example:
function rw_add_style() {
global $post;
if ( $post->post_name == 'post_name' ) {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
And you can work out what the post name is for the page you need to enqueue it for by temporarily adding the following code to the page template:
global $post;
echo $post->post_name;
To be clear, you don't need to add any html <link> to include the CSS as you're right, there would be no point in enqueuing it then. Just add the enqueue as I described above in the main index file of your plugin and it will be automatically included in the wp_head() in your header and output just before the </head>.
I hope this helps. Good luck. =)

Resources