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().
Related
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 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'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..
function twentytwelve_add_lightbox() {
wp_enqueue_script('jquery');
wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/inc/lightbox/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/inc/lightbox/js/jlightbox.js', array( 'fancybox' ), false, true );
wp_enqueue_style( 'lightbox-style', get_template_directory_uri() . '/inc/lightbox/css/fancybox.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_add_lightbox' );
This should enqueue the css as is, but I am getting an error when loading the page.
enqueue. http://localhost:8888/ramova2/wp-content/themes/twentytwelve/inc/lightbox/css/fancybox.css?ver=4.0.1 Failed to load resource: the server responded with a status of 404 (Not Found) because wordpress adds a ?ver=4.0.1 tag at the end of the link.
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' );