I am working on an underscores WordPress theme and I cannot seem to get any custom script to show results when I load the page. I have attempted to include a simple script 'test.js' in functions.php to test it out. All the other scripts work just fine. Any help would be appreciated:
function blake_eric_scripts() {
/**
* Enqeue bootstrap javascript
*/
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), '3.3.6', true);
/**
* Enqeue bootstrap styles
*/
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', array(),
'3.3.6', 'all' );
wp_enqueue_script( 'blake-eric-test', get_template_directory_uri() . '/js/test.js', array('jquery'));
/**
* Enqeue styles.css
*/
wp_enqueue_style( 'blake-eric-style', get_stylesheet_uri() );
wp_enqueue_script( 'blake-eric-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'blake_eric_scripts' );
Here is the simple jQuery script "test.js":
$(function(){
$('#main').addClass('test-class');
});
Thanks!
replace your test.js with following set of codes :-
jQuery(function(){
jQuery('#demo').addClass('test-class');
});
This types of error generally occurs because of conflict with others js files.
By default Wordpress runs jQuery in no-conflict mode, so you can't use the $ sign and define a function like this
$(function(){
$('#main').addClass('test-class');
});
Instead what you can do is
jQuery(function($){
$('#main').addClass('test-class');
});
if you include the $ sign inside the parenthesis you can use it on the rest of the function.
for more details check here
Related
I need to add sync or defer attribute in Stylesheets CSS file which are included by using wp_enqueue_style.
My Code is below.
function my_scripts() {
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '4.4.2');
wp_enqueue_style('my-style', get_stylesheet_uri());
wp_enqueue_style('about-page', get_template_directory_uri() . '/css/about-styles.css', array(), '4.4.3');
wp_enqueue_script('bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151112', true);
wp_enqueue_script('jquery-scrollto', get_template_directory_uri() . '/js/jquery-scrollto.js', array(), '20112', true);
wp_enqueue_style('details-pages', get_template_directory_uri() . '/css/details-pages.css', array(), '4.4.3');
wp_enqueue_style('owl-carousel-css', get_template_directory_uri() . '/css/owl/owl.carousel.css', array(), '4.4.2');
wp_enqueue_script('owl-carousel-js', get_template_directory_uri() . '/css/owl/owl.carousel.min.js', array(), '202', true);
wp_enqueue_script('scripts-js', get_template_directory_uri() . '/js/scripts.js', array(), '20151112', true);
}
add_action('wp_enqueue_scripts', 'my_scripts');
Now I want to add sync or defer attribute in different CSS Style sheets. So please help me, how to add sync or defer attribute. I want to add attributes in just CSS files not in JavaScript files.
Any help will be appreciated.
Thanks.
Try this code
function add_custom_attr( $tag, $handle, $src ) {
$scriptArr = array('bootstrap','my-style','about-page','bootstrap-min','jquery-scrollto','details-pages','owl-carousel-css','owl-carousel-js','scripts-js');
if (in_array($handle, $scriptArr)) {
$tag = str_replace( 'src=', 'sync="false" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_custom_attr', 10, 3 );
Another solution using a different filter, which can be used to target a specific script handle:
function frontend_scripts(){
wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );
function make_script_async( $tag, $handle, $src ){
if ( 'my-unique-script-handle' != $handle ) {
return $tag;
}
return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );
I hope this will help you to solve your problems.
Thank you
This is the script I use to control style and script attributes:
enqueue script
This allows you to selectively add Defer, Async, and Lazy Load to stylesheets and scripts. A perfect way to make Google PageSpeed happy LOL.
Applying proper minification, caching and lazy loading of images, along with managing the styles and scripts with this script, changed our PageSpeed score from 60 mobile / 88 Desktop to 74 Mobile and 96 desktop.
I added custom javascript to a wordpress theme through the wp_enqueue_script()
function.
I placed my file in theme-folder/js/my-javascript.js
But it would not be found by wordpress! I would see the script tag in the html source inserted by wordpress, but clicking on it would take me to a "not found page". I looked around everywhere to see if this was some caching issue. Turned off caching, still nothing.
Finally, I ended up placing my-javascript.js file in the root of theme-folder, instead of 'js' folder. And now my js file was being found and loading.
But now a new problem I don't understand.. I would edit my file and the changes wouldn't reflect! I would have to change the file name of my js file everytime I made a change, renaming the file in my enqueue script function as well...I just wanted to get this task done.
So why does this happen? The site is hosted on dreamhost, and I suspect they used a one-click installer. Does dreamhost do some sort of caching on its own? and that's why?
Am I dumb? or does wordpress somehow know that I hate it?
Edit:
This is how I'm loading the script and how I left it working, but why won't my script refresh when I make changes and why doesn't it work when I place it in theme's 'js' folder?
/* Add floater script */
function add_floater_div_script(){
/* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); */
if ( is_page(1208) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), '', true);
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
Edit: Changed code from "array ( " to "array(" because someone thought this was a problem. I did a quick check myself and PHP is ok with this space so this does not explain the weird wordpress behaviour I'm trying to solve.
Yeah, caching gets really annoying, Though hard reloading should solve the prob but we can't expect client to do it everytime. And WordPress has added a way to take care of that :)
wp_enqueue_script accepts 4th parameter as version number...
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
So just update version after each update...
For development, Just set it as time()... So that it is reloaded every single time and never cached...
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
Your code will look something like this...
/* Add floater script */
function add_floater_div_script(){
/* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); */
if ( is_page(1208) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
BE SURE TO REMOVE time() FROM PRODUCTION VERSION.
Or your file will never be cached by browser... Just set the version of your theme after dev is complete, so that every new version gets JS updated.
Try by wrapping your enqueue action in a function that you'll call on after_setup_theme hook in your functions.php
<?php
add_action( 'after_setup_theme', 'yourtheme_theme_setup' );
if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
function yourtheme_theme_setup() {
add_action( 'wp_enqueue_scripts', 'yourtheme_scripts' );
}
}
if ( ! function_exists( 'yourtheme_scripts' ) ) {
function yourtheme_scripts() {
if ( is_page( 1208 ) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '', true );
}
}
}
Also be sure you're on page with id of 1208 to see if the script is actually loaded (because of the conditional).
And do a hard refresh (Ctrl+Shift+R).
The most common issue I see is an error in how you're enqueueing the file. Can you post code in your functions.php file that's enqueuing the JS file? Always be sure to reference the codex and other developer materials as well: https://developer.wordpress.org/themes/basics/including-css-javascript/
For future reference, it should look something like this:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/my-javascript.js');
Edit: After OP posted their code I saw they have a space after array which is causing an error, here is the correct code:
function add_floater_div_script() {
if ( is_page( 1208 ) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
add_action('wp_enqueue_scripts', 'load_scripts', 12);
function load_scripts() {
wp_enqueue_script('filename', get_template_directory_uri() . '/js/filename.js', array(), '1.0.0', true );
}
This is the proper way to import js in wordpress..
An really easy way to prevent caching of loaded resource files like Javascript-files is to add an random value after the filename that is to be included like so:
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js' . '?' . rand(), array('jquery'), '', true);
The PHP function
rand()
generates a random number and is appended to the file name after a '?' as query string. This forces reloading of the file every time the webpage is loaded.
Of course dismiss it for the production version.
Sometimes the issue could be simple somewhere a duplicated declaration of the name of the enqueue_script.
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater-
8.js', array('jquery'), '', true);
...
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater-
8.js', array('jquery'), '', true);
Don't use twice the same name 'custom-script' for example. The second will not be loaded.
I'm writing a plugin that uses 'admin_enqueue_scripts' to load css and js files.
I use the exact same method to load css and js.. But only the css is loaded in the head section, js files are loaded in the footer?
Can't figure out why?
The wp codex (https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts) at the example clearly states:
"In this example we are loading a javascript file in the head section of edit.php."
Here's my code:
// add scripts and styles only available in admin
add_action( 'admin_enqueue_scripts', array( $this, 'eman_add_admin_JS' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'eman_add_admin_CSS' ) );
public function eman_add_admin_CSS() {
if(is_admin() && $_GET['page'] == 'enjoyit-management' || $_GET['page'] == 'management-settings'){
wp_register_style( 'eman-style-admin', plugins_url( '/css/eman-style-admin.css', __FILE__ ), array(), '1.0', 'all' );
wp_enqueue_style( 'eman-style-admin' );
}
}
public function eman_add_admin_JS() {
if(is_admin() && $_GET['page'] == 'enjoyit-management' || $_GET['page'] == 'management-settings'){
// Load jQuery, just to be sure.
wp_enqueue_script( 'jquery' );
wp_register_script( 'eman-script-admin', plugins_url( '/js/eman-script-admin.js' , __FILE__ ), array('jquery'), '1.0', true );
wp_enqueue_script( 'eman-script-admin' );
}
}
Only if you put true in the enqeue or register_script it will load in the header.
The 'best' place for jquery and javascript is to be loaded in the footer. Because it won't cause lag on your website.
But if you want it in the header you should use
wp_register_script( 'my-script', plugins_url( 'my-script.js' , __FILE__ ), array('jquery'), '1.0', false );
wp_enqueue_script( 'my-script' );
OMG, sorry, after posting I read the codex about 'wp_register_script', and there it was. The last parameter is a '$in_footer' boolean, which is set to true... aargh..
I am trying to add some CSS files and JS files associated to a plugin using the hook.
add_action( 'wp_enqueue_scripts', 'vu_add_scripts' );
the function was not firing untill I added:
wp_head();
However, now whenever I try to add or edit a post I get the error:
Cannot modify header information - headers already sent by (output started at /Users/warrenday/Sites/Channel4/Admin/wp-includes/general-template.php:2363)
Am I putting wp_head in the wrong place? Here is the whole thing in context.
function vu_add_scripts(){
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_script('jquery');
wp_enqueue_style( 'vu-style', $plugin_url . 'css/style.css' );
wp_enqueue_script( 'vu-functions', $plugin_url . 'js/functions.js' );
}
add_action( 'wp_enqueue_scripts', 'vu_add_scripts' );
wp_head(); /* Fires the command to add files to head */
wp_head() is for the front-end only, as is wp_enqueue_scripts.
Use admin_enqueue_scripts like so:
function vu_add_scripts( $hook ) {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'vu-style', $plugin_url . 'css/style.css' );
wp_enqueue_script( 'vu-functions', $plugin_url . 'js/functions.js' );
}
add_action( 'admin_enqueue_scripts', 'vu_add_scripts' );
The wp_head() function is usually used in the header.php file of the theme you are using. You find it in between the HEAD-tag of the file.
Is wp_head() found in your theme's header.php file? Remove the wp_head() from this file and put it into header.php.
The rest of your code seems solid.
I am working on my first plugin and it is coming along alright. However, I am not able to load my scripts (CSS and JS) from my plugin. This is my code:
function my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-plugin/my-style.css') );
wp_enqueue_script( 'my-js', plugins_url( 'my-plugin/my-js.js' ), array('jquery'), '', true );
} add_action( 'wp_enqueue_scripts', 'my_scripts' );
I must be missing something... such a simple code to not be working :(
Your code looks pretty much correct, but check out Plugins URL Page and see this particular part:
If you are using the plugins_url() function in a file that is nested inside a subdirectory of your plugin directory, you should use PHP's dirname() function
Basically, you need to load like this:
plugins_url( 'my-plugin/my-js.js' , __FILE__ ),
Well, I got it. My mistake was that I was using the wrong hook! Duh! In the admin side, you use the hook admin_enqueue_scripts and in the front side you use wp_enqueue_scripts to hook your function to enqueue your scripts to WordPress.
Here is a simple example to import from your plugin. If you want to enqueue scripts from your theme, you should use get_template_directory_uri() function to get the proper path.
From your custom plugin to the admin side:
function load_my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-style.css', __FILE__ ));
wp_enqueue_script( 'my-js', plugins_url( 'my-js.js', __FILE__ ), array('jquery'), '', true );
} add_action( 'admin_enqueue_scripts', 'guide_express_scripts' );
From your custom plugin to the front side:
function load_my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-style.css', __FILE__ ));
wp_enqueue_script( 'my-js', plugins_url( 'my-js.js', __FILE__ ), array('jquery'), '', true );
} add_action( 'wp_enqueue_scripts', 'guide_express_scripts' );