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
Related
<?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 enqueued my custom css in my theme file, but it's not showing any results. When I check the source file i.e. CTRL+U, it's showing my custom-css file, but my CSS file is not working.
function child_theme_scripts_styles() {
wp_enqueue_style( 'Awesome Font', get_stylesheet_directory_uri() . '/css/font-awesome.min.css', array(), '4.3.0' );
wp_enqueue_style('Bootstrap-css', get_stylesheet_directory_uri(). '/css/bootstrap.min.css');
wp_enqueue_script( 'bootstrap-min-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
wp_enqueue_script( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_scripts_styles' );
Any help?
you are using wp_enqueue_script to load the stylesheet file. Wordpress couldn't recognize your css file since you are linking with script.
Use this
function child_theme_scripts_styles() {
wp_enqueue_style( 'Awesome Font', get_stylesheet_directory_uri() . '/css/font-awesome.min.css', array(), '4.3.0' );
wp_enqueue_style('Bootstrap-css', get_stylesheet_directory_uri(). '/css/bootstrap.min.css');
wp_enqueue_script( 'bootstrap-min-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_scripts_styles' );
Replace
wp_enqueue_script( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
With
wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/css/custom.css' );
For Reference Visit
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
https://codex.wordpress.org/Function_Reference/wp_enqueue_script
Just discovered that #import isn't the most efficient way of importing stylesheets experimenting with enqueue. Does this make sense, trying to import several parent stylesheets in various folders:
<?php
/**
* Load the style sheet from the parent theme.
*
*/
function theme_name_parent_styles() {
// Enqueue the parent stylesheet
wp_enqueue_style( 'theme-name-parent-style', get_template_directory_uri() . '/style.css', array(), '0.1', 'all' );
wp_enqueue_style( 'theme-name-parent-style', get_template_directory_uri() . '/css/custom-admin-style.css', array(), '1', 'all' );
wp_enqueue_style( 'theme-name-parent-style', get_template_directory_uri() . '/css/flexslider.css', array(), '1', 'all' );
wp_enqueue_style( 'theme-name-parent-style', get_template_directory_uri() . '/css/thumbfx.css', array(), '1', 'all' );
wp_enqueue_style( 'theme-name-parent-style', get_template_directory_uri() . '/css/dynamic-css/options.css', array(), '1', 'all' );
// Enqueue the parent rtl stylesheet
if ( is_rtl() ) {
wp_enqueue_style( 'theme-name-parent-style-rtl', get_template_directory_uri() . '/rtl.css', array(), '0.1', 'all' );
}
}
add_action( 'wp_enqueue_scripts', 'theme_name_parent_styles' );
?>
First rule: follow the wordpress codex
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
}
Next time I will check the source first.
Solved, thanks for the troubleshoot #m1ro.
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' );