Include Javascript Module in Wordpress plugin - The right way - php

To add js-cookie (https://github.com/js-cookie/js-cookie) into my Wordpress plugin I´m using this code:
add_action('wp_print_scripts', 'drsm_import_cookies_plugin');
if (!function_exists('drsm_import_cookies_plugin')) {
function drsm_import_cookies_plugin() {
echo '<script type="module">import * as Cookies from "'.plugin_dir_url(dirname(__FILE__)).'vendor/js/js.cookie.min.js"</script>';
}
}
The wordpress review team says:
Why is the code being included like that? It's an odd usage of script modules.
What would be a better way to import this script with module into my Wordpress plugin?

Can you please try this.
paste this code into your wp plugin file
function drsm_import_cookies_plugin() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery', plugin_dir_url(dirname(__FILE__)) . '/vendor/js/js.cookie.min.js', array( 'jquery' ) );
}
add_action( 'admin_enqueue_scripts', 'drsm_import_cookies_plugin' );
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Thanks.

Related

Scripts from Wordpress child theme not enqueing

I've been unable to get my custom scripts from a child theme I made show up.
I've added my child theme and appropriate style.css and functions.php files, among others. Followed the usual set up instructions.
Then, I've added custom javascript inside
child_theme_directory/js/custom.js
which in my specific case worked out to be
TWR/js/twr-js.js
I attempted to follow various tutorials and added code to my functions.php in attempt to enqueue those js scripts, such as:
function load_twr_script() {
wp_register_script ( 'twr-js', get_stylesheet_directory_uri() . '/js/twr-js.js');
wp_enqueue_script( 'twr-js', get_stylesheet_directory_uri() . '/js/twr-js.js', array( 'jquery' ), '1.0', true );
}
add_action('wp_enqueue_scripts', 'load_twr_script');
and
function load_twr_script(){
wp_register_script ( 'twr-js', get_template_directory_uri() . '/js/twr-js.js', array('divi-custom-script'), '1.1', true );
$twr_data = array(
'home_url' => esc_url( home_url( '/' ) )
);
wp_localize_script ('twr-js', "twr_data", $twr_data );
wp_enqueue_script ('twr-js');
}
add_action('wp_enqueue_scripts', 'load_twr_script');
and a few other attempts. But my js script isn't even showing up under sources in inspector. Thank you for your help.

load jquery files in wordpress using wp_enqueue_script

I want to load jquery files using wp_enqueue_script in wordpress. below is the code in my function.php file, which is not working, can anyone mention where is the error, thanks
function load_myfiles() { // load external file
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.11.1.min.js' );
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.js' );
wp_enqueue_script('jquery'); // enqueue the external file
wp_enqueue_script('bootstrap-js'); // enqueue the external file
}
add_action( 'wp_enqueue_scripts', 'load_myfiles' );

wordpress enqueue a script if it hasn't already been loaded using a function

I have created a wordpress plugin that creates various widgets. To keep page load time down, I only want to enqueue the associated scripts when the widget is being used.
To do this I created a function like this:
function enqueue_lightbox(){
wp_enqueue_style(
SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-fancybox-css',
'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css',
array(),
SKIZZAR_SHORTCODES__VERSION
);
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox' );
wp_enqueue_script( SKIZZAR_SHORTCODES__PLUGIN_SLUG . '-lightbox-media' );
}
And in my widget class I call it like this:
enqueue_lightbox();
The issue I have is that I have 2 widgets sharing the same piece of code, so I'd like to create a statement that says, if it hasn't been enqueued elsewhere already, enqueue it.
How would I write this function?
You can use wp_script_is function to check the file and load it like this
$handle = 'fluidVids.js';
$list = 'enqueued';
if (wp_script_is( $handle, $list )) {
return;
} else {
wp_register_script( 'fluidVids.js', plugin_dir_url(__FILE__).'js/fluidvids.min.js');
wp_enqueue_script( 'fluidVids.js' );
}

My new approach to wp_enqueue_script

OK, i'm trying to eliminate all possible variables for troubleshooting purposes. So instead of in my functions.php, I've dropped this code in my header.php file:
<?php $mdgtemplateloc = get_bloginfo( 'template_url' ).'/js/'; ?>
<?php echo '<!-- ' . $mdgtemplateloc . ' --> ?>
<?php wp_enqueue_script( 'hoverIntent', $mdgtemplateloc.'hoverIntent.js', array( 'jquery' ) ); ?>
<?php wp_enqueue_script( 'mdMenuAnimation', $mdgtemplateloc.'mdMenuAnimation.js', array( 'hoverIntent' ) ); ?>
The result is a few white space insertions into the source and the comment appears as requested. My understanding was that this would insert something like
<script type="text/javascript" src="[url]/js/mdMenuAnimation.js"></script>
I want to do this the correct way, but wp_enqueue_script has been giving me NOTHING. I suspect I'm doing something fundamentally wrong, but I can't find it and nothing I find through google or stackoverflow or the wp codex is helping at all.
To clarify, here's what I had before, in the functions.php file:
function mdg_setup_scripts() {
$mdgtemplateloc = get_bloginfo( 'template_url' ).'/js/';
wp_register_script( 'hoverIntent', get_bloginfo('template_url').'/js/hoverIntent.js', array( 'jquery' ));
wp_enqueue_script( 'hoverIntent' );
wp_register_script( 'mdMenuAnimation', $mdgtemplateloc.'mdMenuAnimation.js', array( 'hoverIntent' ));
wp_enqueue_script( 'mdMenuAnimation' );
}
add_action( 'wp_enqueue_scripts', 'mdg_setup_scripts' );
This also produced no output that ever called a script. I understand that this second is more like what is supposed to be, but it isn't doing anything.
wp_enqueue_script() does not output anything. You're using it incorrectly.
You need to create a callback and add it to the wp_enqueue_scripts action. Typically this belongs in your functions.php file.
Re-read the docs. There are examples of exactly what you are wanting to do.

How to use wp_enqueue_style() in my WordPress theme?

I am building out my first WordPress site for a client. I really want to use LESS for CSS and found a WP plugin named WP-LESS.
Now, I am total WordPress newb, but it appears that this plugin requires me to use a function called wp_enqueue_style() to tell WordPress to process the .less file.
I can't figure out where I use this function. I looked in my header.php file in my theme directory and I see this.
<link rel="stylesheet" type="text/css" media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Am I supposed to replace this code with something like this?
<?php wp_enqueue_style('mytheme',
get_bloginfo('template_directory').'/style.less',
array('blueprint'), '', 'screen, projection'); ?>
wp_enqueue_style usage inside of the theme or the plugin:
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a parent theme
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a child theme
wp_enqueue_style( 'my-style', plugins_url( '/css/my-style.css', __FILE__ ), false, '1.0', 'all' ); // Inside a plugin
Not quite, but almost. What you want to do is place a function in functions.php that queues your script.
So:
function addMyScript() {
wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/style.less', array('blueprint'), '', 'screen, projection');
}
add_action('wp_head', 'addMyScript');
Then make sure you have do_action('wp_head'); in your header.php file and it should work just fine.
Add below function in your theme function.php and you get style and script.
<?php
if ( ! function_exists( 'add_script_style' ) ) {
function add_script_style() {
/* Register & Enqueue Styles. */
wp_register_style( 'my-style', get_template_directory_uri().'/css/my-style.css' );
wp_enqueue_style( 'my-style' );
/* Register & Enqueue scripts. */
wp_register_script( 'my-script', get_template_directory_uri().'/js/my-script.js' );
wp_enqueue_script( 'my-script');
}
}
add_action( 'wp_enqueue_scripts', 'add_script_style', 10 );
?>
Ran into this issue myself, and EAMann's tip almost worked. It might be the version of WordPress (3.4), although I'm not a php developer so I'm not sure, but I needed this below the function instead of what was provided:
add_action('wp', 'useLess');
To make sure the enqueue is done at the proper time use add_action().
So it would be something like the following in functions.php:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style('main-style', get_template_directory_uri() . '/style.less');
});
Make sure to have a <?php wp_head(); ?> somewhere in your header.php.
btw no need to name the function, it can only a potential name clash or typo Preferably use a anonymous function
Final remark: Why not compile the .less files in the development environment and deploy the resulting .css file (minified or otherwise)?
If you enter this code correctly you must be see this function is exist or not in your index.php file wp_head(); & wp_footer();
if is not exist, you need to be add this function in your index file. you need to add this wp_head(); before haed tag, and another one add before body tag.
function load_style() {
wp_register_style( 'my_style', get_template_directory_uri(). '/css/my_style.css' );
wp_enqueue_style( 'my_style' );
}
// Register style sheet.
add_action( 'wp_enqueue_scripts', 'load_style' );
For more details

Categories