in my wp theme I'm trying to enqueue a js script. When I load the source code of my page it is nowhere to be seen.
my functions.php looks like this:
#LOAD JS
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', '', true);
wp_enqueue_script ('customjs', '/js/scripts.js','','',true);
}
add_action('wp_enqueue_scripts', 'load_js');
I already checked if my footer was included and if the file path is correct.
Try this code in functions.php
function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ) ); //Parent theme
wp_enqueue_script( 'Customc-script', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ) ); // Child Theme
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
You can do it in two ways :
First Way :
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', '', true);
wp_enqueue_script ('customjs');
}
add_action('wp_enqueue_scripts', 'load_js');
Second Way :
function loadjs()
{
wp_enqueue_script ('customjs',get_template_directory_uri() . '/js/scripts.js', array());
}
add_action('wp_enqueue_scripts', 'load_js');
Hope the above solutions will work for you.
Function.php
function loadjs()
{
wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/scripts.js', array(), '', true );
}
add_action('wp_enqueue_scripts', 'load_js');
if you have use child-theme
Try this code in functions.php
function loadjs()
{
wp_enqueue_script('custom-script', get_bloginfo('stylesheet_directory') . '/js/scripts.js', array(), '', true );
}
add_action('wp_enqueue_scripts', 'load_js');
All of above answers can't spot the different of load_js and loadjs. Change it to the same and see it's work.
Related
I'm working on a project that I have a child-theme on which I'm running specific functions from the function.php file.
My problem is that when I try to add an if condition to only run the script on a specific page, it doesn't work.
I'm using the functions.php from the child theme.
In other words... I need to be able to get the current page on the child theme.
What am I doing wrong?
add_action(
'init', function() {
if (is_page('contact')) {
wp_register_script( 'my-func', get_stylesheet_directory_uri() . 'my-func.js', '', '', false );
wp_enqueue_script( 'my-func' );
}
}
);
Thanks
for theme code will go to your functions.php file and for plugin code will go to the public functions.
add_action( 'wp_enqueue_scripts', 'my_assets' );
function my_assets()
{
if (is_page('booking')) {
/* for plugin */
wp_enqueue_style($this->plugin_name, plugin_dir_url(__FILE__) . 'css/custom.css', array(), $this->version, 'all');
/*for theme */
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
}
I have been struggling with diagnosing a bug on a project for hours now. I have currently narrowed it down to what is happening, I'm just not sure why:
I have a template partial called "testimonials.php" which enqueues styles at the top of the file:
<?php
add_action("wp_enqueue_scripts", function() {
wp_enqueue_style("testimonials-style", get_stylesheet_directory_uri() . "/partials/testimonials.css");
});
?>
However, when I try to render this as a partial in a parent template, using get_template_part('partials/testimonials') the partial is rendered, but the CSS is not enqueued. Same for enqueueing JS files. I have verified that the pathways are correct, etc.
If I enqueue the style in the parent Template, then the styles show up.
Do I really need to enqueue the styles into every parent template in which I wish to include this partial?? I must be missing something, because this doesn't seem modular at all!
Can someone please help?
Try this
CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
JS
function wpdocs_scripts_method() {
wp_enqueue_script( 'form-script', get_template_directory_uri() . '/js/form.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
<?php
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/partials/testimonials.css', false, '1.0', 'all' );
}
For more understanding you can see following doc
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
function mytheme_scripts_styles() {
wp_enqueue_script( 'app-script', get_template_directory_uri() . '/assets/js/app.6e31112b.js', array('jquery'), 1.0, true);
wp_enqueue_style('app-css', get_stylesheet_directory_uri() . "/assets/css/build.css",false,'','all');
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );
Tried many different techniques to get jquery working in my custom wordpress theme but still haven't got anywhere.
I've included two different methods that I've tried below near the end of the code, with one commented out here.
Can anyone see why this code might not be working?
PHP:
<?php
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
function enqueue_stylesheets() {
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}
/*function wp_enqeue_scripts() {
wp_register_script('navbarScroll', home_url() . '/js/navbarScroll.js', array( 'jquery' ));
wp_enqueue_script('navbarScroll');
//wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
}*/
function navbar_script() {
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action('wp_enqueue_scripts', 'enqueue_stylesheets', 'enqueue_scripts', 'navbar_script');
My Test JS (I've used both $ and jquery):
jquery(document).ready(function() {
jquery('#jQueryTest').html('jQuery is Working');
jQuery('nav').hover(function() {
$(this).css('display', 'none');
})
/*var a = $('nav').offset().top;
$(document).scroll(function() {
if ($(this).scrollTop() > a)
{
$(this).removeClass('nav');
$(this).addClass('nav-scrolled');
} else {
$(this).removeClass('nav-scrolled');
}
});*/
});
Well it seems that you have too many parameters in your add_action function.
The add_action should have only 4 arguments as follows:
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
See WordPress documentation for more information.
That's what should be working just fine:
function enqueueScript() {
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
wp_register_script('navbarScroll', get_stylesheet_directory_uri() . '/js/navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script('navbarScroll');
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action( 'wp_enqueue_scripts', 'enqueueScript' );
Note that it is not necessary to enqueue style and script separately. One method can do both by using wp_enqueue_scripts.
If you really want to separate your style and script in different function, you should call add_action this way:
add_action('wp_enqueue_scripts','wp_enqueue_scripts');
add_action( 'wp_enqueue_scripts','enqueue_stylesheets');
add_action( 'wp_enqueue_scripts','enqueue_scripts');
add_action( 'wp_enqueue_scripts','navbar_script');
If you want to load jQuery, add it to your function:
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
Its easy if you can have a code like this to solve correctly and without confusiong. You have forgotten to pass add_action for your scripts.
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
function enqueue_stylesheets() {
//For registering Styles
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
//For registering Scripts files
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
wp_register_script('navbarScroll', get_stylesheet_directory_uri() . '/js/navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script('navbarScroll');
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_stylesheets' );
Hope this works for you.
THanks
I'm new to WordPress/PHP and I'm trying to create a theme, during a tutorial it's saying to use the wp_enqueue_style/script to load css/js files however for some reason I can't seem to get Bootstrap/JQuery to work, this is my code in functions.php:
function rixcy_scripts() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '' );
wp_enqueue_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), true );
}
add_action( 'wp_enqueue_scripts', 'rixcy_scripts' );
I'm also wanting to add my own custom javascript file (blog.js) but I'm unsure on how to do this.
Any help would be greatly appreciated!
Yes your code for adding css and js in WordPress is correct but you need to give Unique Name to each css and js
Try below code :
function rixcy_scripts() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.css', array(), '' );
wp_enqueue_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
wp_enqueue_script( 'bootstrap-jquery', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), true );
wp_enqueue_script( 'blog-js', get_template_directory_uri() . '/js/blog.js', array('jquery'), true );
}
add_action( 'wp_enqueue_scripts', 'rixcy_scripts' );
You can do that :
wp_enqueue_script( 'blog', get_template_directory_uri() . '/js/blog.js', array('jquery'), true );
it will probably something stupid as ussual but.. I can't get my style.css or custom.css to override the bootstrap css. I don't wanna put all my custom css in my header file because that is not really the way to do it I suppose..
Now I Tried to add it in my functions.php like this:
//Enqueue scripts and styles
function horizon_scripts() {
//Load the theme CSS
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/css/custom.css', array(), '1.0.1', 'all' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
So it loads my bootstrap css first and then the style.css and custom.css but that didn't quite hit it..
So any help would be appreciated :)
You should be using get_stylesheet_directory_uri(). Here's just the css, without your js:
function horizon_scripts() {
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main', get_stylesheet_uri(), array('bootstrap') );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css', array('main') );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
Note that the third parameter of wp_enqueue_style() is "dependencies". Read more in the Codex.