7. Step Two: CSS
RegisterYour CSS File w/ wp_register_style()
wp_register_style(
'my-css-file', // handle name
get_template_directory_uri() .‘/css/custom.css’,
// the URL of the stylesheet
array( 'bootstrap-main' ), // an array of dependent styles
'1.2', // version number
'screen', // CSS media type
);
wp_register_style( $handle, $src, $deps, $ver, $media );
8. Step Three: CSS
After registering our style file, we need to "enqueue" it to
make it ready to load in our theme's <head> section.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
9. Step Three: CSS
Two different ways to use wp_enqueue_style():
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
// if we registered the style before:
wp_enqueue_style( 'my-bootstrap-extension' );
// if we didn't register it, we HAVE to set the $src parameter!
wp_enqueue_style(
'my-css-file', // handle name
get_template_directory_uri() .‘/css/custom.css’,
// the URL of the stylesheet
array( 'bootstrap-main' ), // an array of dependent styles
'1.2', // version number
'screen', // CSS media type
);
10. Step Four: Use Actions
We can't just use the wp_enqueue_style() function
anywhere in our theme – we need to use "actions".There
are three actions we can use for various purposes:
// load css into the website's front-end
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
// load css into the admin pages
function mytheme_enqueue_options_style() {
wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
// load css into the login page
function mytheme_enqueue_login_style() {
wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' );
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
11. How to Properly Enqueue Scripts
in WordPress
Use these in functions.php: wp_register_script() and
wp_enqueue_script();
function wpb_adding_scripts() {
wp_register_script(‘testme-custom-script', get_template_directory_uri() .‘/js/
custom_sript.js’, array(‘jquery’), '20151215', true);
wp_enqueue_script('testme-custom-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );