CODEWITHSUNDEEP
javascriptphpwordpress
monsty
monsty

Reputation: 87

CSS and scripts not enqueuing in Wordpress

I'm trying to enqueue my styles and scripts to my Wordpress theme but when I refresh my page, it's completely blank. From what I have searched, I seem to be writing the code correctly in functions.php. Can someone check if there is any errors, or tell me if there is a specific place to insert this code?

This is what I have:

function BI_Scripts() {

    wp_register_style( 'bling_css', get_template_directory_uri() . '/css/style.css' );
    wp_register_style( 'Font_Awesome', get_template_directory_uri() . '/css/font-awesome.css' );
    wp_register_style( 'theme_font', 'https://fonts.googleapis.com/css?family=Crimson+Text|Lobster|Oleo+Script:700|Roboto:400,700' );
     wp_register_script( 'jQuery_js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array( 'jquery' ), '3.1.1', true );
    wp_register_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.7', true );
    wp_register_script( 'main_js', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );

    wp_enqueue_style( 'bling_css' );
    wp_enqueue_style( 'Font_Awesome' );
    wp_enqueue_style( 'theme_font' );
    wp_enqueue_script( 'jQuery_js' );
    wp_enqueue_script( 'bootstrapjs' );
    wp_enqueue_script( 'main_js' );
}
add_action( 'wp_enqueue_scripts', 'BI_Scripts' );

EDIT: This is what is in my header

!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

<?php wp_head(); ?>

</head>

Upvotes: 0

Views: 1417

Answers (4)

monsty
monsty

Reputation: 87

Grateful for all your help. I tried everything, but I eventually figured it out on my own.

Wordpress comes with JQuery. So I had to deregister it in functions.php first and then register and enqueue my own jQuery file. After doing that, there was no longer a blank screen.

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6328

"wp_register_style" and "wp_register_script" both contains parameters and it's very important to use them in correct order to work this function correctly.

You can use it like following:

wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/main.js', array(), '3.3.7', true )

Upvotes: 0

Brickr
Brickr

Reputation: 134

Most common problem is that your theme is not using wp_head AND wp_footer in header.php and footer.php.

Example: header.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<?php
  wp_head();
?>
<body>

Without wp_head() AND wp_footer() Wordpress cannot hook using wp_enqueue_scripts hook as it does not fire.

Upvotes: 0

Purvik Dhorajiya
Purvik Dhorajiya

Reputation: 4870

If you have activated child theme then use get_template_directory_uri() functions.

If you have activated parent theme then use get_stylesheet_directory_uri() functions.

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).

Child theme example:

wp_enqueue_style( 'my_child_styles', get_stylesheet_directory_uri().'/style.css' );

Parent theme Example

wp_enqueue_style( 'my_parent_styles', get_template_directory_uri().'/style.css' );

Upvotes: 0

Related Questions