I have been trying to include Gridster into my WordPress Backend but it simply doesn't work. The frontend works fine, but I can't figure out why, because the files are actually in the following directories.
First way I tried it:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__ ), array('jquery') );
wp_enqueue_script( "gridster-script-extra", plugins_url( '/js/jquery.gridster.with-extras.min.js', __FILE__ ), array('gridster-script'), true );
wp_enqueue_script( "gridster-script-custom", plugins_url( '/js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
}
Second one:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('gridster-script', plugin_dir_url(__FILE__) . '/js/jquery.gridster.min.js', array('jquery') );
wp_enqueue_script('gridster-script-extra', plugin_dir_url(__FILE__) . '/js/jquery.gridster.with-extras.min.js', array('gridster-script') );
wp_enqueue_script('gridster-script-custom', plugin_dir_url(__FILE__) . '/js/gridster.js', array('jquery') );
}
Third and last one:
function add_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script( 'gridster-script', get_template_directory_uri() . '/js/jquery.gridster.min.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'gridster-script-extra', get_template_directory_uri() . '/js/jquery.gridster.with-extras.min.js', array('gridster-script'), '1.0.0', true );
wp_enqueue_script( 'gridster-script-custom', get_template_directory_uri() . '/js/gridster.js', array('jquery'), '1.0.0', true );
}
You can't randomly use plugin url functions, and need to choose the correct one for your use case. Assuming __FILE__ is correctly referring to the main plugin file, you'll need to hook that function into the admin_enqueue_scripts action hook:
function add_my_scripts() {
wp_enqueue_script( "gridster-script", plugins_url( 'js/jquery.gridster.min.js', __FILE__ ), array('jquery') );
wp_enqueue_script( "gridster-script-extra", plugins_url( 'js/jquery.gridster.with-extras.min.js', __FILE__ ), array('gridster-script'), true );
wp_enqueue_script( "gridster-script-custom", plugins_url( 'js/gridster.js', __FILE__ ), array('jquery'), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'add_my_scripts' );
Related
I have a wordpress local installation and I am trying to load scripts and styles with wp_enqueue but none of these are working, the front-end is not capturing any of the files,
Here is the code:
<?php
function all_the_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css' );
wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/css/custom.css' );
wp_enqueue_script( 'bootstrap.bundle', get_template_directory_uri() . '/assets/js/bootstrap.bundle.js' , array ( 'jquery' ) );
wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/assets/js/custom-scripts.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'all_the_scripts' );
?>
I have double checked everything, all the files are in the correct locations and all required arguments are given, but still no result.
I tried wp_register_script but they say that it is optional and not needed
Use
get_stylesheet_directory_uri()
instead of
get_template_directory_uri()
The get_template_directory_uri() reference to the parent theme if you're developing Child Themes, and get_stylesheet_directory_uri() returns the URI of the current theme.
I am using a WordPress Theme - Rock 'n' Rolla which uses prettyPhoto as it's default lightbox for image galleries.
I have built a child theme and I want to disable prettyPhoto to replace it with a different lightbox solution.
In the functions.php file on the parent theme, it has the following function
function rock_n_rolla_scripts() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.css' );
wp_enqueue_style( 'flexslider', get_template_directory_uri() .'/assets/css/flexslider.css' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() .'/assets/font-awesome/css/font-awesome.min.css' );
wp_enqueue_style( 'prettyPhoto', get_template_directory_uri() .'/assets/css/prettyPhoto.css' );
wp_enqueue_style('rock-n-rolla-google-fonts', '//fonts.googleapis.com/css?family=Lato:400,300,700,400italic,900|Oswald:400,700');
wp_enqueue_style( 'rock-n-rolla-ie-style', get_stylesheet_directory_uri() . "/assets/css/ie.css", array() );
wp_style_add_data( 'rock-n-rolla-ie-style', 'conditional', 'IE' );
wp_enqueue_style( 'rock-n-rolla-style', get_stylesheet_uri() );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array('jquery') );
wp_enqueue_script( 'prettyPhoto', get_template_directory_uri() . '/js/jquery.prettyPhoto.js', array('jquery'));
wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.js', array('jquery') );
wp_enqueue_script( 'rock-n-rolla-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery') );
wp_enqueue_script( 'rock-n-rolla-ie-responsive-js', get_template_directory_uri() . '/js/ie-responsive.min.js', array() );
wp_script_add_data( 'rock-n-rolla-ie-responsive-js', 'conditional', 'lt IE 9' );
wp_enqueue_script( 'rock-n-rolla-ie-shiv', get_template_directory_uri() . "/js/html5shiv.min.js");
wp_script_add_data( 'rock-n-rolla-ie-shiv', 'conditional', 'lt IE 9' );
wp_enqueue_script( 'rock-n-rolla-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'rock-n-rolla-skip-link-focus-fix', get_template_directory_uri() . '/
Commenting out the prettyPhoto elements disable it however I know this would not be the correct way to go about this due to updates overriding the changes.
I have tried adding a functions.php file and creating that function without prettyPhoto elements but with no success unfortunately.
You can add this function to the child theme:
function pplabs_custom_scripts() {
/*
* Remove PrettyPhoto Lightbox plugin
*/
wp_dequeue_script( 'prettyPhoto' );
/*
* Add Your New Lightbox plugin
*/
wp_enqueue_script( 'child-theme-lightbox', get_stylesheet_directory_uri() . '/js/child-theme-lightbox.js' );
}
add_action( 'wp_enqueue_scripts', 'pplabs_custom_scripts', 100 );
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.