WordPress enqueue scripts and styles

Question

I using an open source WordPress theme and want to remove the styles and scripts from header.php file and write them properly. I've added the following code to my functions.php file and nothing happens.

function smarter_scripts() {

wp_enqueue_style( 'smarter-bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'smarter-font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css' );
wp_enqueue_style( 'smarter-google-fonts-open-sans', '//fonts.googleapis.com/css?family=Open+Sans:600,400,300,700' );
wp_enqueue_style( 'smarter-google-fonts-josefin', '//fonts.googleapis.com/css?family=Josefin+Sans:400,600' );
wp_enqueue_style( 'smarter-style', get_template_directory_uri(). '/style.css' );

if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
//wp_deregister_script('jquery'); 
//wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2'); 
wp_enqueue_script('jquery');    
}
// load a JS file from my theme: js/theme.js
wp_enqueue_script('smarter_script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true);
wp_enqueue_script( 'smarter-bootstrap','//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array( 'jquery' ),  true );
}
add_action( 'wp_enqueue_scripts', 'smarter_scripts' );

Also, I can't figure out why when I add plugins, the CSS and JS files do not automatically load in the theme. I have to manually add the files to the header.php or footer.php files in order for the plugins to work. Does anyone know why this happens? (I am not a theme developer but I'm trying to fix a theme that my company is using.)

Reference:

WordPress: Loading multiple scripts with enqueue

wp_enqueue_script() only works when the theme actually calls the wp_head() function. Can you check to make sure the theme calls it? It would be between the <head></head> tags in the header.php file. — TheGentleman
That was missing. I added it and now it's working. Thank you! — MPUserr

Lemon Kazi Lemon Kazi · Accepted Answer · 2015-08-21T16:31:29

In function use this code.before function

 if ( ! function_exists( 'smarter_scripts' ) ) {

Then before closing this if condition place this code.

add_action( 'wp_enqueue_scripts', 'smarter_scripts', 99);

In your header.php file place below code before tag

<?php wp_head(); ?>

WordPress enqueue scripts and styles

1 Answers