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.
Related
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 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' );
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' );
}
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.
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.