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.
Related
Working on a client site and suddenly an error comes up - Cannot add a variant product to the cart, keep saying "Please select some product options before adding this product to your basket." eventhough one of the option was chosen.
the dev website product link here
Saw the JS error on console "wp-util.min.js?ver=5.7.2:2 Uncaught ReferenceError: _ is not defined" and realise it's a script enqueue error, as underscore should be enqueued before wp-util.
I can do everything just fine if I have logged in as admin, and the underscore is enqueued before wp-util.
How can I fix this error?Is there a way to debug the enqueued order? Tried to add wp_enqueue_script to childtheme style enqueue handle, and changed the add_action priority to highest (i.e. 0) but that could not fix it.
How can I ensure underscore loaded before wp-util?
if ( ! function_exists( 'suffice_child_enqueue_child_styles' ) ) {
function customizr_child_enqueue_child_styles() {
// loading parent style
wp_register_style(
'parente2-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style( 'parente2-style' );
// loading child style
wp_register_style(
'childe2-style',
get_stylesheet_directory_uri() . '/style.css'
);
wp_enqueue_style( 'childe2-style');
//enqueue underscore
wp_enqueue_script( 'underscore' );
}
}
add_action( 'wp_enqueue_scripts', 'customizr_child_enqueue_child_styles',0 );
From wp_localize_script docs:
IMPORTANT! wp_localize_script() MUST be called after the script it's being attached to has been registered using wp_register_script() or wp_enqueue_script().
So, first load yours scripts and then load wp-util.
wp_localize_script( 'ajax-script', 'jsVars', [ 'ajax_url' => admin_url( 'admin-ajax.php' ) ], [ 'wp-util' ] );
wp_enqueue_script( 'wp-util' );
custom.css file load properly but after some changes in CSS file and send it on filezilla it does not load that current changes. It loads after remove functions.php file and again paste all data. What should I do to solve that problem. Below I have attached link file. I also write <?php wp-head() ?> in header and <?php wp-footer() ?> in footer file.
function wpdocs_theme_name_scripts() {
// style link
wp_enqueue_style ( 'bootstrap.min', get_template_directory_uri(). '/assets/css/bootstrap.min.css','1.1', true);
wp_enqueue_style ( 'swiper-bundle.min ', get_template_directory_uri(). '/assets/css/swiper-bundle.min.css','1.1', true);
wp_enqueue_style ( 'style css', get_stylesheet_uri() );
wp_enqueue_style ( 'custom css', get_bloginfo('template_directory'). '/custom.css','1.1', true);
// script link
wp_enqueue_script ( 'jquery-3.5.1.slim.min', get_template_directory_uri(). '/assets/js/jquery-3.5.1.slim.min.js', array(), 1.0, true );
wp_enqueue_script ( 'bootstrap.bundle.min', get_template_directory_uri(). '/assets/js/bootstrap.bundle.min.js', array(), 1.0, true);
wp_enqueue_script ( 'popper.min', get_template_directory_uri(). '/assets/js/popper.min.js', array(), 1.0 , true );
wp_enqueue_script ( 'swiper-bundle.min', get_template_directory_uri(). '/assets/js/swiper-bundle.min.js', array(), 1.0 , true );
wp_enqueue_script ( 'main js', get_stylesheet_directory_uri(). '/assets/js/main.js', array(), 1.0 , true );
};
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
This sounds like a caching issue. If you are not able to properly clear server's and browser's cache then you can have proper versioning based on the file's last modified time. Example:
$my_version = filemtime(get_template_directory() . '/custom.css');
wp_enqueue_style ('custom-css', get_template_directory() . '/custom.css', false, $my_version, 'all');
When the custom.css file is updated on the server, WP will append the appropriate timestamp and your browser will download the new version.
Also do not use spaces in your handle strings, ie. change 'custom css' to 'custom-css'.
Using the third parameter, the array(), upon enqueuing, you can define a dependency using the dependency handle, via the array( 'dependency_handle' ). Your dependency handle should be a one word string, you can't use style cssyou need to use style_cssor style-css.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_enqueue_style ( 'style_css', get_stylesheet_uri(), array(), '1.0', 'all' );
wp_enqueue_style ( 'custom_css', trailingslashit( get_template_directory_uri() ) . 'custom.css', array( 'style_css' ), '1.0', 'all' );
};
}; ?>
Here we specify that we want out custom_css to be enqueued AFTER the style_css.
Using the fourth parameter, the version, here 1.0 let Wordpress knows NOT to serve a cache version if the version as changed. Therefore if you specified 1.1 Wordpress will fetch a fresh version of our script. (For development tho, you might want just to use your browser in incognito mode, which doesn't cache anything)
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 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 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