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
Related
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);
}
I can't figure out what's wrong with my code. This is it so far:
function reg_scripts() {
wp_enqueue_style( 'bootstrapstylemin', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrapstyleresmin', get_template_directory_uri() . '/bootstrap/css/bootstrap-responsive.min.css' );}
add_action('wp_enqueue_scripts', 'reg_scripts');
function wpbootstrap_scripts_with_jquery(){
wp_enqueue_script( 'custom-scriptes', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.js', array('bootstrap-jquery'));
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
I am sorry, there is a screenshot of the console
After I saw this errors, I removed the CDN's, but still not working.
try this;
function reg_scripts() {
wp_enqueue_style( 'bootstrapstylemin', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(), '3.4.6' );
wp_enqueue_style( 'bootstrapstyleresmin', get_template_directory_uri() . '/bootstrap/css/bootstrap-responsive.min.css', array(), '1.0.0' );
}
add_action('wp_enqueue_scripts', 'reg_scripts');
function wpbootstrap_scripts_with_jquery(){
wp_enqueue_script( 'custom-scriptes', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.js', array('bootstrap-jquery'), '3.4.6', false);
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
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'm trying to link my WordPress Stylesheet to child theme at different directory/sub folder, it doesn't seems to work. Below are the code where I place it at functions.php
function theme_add_bootstrap()
{
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . 'assets/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . 'assets/css/custom.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . 'assets/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
I try putting #import statement inside style.css, it doesn't work also.
Use this:-
function theme_add_bootstrap()
{
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/assets/css/custom.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
Remember that get_template_directory_uri() will give you directory uri path with no /. SO you need to add / after this function.
Hope this will work for you.