Enqueueing CSS into WordPress functions.php does not load styles fully

Question

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');
?>

score 0 · Answer 1 · answered Jan 09 '21 at 02:32

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

Thank you so much for taking the time to review my question and answer it :). Really appreciate it. I understand your point and will go through the above link to know more about the process. I have tried the above code you modified, but in that case the scripts (css/js) does not load at all. It shows the page in HTML mode, without any styling. Many thanks. — Rahul271, Jan 09 '21 at 06:58

Enqueueing CSS into WordPress functions.php does not load styles fully

1 Answers1

Learn more