I am using wordpress captain slider plugin in my channel theme I do not know why css and js are not loading. No issues with permissions any help???
These are loaded in wp-contents/plugins/captain-slider/captain-slider.php
function ctslider_load_scripts() {
wp_register_style( 'flexslider-style', CTSLIDER_PLUGIN_URL . 'includes/css/flexslider.css', array( ), CTSLIDER_VERSION );
wp_register_script( 'flexslider', CTSLIDER_PLUGIN_URL . 'includes/js/jquery.flexslider-min.js', array( 'jquery' ), CTSLIDER_VERSION, false );
wp_register_script( 'fitvids', CTSLIDER_PLUGIN_URL . 'includes/js/jquery.fitvids.js', array( 'jquery' ), CTSLIDER_VERSION, false );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'flexslider' );
wp_enqueue_script( 'fitvids' );
wp_enqueue_style( 'flexslider-style' );
}
add_action( 'wp_enqueue_scripts', 'ctslider_load_scripts' );
This code appears to be totally wrong. THe function ctslider_load_scripts() is being executed when the wp_enqueue_scripts action is fired. So all the scripts are getting enqueued after the action fires. This is wrong.
Don't use the action. Just enqueue the scripts like this:
wp_register_style( 'flexslider-style', CTSLIDER_PLUGIN_URL . 'includes/css /flexslider.css', array( ), CTSLIDER_VERSION );
wp_register_script( 'flexslider', CTSLIDER_PLUGIN_URL . 'includes/js/jquery.flexslider-min.js', array( 'jquery' ), CTSLIDER_VERSION, false );
wp_register_script( 'fitvids', CTSLIDER_PLUGIN_URL . 'includes/js/jquery.fitvids.js', array( 'jquery' ), CTSLIDER_VERSION, false );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'flexslider' );
wp_enqueue_script( 'fitvids' );
wp_enqueue_style( 'flexslider-style' );
Related
I am using Popper with Bootstrap 4 on Wordpress and have DataTables and Navwalker. My dropdown menu and the hamburger are not working. Popper is loading but I suspect the order in which the css and js files might be the problem. Any ideas please. This is what I am loading.
<?php
function load_stylesheets()
{
wp_enqueue_style( 'bootstrap', get_template_directory_uri().'/css/bootstrap.min.css', array(), false,'all');
wp_enqueue_style( 'datatables-bootstrap4-css', '/DataTables/DataTables-1.10.20/css/dataTables.bootstrap4.min.css');
wp_enqueue_style( 'datatables-responsive-css', '/DataTables/Responsive-2.2.3/css/responsive.bootstrap4.min.css');
wp_enqueue_style( 'datatables-buttons', '/DataTables/Buttons-1.6.1/css/buttons.dataTables.min.css');
wp_enqueue_style( 'style', get_template_directory_uri().'/style.css', array(), false,'all');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function include_scripts()
{
wp_deregister_script('jquery');
wp_enqueue_script( 'jquery', get_template_directory_uri().'/js/jquery-3.4.1.min.js', '', 1, false);
wp_enqueue_script('popper', get_template_directory_uri().'/js/popper.min.js', '', 1, false);
wp_enqueue_script( 'datatables-jquery', '/DataTables/DataTables-1.10.20/js/jquery.dataTables.min.js','', 1, false);
wp_enqueue_script( 'datatables-bootstrap4', '/DataTables/DataTables-1.10.20/js/dataTables.bootstrap4.min.js','', 1, false);
wp_enqueue_script( 'datatables-responsive-js', '/DataTables/Responsive-2.2.3/js/dataTables.responsive.min.js','', 1, false);
wp_enqueue_script( 'datatables-responsive-bootstrap4-js', '/DataTables/Responsive-2.2.3/js/responsive.bootstrap4.min.js','', 1, false);
wp_enqueue_script( 'datatables-buttons-js', '/DataTables/Buttons-1.6.1/js/dataTables.buttons.min.js','', 1, false);
}
add_action( 'wp_enqueue_scripts', 'include_scripts' );
add_theme_support('menus');
/**
* Register Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
register_nav_menus(
array(
'top-menu' => __('Top Menu', 'theme'),
'footer-menu' => __('Footer Menu', 'theme'),
)
);
?>
Solved. bootstrap.min.js missing after popper.
wp_deregister_script('jquery');
wp_enqueue_script( 'jquery', get_template_directory_uri().'/js/jquery-3.4.1.min.js');
wp_enqueue_script('popper', get_template_directory_uri().'/js/popper.min.js');
wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/js/bootstrap.min.js');
wp_enqueue_script( 'datatables-jquery', '/DataTables/DataTables-1.10.20/js/jquery.dataTables.min.js');
wp_enqueue_script( 'datatables-bootstrap4', '/DataTables/DataTables-1.10.20/js/dataTables.bootstrap4.min.js');
wp_enqueue_script( 'datatables-responsive-js', '/DataTables/Responsive-2.2.3/js/dataTables.responsive.min.js');
wp_enqueue_script( 'datatables-responsive-bootstrap4-js', '/DataTables/Responsive-2.2.3/js/responsive.bootstrap4.min.js');
wp_enqueue_script( 'datatables-buttons-js', '/DataTables/Buttons-1.6.1/js/dataTables.buttons.min.js');
Good day, I'm fairly new to Wordpress. I'm enqueuing all my css and js files on wordpress and followed the tutorial (https://developer.wordpress.org/themes/basics/including-css-javascript/) and it doesn't seem to be linking my css/js I know for a fact since my site runs on Bootstrap and the grids aren't visible.
Here's my script:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'mcm-bw', get_template_directory_uri() . '/css/mcm-bw.css', array(), '1.1', 'all');
wp_enqueue_style( 'bootstrap.min.css', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '1.1', 'all');
wp_enqueue_style( 'headers.css', get_template_directory_uri() . '/css/headers.css', array(), '1.1', 'all');
wp_enqueue_style( 'espresso', get_template_directory_uri() . '/css/espresso.css', array(), '1.1', 'all');
wp_enqueue_style( 'google-search', get_template_directory_uri() . '/css/google-search.css', array(), '1.1', 'all');
wp_enqueue_script( 'bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'cse', get_template_directory_uri() . '/js/cse.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'headersfooters', get_template_directory_uri() . '/js/headersfooters.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Update:
Here's a screenshot of my page source
screenshot
have you tried to use this way? getting from web, also if you post the website link we can check this out e try to help,
wp_enqueue_style( 'boostrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' , array(), '', 'all' );
wp_enqueue_script( 'jquery','https://code.jquery.com/jquery-3.3.1.slim.min.js', array() ,null, true );
wp_enqueue_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js', array() ,null, true );
wp_enqueue_script( 'bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js', array('jquery') ,null, true );
and did you call in the
header.php
<?php wp_head();?>
footer.php
<?php wp_footer();?>
I usually do It
function carrega_scripts(){
wp_enqueue_style( 'style', get_template_directory_uri() . '/assets/css/style.css', array(), '1.0', 'all' );
wp_enqueue_style( 'boostrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' , array(), '', 'all' );
wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array() ,null, true );
wp_enqueue_script( 'jquery','https://code.jquery.com/jquery-3.3.1.slim.min.js', array() ,null, true );
wp_enqueue_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js', array() ,null, true );
wp_enqueue_script( 'bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js', array('jquery') ,null, true );
}
add_action( 'wp_enqueue_scripts', 'carrega_scripts');
here I have my style.css to customize all my layout and a main.js to create my scripts
<?php
// Adding CSS and JS files
function add_theme_scripts() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4', 'all');
wp_enqueue_style( 'main', get_template_directory_uri() . '/css/main.css', array(), '1.1', 'all');
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script('jquery');
wp_enqueue_script( 'isotope', get_template_directory_uri() . '/js/isotope.pkgd.min.js', array ( 'jquery' ), '3.0.6', true);
wp_enqueue_script( 'imagesloaded', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array ( 'jquery' ), '4.1.4', true);
wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array ( 'jquery' ), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
?>
All scripts and CSS files are loaded properly except jQuery. But wp_enqueue_script('jquery') worked for me in the past.
Wordpress by default register jquery for you but if you like to re-enqueue it then here is a code for it
add_action('wp_enqueue_scripts', 'enqueue_script_jquery');
function enqueue_script_jquery() {
wp_enqueue_script('jquery');
}
you can also enqueue different version of jquery but it is better to de-register other versions to avoid conflicts
for other version do like this in the function above
add_action('wp_enqueue_scripts', 'enqueue_script_jquery');
function enqueue_script_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.js', array(), null, true);
}
These Enqueue script I want to load these code on HTML in a specific page. For me its not working. I implement the code by activating child theme
function child_post_themes_styles() {
wp_enqueue_style( 'reset_css', get_template_directory_uri() . '/css/resetx.css' );
wp_enqueue_style( 'style_css', get_template_directory_uri() . '/css/stylex.css' );
}
add_action( 'wp_enqueue_scripts', 'child_post_themes_styles' );
function child_post_themes_js() {
wp_enqueue_script( 'modernizer_js', get_template_directory_uri() . '/js/modernizerx.js', '', '', false );
wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/mainx.js', '', '', false );
wp_enqueue_script( 'jquery2_js', get_template_directory_uri() . '/js/jquery-2.1.1x.js', 'array('jquery')', '', true );
wp_enqueue_script( 'jquerymobile_js', get_template_directory_uri() . '/js/jquery.mobilex.custom.min.js', 'array('jquery')', 'jquery2_js', '', true );
}
add_action( 'wp_enqueue_scripts', 'child_post_themes_js' );
function child_post_themes_styles() {
wp_enqueue_style( 'reset_css', get_stylesheet_directory_uri() . '/css/resetx.css' );
wp_enqueue_style( 'style_css', get_stylesheet_directory_uri() . '/css/stylex.css' );
}
add_action( 'wp_enqueue_scripts', 'child_post_themes_styles' );
function child_post_themes_js() {
wp_enqueue_script( 'modernizer_js', get_stylesheet_directory_uri() . '/js/modernizerx.js', '', '', false );
wp_enqueue_script( 'main_js', get_stylesheet_directory_uri() . '/js/mainx.js', '', '', false );
wp_enqueue_script( 'jquery2_js', get_stylesheet_directory_uri() . '/js/jquery-2.1.1x.js', 'array('jquery')', '', true );
wp_enqueue_script( 'jquerymobile_js', get_stylesheet_directory_uri() . '/js/jquery.mobilex.custom.min.js', 'array('jquery')', 'jquery2_js', '', true );
}
add_action( 'wp_enqueue_scripts', 'child_post_themes_js' );
get_template_directory_uri will always refer to the parent theme folder for assets.
get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).
You can create the file functions.php in child theme folder.
After put the function on functions.php file in child theme folder
add_action( 'wp_enqueue_scripts', 'child_post_themes_styles' );
function child_post_themes_styles() {
wp_enqueue_style( 'reset-css', get_template_directory_uri().'/css/resetx.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri().'/css/stylex.css' );
wp_enqueue_script( 'modernizer-js', get_bloginfo( 'stylesheet_directory' ).'/js/modernizerx.js', array( 'jquery' ), '', false );
wp_enqueue_script( 'main-js', get_bloginfo( 'stylesheet_directory' ).'/js/mainx.js', array( 'jquery' ), '', false );
wp_enqueue_script( 'jquery2-js', get_bloginfo( 'stylesheet_directory' ).'/js/jquery-2.1.1x.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquerymobile-js', get_bloginfo( 'stylesheet_directory' ).'/js/jquery.mobilex.custom.min.js', array( 'jquery' ), '', true );
}
I can't enqueue scripts after jquery so that the Dollar sign ($) will be defined
I also tried to register and than enqueue, tried to put the scripts on footer (wp_enqueue_script( 'name', 'url', '', true );).
tried to hook it with add_action( 'plugins_loaded', 'xb_addScripts' ); and/or with add_action( 'wp_enqueue_scripts', 'xb_addScripts' );
with or without version #.
function xb_addScripts(){
//enqueue scripts
wp_enqueue_script( 'xsite_a_js', plugins_url('xSITE-crm/inc/xsite_a_js.js') , array('jquery'), '', false );
wp_enqueue_script( 'jquery_ui', plugins_url('xSITE-crm/inc/jqUI/jquery-ui.min.js') , array('jquery'), '', false );
wp_enqueue_script( 'imgUpload', plugins_url('xSITE-crm/inc/imgUpload.js') , array('jquery'), '', false );
wp_enqueue_script( 'xb_fGenerator', plugins_url('xSITE-crm/inc/xb_fGenerator.js') , array('jquery'), '', false );
wp_enqueue_script( 'xsite_date', plugins_url('xSITE-crm/inc/xsite_dateObj.js') , array('jquery'), '', false );
wp_enqueue_script( 'bootstrap_min', plugins_url('xSITE-crm/inc/js/bootstrap.min.js') , array('jquery'), '', false );
wp_enqueue_script( 'jq_ui_widget', plugins_url('xSITE-crm/inc/jQuery-File-Upload/js/vendor/jquery.ui.widget.js') , array('jquery'), '1.0.0', false );
wp_enqueue_script( 'jq_iframe_transport', plugins_url('xSITE-crm/inc/jQuery-File-Upload/js/jquery.iframe-transport.js') , array('jquery'), '1.0.0', false );
wp_enqueue_script( 'file_upload', plugins_url('xSITE-crm/inc/jQuery-File-Upload/js/jquery.fileupload.js') , array('jquery'), '1.0.0', false );
//enqueue styles
wp_enqueue_style( 'bootstrap_min', plugins_url('xSITE-crm/inc/css/bootstrap.min.css'),'','1','' );
wp_enqueue_style( 'bootstrap_theme_min', plugins_url('xSITE-crm/inc/css/bootstrap-theme.min.css'),'','1','' );
wp_enqueue_style( 'xsite_a_style', plugins_url('xSITE-crm/inc/xsite_a_style.css'),'','1','' );
wp_enqueue_style( 'xb_form_style', plugins_url('xSITE-crm/join/xb_form_style.css'),'','1','' );
wp_enqueue_style( 'jq_css', plugins_url('xSITE-crm/inc/jqUI/jquery-ui.min.css'),'','1','' );
}
When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode
Few ways around it:
jQuery(document).ready(function ($)
{
//your stuff
});
or
var $j = jQuery;
$j('.my_class').show();
or
jQuery('.my_class').show();