I'm working on a Wordpress plugin that (amongst other things) renders a javascript podcast player in a post via a shortcode. What I did was to write the shortcode function in my plugin file to return the script tags as needed by the player – see below.
This worked quite well but my plugin was rejected by the review team with the comment that I should use the built-in Wordpress functions to enqueue scripts. But whatever I try, I don't manage to get a wp_enqueue_script working inside of my shortcode function. I also have tried pre-registering it – but either way, the javascript doesn't get loaded.
Does anybody know a solution for what I'm trying to achieve?
Update: Here's the piece of code, I'm struggeling with:
function podigee_player( $atts ) {
$atts = shortcode_atts(
array(
'url' => '',
),
$atts
);
return '<script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="' . $atts['url'] . '/embed?context=external"></script>';
}
add_shortcode( 'podigee-player', 'podigee_player' );`
Okay cool, so I see what you're trying to achieve, and I also see why Wordpress would've blocked this.
An accepted way of enqueuing scripts is as below.
You need to state the script you wish to enqueue, and tell Wordpress where it needs to happen. In this instance, the script shall be added in the head, along with other default scripts.
The number I stated at the end is a version number, should you ever need to update it, which is doubtful since the script is external.
function podigee_external_scripts() {
wp_enqueue_script( 'podigee-podcast-player', 'https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js', '20181023' );
}
add_action( 'wp_enqueue_scripts', 'podigee_external_scripts' );
I had the same problem as the OP, but Scott's answer didn't work for me, either.
My solution was, rather than calling:
add_action( 'wp_enqueue_scripts', 'podigee_external_scripts' ); // Not working.
I just call my function directly:
podigee_external_scripts(); // Your function that calls wp_enqueue_script(...)
Related
I am building my own wordpress theme and I have such a problem. Media library doesn't work, I can't add any image to the page. I am using the latest version of wordpress.
Files available on github https://github.com/krysba/themes-wordpress
When I turn on the standard wordpress theme, the library works :(
I am asking for help in solving this problem.
If you have not tried, the first thing that i'll tring it's enable debug mode on Wordpress from wp-config.php and check if some alerts or errors can help.
define('WP_DEBUG', true);
I think that you must try to comment all function.php and debugging it row by row.
At the first check i've found a wrong use of the function add_theme_support and in the enqeueing files.
For example the right way to user add_theme_support is on the after_setup_theme action:
function my_setup_theme(){
add_theme_support('post-formats',array('gallery','link','image','quote','status','video','audio'));
}
add_action( 'after_setup_theme', 'my_setup_theme' );
Also the right way to enqueing scripts or styles is that:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
See it on this page: https://developer.wordpress.org/themes/basics/including-css-javascript/
On wordpress, using GeneratePress free template, I'm trying to push my custom script after all others.
The big problem is that all the scripts of a plugin (Visual Portfolio) are always loaded at the very end, after my scripts.
I tried to put a very high $priority parameter in the add_action() functions but it doesn't work.
function register_scripts_and_styles() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', null, true);
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles', 99999 );
Do you have any idea how to fix this problem?
Thank you very much.
Here's idea, js and css files in WP use different technique to figure out in what order js\css files should be loaded.
here's function
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array('js-handle-of-some-dependency','js-handle-of-some-other-dependency'), true);
Each script has it's handle, it's first argument to this function, in your case it's custom-js.
Based on digging into plugin's code it's main js has handle visual-portfolio
So you can just enqueue your script with setting it's handle as dependency.
And final solution will be:
function register_scripts_and_styles() {
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery', 'visual-portfolio' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles' );
I've also added jquery as dependency as I guess you are using jQuery in your js code, you can remove it if not.
I've also set version to '1' - it's a query string version which will be applied to your JS code so when you do update and move code live you can force user's browsers to load a fresh one just changing version here.
And see last argument true, it denotes that your script will be injected in footer.
If your code relies not only on main.js of this plugin you might need to add more dependencies as this plugin enqueues bunch of scripts, see whole list of them in /wp-content/plugins/visual-portfolio/classes/class-assets.php from line 350, at the end of register_scripts method of class defined in this file. So you really can put exactly all script's handles on which your custom js code relies and WP will figure out right order of linking those files to page for you.
Happy codding :)
I know there are lists of hooks for WordPress like --> http://adambrown.info/p/wp_hooks/hook
But if I want to find hooks for a plugin like WC Vendors there is a much shorter list of hooks on their website.
Are 'do_action' and 'apply filter' functions the only thing we can modify?
If given a class like --> https://github.com/wcvendors/wcvendors/blob/master/classes/admin/class-product-meta.php#L10, is there any way to modify it?
Are we limited to the do_action hooks or is there a way to modify other areas as well? Can we use the WordPress hooks to hook into the WC Vendors plugin as well?
Mostly you should try to accomplish any task with hooks, but some tasks are just not possible without actually modifying the actual code. But we all know its not good to modify core code, as all changes disappear after an update. So instead of modifying a class, you can extend it. You can override the current features and also add new ones. Extending a class is as easy as using a relavant hook in functions.php and then extending it in the same file or requiring it from another file. Here is an official tutorial on how to add a new shipping method to the woocommerce shipping class.
Sometimes you dont even need all the hooks, you just need to find the ones that are running on a specific page. For this you can use the code below to list all the current hooks.
$debug_tags = array();
add_action( 'all', function ( $tag ) {
global $debug_tags;
if ( in_array( $tag, $debug_tags ) ) {
return;
}
echo "<pre>" . $tag . "</pre>";
$debug_tags[] = $tag;
} );
Or you can use this plugin "simply show hooks"which is really helpful while development as it gives you an idea of where each hook is being triggered on the page.
I am currently developing a theme and i am having issues when it comes to wp_enqueue. This is what i got but it isn't working.
function theme_name_styles() {
wp_enqueue_script( 'style-name',get_template_directory_uri() . '/css/dropdown.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_styles' );
secondly i am trying to tell if the toolbar is active on the frontend of wordpress or not and using conditions to display something if it is not active.
wp_enqueue_script is used to enqueue script , use wp_enqueue_style instead
other thing is its better to register script or style first before using
wp_register_script // to register script
wp_register_style // To register style
then enqueue using wp_enqueue_script wp_enqueue_style // learn more about it on codex
Try this :
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'style-name', get_template_directory_uri() . '/css/dropdown.css' );
wp_enqueue_style( 'style-name' );
}
More info : http://codex.wordpress.org/Function_Reference/wp_register_style
For the toolbar, maybe you can find something here: http://digwp.com/2011/04/admin-bar-tricks/
There are specific functions to enqueue scripts and styles in wordpress. wp_enqueue_script is used to enqueue scripts only and wp_enque_style is used to enqueue stylesheets. These enqueued files will be attached at the point where you called the wordpress function wp_head. Note that these functions check for MIME type so that if you trying to enqueue a script using the wp_enqueue_style then it'll assume your stylesheet as a script and vice versa. You can see the type and explanation of the error if you use a debugger tool. The developers tool in google chrome is quite awsome. You can use this.
There is a function is_admin_bar_showing which can tell explicitly whether the admin bar is showing in the front end or not. http://codex.wordpress.org/Function_Reference/is_admin_bar_showing
I found this article here on how to deregister styles in wordpress. techotronic.de/how-to-de-register-style-sheet-wordpress/
Pretty simples I thought but I can't get my head round what he's trying to say. This is the code below...
add_action( 'wp_print_styles', 'custom_deregister_styles', 100 );
function custom_deregister_styles() {
wp_deregister_style( 'colorbox-theme1' );
}
Straight forward enough, for his plugin...
But if I wanted to deregister a style from another plugin I'm using, how do you find out what name to put in the code - wp_deregister_style( ' ???? ' );
I've tried the obvious, the stylesheet name...
add_action( 'wp_print_styles', 'custom_deregister_styles', 100 );
function custom_deregister_styles() {
wp_deregister_style( 'language-selector.css' );
}
and this is another method I found, but can't get my head around what I got to do?
add_action("gform_enqueue_scripts", "deregister_style");
function deregister_style(){
wp_deregister_style("gforms_css");
}
How does this deregister method work, and what do I need to look for in the plugin to get the relative name to get it to work. I'm very confused.
Appreciate any advice thanks!
UPDATE
I have just discovered the style sheet I'm trying to deregister is not loaded via wp_enqueue_style or wp_register_style.
See php file from plugin here https://gist.github.com/1442470
And look on Line 792 for language-selector.css
Find wp_register_style or wp_enqueue_style in the plugin folder. You'll find the name in that function call.
Update: You cannot remove this without editing the plugin, or resolving to ugly hacks like buffering all the output and filtering it at the end. That's the reason wp_enqueue_style or wp_register_style should be used for all stylesheets.