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.
Related
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.
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.
I am trying to find out if you can enqueue a script in Wordpress that has php variables within it. If this is possible how would it be done?
I have tried this, however I get errors.
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/masonry.php',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Your question is a bit ambiguous.
If you want to include a PHP file, use include_once or require_once in your PHP file.
If you want to include JavaScript file, use wp_enqueue_script. Your code should be something like:
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/masonry.js',
array( 'jquery' )
);
Moreover, if you want to use PHP variables inside a JS file, use wp_localize_script.
After enqueue, use the following line:
$name = "my_name";
$params = array('name' => $name);
wp_localize_script( 'custom-script', 'OBJECT', $params );
Inside your masonry.js, use OBJECT.name to get the value.
In your php file called masonry.php
<?php
header('Content-type: application/javascript');
$php = 'Hello World';
echo "alert('$php');";
And then link/enqueue your php as if it was a javascript file:
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/masonry.php',
array( 'jquery' )
);
You can use wp_add_inline_script function to print the inline code.
In my plugin i need to include 1 css and 2 js file (jquery.min.js and jquery.googleplus-activity-1.0.min.js).
i am using this code
function my_init_method()
{
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', '' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/js/jquery.min.js');
}
function addHeaderCode() {
echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/css/style.css" />' . "\n";
}
function my_jsscripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', '' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/js/jquery.googleplus-activity-1.0.min.js');
wp_enqueue_script( 'jquery' );
}
add_action('init', 'my_init_method');
//Include CSS
add_action('wp_head', 'addHeaderCode');
//Include JS
add_action('wp_enqueue_scripts', 'my_jsscripts_method');
but not able to add both of js file.
Keep in mind that i have to include jquery.min.js first then css and another js file jquery.googleplus-activity-1.0.min.js
I'd use a different handle for the jquery.googleplus-activity-1.0.min.js file. You may be confusing WordPress trying to reuse "jquery". So something like:
function my_jsscripts_method() {
wp_register_script( 'jquery.googleplus', '' . get_bloginfo('wpurl') . '/wp-content/plugins/googe_plus/js/jquery.googleplus-activity-1.0.min.js');
wp_enqueue_script( 'jquery.googleplus' );
}
Might be worth using the third argument to wp_register_script to have it depend on jquery.
As an aside, unless you have a very good reason, I'd probably use the version of jQuery that comes with WordPress (rather than replacing it). You may get compatibility issues.
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