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.
Related
I register my css in Header with <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri().'/style.css'; ?>">
and the site couldn't recognize my css file, I also tried to use enqueue style :
function my_assets() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'style' ) );
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );
and it recognize the css but when you edit the css file it is not changing/updating, so I deleted the enqueue_style function and now it recognizes 2 css and still not changing when you edit the css file.
what do you think is the problem and solution here?
Please try to use versioning when you enqueue the file.
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', filemtime(get_stylesheet_directory() . '/style.css'), false );
On the official documentation, you can check the version parameters i used on this sample:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Hope it helps.
Jose
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.
I am having trouble with including modernizr for wordpress. I am using a child theme, btw. Can anyone help me out?
function foundation_assets() {
// Load JavaScripts
wp_enqueue_script('add_jquery', 'http://code.jquery.com/jquery-latest.min.js');
wp_enqueue_script('new_jquerypp', get_stylesheet_directory_uri() . '/js/jquerypp.custom.js');
wp_enqueue_script('bookblock', get_stylesheet_directory_uri() . '/js/jquery.bookblock.js');
//wp_enqueue_script('extra', get_stylesheet_directory_uri() . '/js/extra.js');
wp_enqueue_script('include_modernizr', get_stylesheet_directory_uri().'/js/modernizr.custom.js');
//Load Stylesheet
wp_enqueue_style( 'bookblock-css', get_stylesheet_directory_uri() . '/css/bookblock.css' );
}
add_action( 'wp_enqueue_scripts', 'foundation_assets' );
Here is my code for enqueuing it. It is saved in the functions.php.
Edited: Code has been changed.
1) it's commented out
2) you are missing the closing parathesis.
wp_enqueue_script('include_modernizr', get_stylesheet_directory_uri().'/js/modernizr.custom.js');
Also take a look at the function definition to ensure your scripts will load in the right order https://developer.wordpress.org/reference/functions/wp_enqueue_script/
for example wp_enqueue_script('new_jquerypp', get_stylesheet_directory_uri() . '/js/jquerypp.custom.js', array('add_jquery')); will make sure that new_jquerypp loads after jQuery itself
I just realized that my site has not been using the local files of bootstrap and was getting theme via CDN. I've now been trying to figure out how to switch from CDN to using the local files, but every time I attempt to switch them my whole site becomes messed up. I have the bootstrap css files in a css folder as well as the js files in a js folder. Can anyone help me get bootstrap from my local files?
This probably seems like an easy question however I'm still pretty new at this, so I'm completely lost.
what I had before in my functions.php...
function learningWordPress_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array('jquery'), '3.3.7', true );
wp_enqueue_style( 'bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
}
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
what I tried to switch it too...
function learningWordPress_resources() {
wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
I think you need to load three files: css, javascript, and your local style.css file:
Here is what I do on my Legal Firm Website - you can view the source yourself.
function btc_scripts() {
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.5' );
wp_enqueue_style( 'btc-style', get_template_directory_uri() . '/style.css' , array ('bootstrap-style'),'1.0.1');
wp_enqueue_script ( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.5', false);
}
add_action( 'wp_enqueue_scripts', 'btc_scripts' );
I am working on a local WordPress install and I am trying to enqueue some stylesheets like I've done many times before but I've never run into this bug before.
Here is my code in the functions.php file.
function foundation_styles() {
wp_enqueue_style( 'foundation', get_template_directory() . '/css/foundation.css' );
}
add_action( 'wp_enqueue_scripts', 'foundation_styles' );
When viewing page source this is the file path that was enqueued:
<link rel='stylesheet' id='foundation-css' href='http://localhost/FoundationwebsiteC:xampphtdocsFoundationwebsite/wp-content/themes/foundation/css/foundation.css?ver=4.0' >
Instead it should be:
<link rel='stylesheet' id='foundation-css' href='http://localhost/Foundationwebsite/wp-content/themes/foundation/css/foundation.css?ver=4.0' >
Notice the C:xampphtdocsFoundationwebsite/ hidden in the middle of the file path.
The exact same thing happened when I used get_stylesheet_directory() instead of get_template_directory()
The filepath for my local install is:
C:\xampp\htdocs\Foundationwebsite\wp-content\themes\foundation\css
Anyone know what is causing my filepath to be so funky?
You're using functions that will return a path whereas what you need is a URL.
Replace get_template_directory() or get_stylesheet_directory() with get_template_directory_uri() or get_stylesheet_directory_uri().
Example:
function foundation_styles() {
wp_enqueue_style( 'foundation', get_template_directory_uri() . '/css/foundation.css' );
}
use this
function foundation_styles() {
wp_enqueue_style( 'foundation', get_bloginfo('template_url') . '/css/foundation.css' );
}
for more information refer this link
http://codex.wordpress.org/Function_Reference/wp_enqueue_style