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..
Related
Hi am new to WordPress theme development and coding (please bare with me :) ). I have a HTML template which works completely fine. When trying to load the style.css file , the styles does not load fully. Not only that it hides the top navigation.
I removed the css from style.css and the top navigation (from header.php) loads. It's only when I enqueue the css that the navigation bar is hidden. Functions.php code:
<?php
function load_my_styles()
{
wp_enqueue_script('popper',get_theme_file_uri('//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', NULL,'1.0', true));
wp_enqueue_script('main-js',get_theme_file_uri('/js/main.js', NULL,'1.0', true));
wp_enqueue_script('anime',get_theme_file_uri('//cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', NULL,'1.0', true));
wp_enqueue_script('jquery',get_theme_file_uri('/vendor/jquery/jquery.js', NULL,'1.0', true));
wp_enqueue_script('custom-js',get_theme_file_uri('/vendor/bootstrap/bootstrap.min.js', NULL,'1.0', true));
wp_enqueue_script('swiper',get_theme_file_uri('/vendor/bootstrap/swiper.min.js', NULL,'1.0', true));
wp_enqueue_style('custom-css',get_theme_file_uri("/vendor/bootstrap/bootstrap/bootstrap.min.css"));
wp_enqueue_style('swiper',get_theme_file_uri("/vendor/bootstrap/bootstrap/swiper.min.css"));
wp_enqueue_style('main-stylesheet',get_stylesheet_uri());
wp_enqueue_style('font-awesome',get_theme_file_uri("//use.fontawesome.com/releases/v5.6.3/css/all.css"));
wp_enqueue_style('maincss',get_theme_file_uri("/css/mainstyle.css"));
}
add_action('wp_enqueue_scripts','load_my_styles');
?>
You need to understand the concept of dependencies. When you enqueue a script or a stylesheet, 5 parameters are usable.
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
Parameters
Description
$handle
(string) (Required) Name of the script. Should be unique.
$src
(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.
$deps
(string[]) (Optional) An array of registered script handles this script depends on.
$ver
(string/bool/null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
$in_footer
(bool) (Optional) Whether to enqueue the script before instead of in the .
An array of registered script handles this script depends on.
Right now your scripts are just fighting one another to be the first to load, therefore causing some troubleshoot.
For example your main.js is probably requiring jquery.js to work properly. If main.js load before jquery.js the chances are, nothing will work. And so on and so on with the rest of the files.
Now I your case i've made a few changes, you should, by taking a look at it have a better understanding.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_enqueue_script( 'jquery_js', get_template_directory_uri( '/vendor/jquery/jquery.js', array(), '1.0.0', true ) );
wp_enqueue_script( 'popper_js', get_template_directory_uri( '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery_js' ), '1.14.7', true ) );
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri( '/vendor/bootstrap/bootstrap.min.js', array( 'popper_js' ), '1.0.0', true ) );
wp_enqueue_script( 'swiper_js', get_template_directory_uri( '/vendor/bootstrap/swiper.min.js', array( 'bootstrap_js' ), '1.0.0', true ) );
wp_enqueue_script( 'anime_js', get_template_directory_uri( '//cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', array( 'swiper_js' ),'2.0.2', true ) );
wp_enqueue_script( 'main_js', get_template_directory_uri( '/js/main.js', array( 'anime_js' ), '1.0.0', true ) );
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri( '/vendor/bootstrap/bootstrap/bootstrap.min.css' ), array(), '1.0.0', 'all' );
wp_enqueue_style( 'swiper_css', get_template_directory_uri( '/vendor/bootstrap/bootstrap/swiper.min.css' ), array( 'bootstrap_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'font_awesome', get_template_directory_uri( '//use.fontawesome.com/releases/v5.6.3/css/all.css' ), array( 'swiper_css' ), '5.6.3', 'all' );
wp_enqueue_style( 'style_css', get_template_directory_uri(), array( 'bootstrap_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'main_css', get_template_directory_uri( '/css/mainstyle.css' ), array( 'bootstrap_css' ), '1.0.0', 'all' );
};
}; ?>
Learn more
A bit of reading # Enqueue, Register & Load CSS and JavaScript with Wordpress
I have developed 2 Wordpress plugins and I'm trying to load the needed css and js files in admin only where I need them.
I have written a function:
function ds_shortcodes_enqueue() {
$shortcodes_pages = array(
"shortcodes_plugin",
"add_shortcode",
"edit_shortcode"
);
$the_page = isset($_GET['page']);
if(in_array($the_page,$shortcodes_pages)){
// enqueue all our scripts
wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );
wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );
}
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );
The function shoud load the files only on the pages with the slugs mentioned in the array.
Then, I have written a second plugin. Different name, different text domain, different functionality and I have used the same function:
function ds_videos_enqueue() {
$videos_pages = array(
"videos_plugin",
"add_video",
"edit_video",
"edit_video_category",
"video_categories",
"edit_video_level",
"video_levels",
"video_shortcode"
);
$current_page = isset($_GET['page']);
if(in_array($current_page,$videos_pages)){
wp_enqueue_style( 'ds-videos-style', plugins_url( '/admin/css/videos-style.css', __FILE__ ) );
wp_enqueue_script( 'ds-videos-script', plugins_url( '/admin/js/videos-scripts.js', __FILE__ ) );
}
}
add_action( 'admin_enqueue_scripts', 'ds_videos_enqueue' );
Now here's the problem.
They load the files from both plugins on any plugin page in admin.
I just don't get it.
I couldn't find any way to fix this.
It seems in_array() returns always true.
I hope you can help.
Thank you.
admin_enqueue_scripts passes a page hook to the callback function.
So, you can do something like this,
function ds_shortcodes_enqueue($hook) {
if($hook != 'page_where_you_want_scripts') {
return;
}
wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );
wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );
Reference
I have also tried this but the in_array doesn't seem to work.
function ds_shortcodes_enqueue() {
$shortcodes_pages = array(
"shortcodes_plugin",
"add_shortcode",
"edit_shortcode"
);
if(in_array("shortcodes_plugin", $shortcodes_pages)){
// enqueue all our scripts
wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );
wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );
It should enqueue the 2 files only on the page with the slug "shortcodes_plugin". It loads the files everywhere.
There is a global variable in wp-admin called $pagenow which holds name of the current page, ie edit.php, post.php, etc.
You can also check the $_GET request to narrow your location down further, for example:
function ds_shortcodes_enqueue() {
$shortcodes_pages = array(
"shortcodes_plugin",
"add_shortcode",
"edit_shortcode"
);
if ( isset($_GET['page']) ) {
global $pagenow;
if(in_array($pagenow,$shortcodes_pages)){
// enqueue all our scripts
wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );
wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );
}
}
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );
function ds_videos_enqueue() {
$videos_pages = array(
"videos_plugin",
"add_video",
"edit_video",
"edit_video_category",
"video_categories",
"edit_video_level",
"video_levels",
"video_shortcode"
);
if ( isset($_GET['page']) ) {
global $pagenow;
if(in_array($pagenow,$videos_pages)){
wp_enqueue_style( 'ds-videos-style', plugins_url( '/admin/css/videos-style.css', __FILE__ ) );
wp_enqueue_script( 'ds-videos-script', plugins_url( '/admin/js/videos-scripts.js', __FILE__ ) );
}
}
}
add_action( 'admin_enqueue_scripts', 'ds_videos_enqueue' );
It seems in_array() returns always true.
<?php
$videos_pages = array(
'videos_plugin',
'add_video',
'edit_video',
'edit_video_category',
'video_categories',
'edit_video_level',
'video_levels',
'video_shortcode'
);
$current_page = isset($_GET['page']);
if(in_array($current_page,$videos_pages,true)){
echo 'I am debug point';
}else{
echo 'I am debug point 2';
}
exit;
?>
I'm trying to add new scripts and a css file to my child's theme on wordpress but i'm getting the following errors.
GET https://linton59.co.uk/wp-content/themes/simpleshift/css/lightbox.css?ver=4.3.0 net::ERR_ABORTED
(index):280 GET https://linton59.co.uk/wp-content/themes/simpleshift/js/lightbox-plus-jquery.js?ver=3.3.0 net::ERR_ABORTED
(index):279 GET https://linton59.co.uk/wp-content/themes/simpleshift/js/lightbox.js?ver=3.3.0 net::ERR_ABORTED
(index):68 GET https://linton59.co.uk/wp-content/themes/simpleshift/css/lightbox.css?ver=4.3.0 net::ERR_ABORTED
The following is the functions.php i'm using.
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// END ENQUEUE PARENT ACTION
add_action( 'wp_enqueue_scripts', 'theme_name_scripts', 20 );
function theme_name_scripts() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/js/public.js', array( 'jquery' ), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'theme_light', 30 );
function theme_light() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_style( 'lightbox', get_template_directory_uri() . '/css/lightbox.css', array(), '4.3.0' );
wp_enqueue_script( 'lightbox2', get_template_directory_uri() . '/js/lightbox.js', array( 'jquery' ), '3.3.0', true );
wp_enqueue_script( 'lightbox3', get_template_directory_uri() . '/js/lightbox-plus-jquery.js', array( 'jquery' ), '3.3.0', true );
}
My child's theme has a css folder and js folder with the relevant files in it.
The last action is the only part not working.
get_template_directory_uri() will always return the URI of the current parent theme.
To get the child theme URI instead, you need to use get_stylesheet_directory_uri().
I am using following code to add some scripts in WP pages like
function add_js() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() .'/js/bootstrap.min.js', array('jquery'),'',true );
wp_enqueue_script( 'colorbox-js', get_template_directory_uri() .'/js/jquery.colorbox-min.js', array('jquery'),'',true );
wp_enqueue_script( 'img-loader', get_template_directory_uri() .'/js/img-load.js', array('jquery'),'',true );
wp_enqueue_script( 'box-tanzim', get_template_directory_uri() .'/js/tanzim.js', array('jquery'),'',true );
wp_enqueue_script( 'scripts-js', get_template_directory_uri() .'/js/scripts.js', array('jquery'),'',true );
}
add_action( 'wp_enqueue_scripts', 'add_js' );
but I don't want to add unnecessary scripts on some pages! for example I would like to have all of above scripts on front-page.php but on other pages I don't need last three scripts.
Can you please let me know how I can filter them?
Thanks
something like this maybe
if ( is_page_template( 'front-page.php' ) ) {
// wp_enqueue_script()
}
I am trying to load two scripts through the wp_enqueue_script(). I made to functions but only the first loads not the second one. Here is the code:
//Load my own jQuery
function fix_noconflict() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery' , 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' );}
add_action( 'wp_enqueue_scripts' , 'fix_noconflict' );
//This two functions follow the same
function mauricio_bootstrap_script_jquery() {
//Includes bootstrap jQuery
wp_register_script( 'custom-script', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap.js', array( 'jquery' ) );
//This enqueus the script
wp_enqueue_script( 'custom-script' );
}
// Adds the new bootstrap function to the wp_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'mauricio_bootstrap_script_jquery' );
function mauricio_bootstrap_script_carousel() {
wp_register_script( 'myscript', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap-carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'myscript' );
}
add_action( 'wp_enqueue_script', 'mauricio_bootstrap_script_carousel' );
Just for the record I have wp_head() in my header. And as I said it loads the first function that includes bootstrap.js.
Thanks,
M
Why don´t you try to put all your functions inside a main function, like this?
function wpEnqueueScripts(){
// Adds the new bootstrap function to the wp_enqueue_scripts
wp_register_script('custom-script', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap.js', array('jquery'));
wp_enqueue_script('custom-script');
// Adds the new bootstrap function to the wp_enqueue_scripts
wp_register_script('myscript', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap-carousel.js', array('jquery'));
wp_enqueue_script('myscript');
}
add_action('wp_enqueue_scripts', 'wpEnqueueScripts');
Someone at the wordpress forum provided this. The two functions were combined and when adding the action the use of the 'template_redirect' $tag is used instead of the 'wp_enqueue_script'
function mauricio_bootstrap_scripts() {
wp_register_script( 'custom-script', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script' );
wp_register_script( 'myscript', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap-carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'myscript' );
}
add_action( 'template_redirect', 'mauricio_bootstrap_scriptsl' );