How to add custom css file in WordPress?

One of the best thing about CSS is plug-able components, however this comes with following certain way of WordPress. Adding CSS from external files.

Adding Bootstrap CSS and JS files to WordPress


function my_scripts_enqueue() {

wp_register_script( 'jquery-slim-js', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'), NULL, true );
wp_register_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'), NULL, true );
wp_register_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'jquery-slim-js' );
wp_enqueue_script( 'popper-js' );
wp_enqueue_script( 'bootstrap-js' );

wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Adding custom CSS file to WordPress theme.

Now let us create a folder called css inside theme folder “twentyseventeen”. Following is the code to custom “carousel.css file.


function my_scripts_enqueue() {

wp_register_script( 'jquery-slim-js', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'), NULL, true );
wp_register_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'), NULL, true );
wp_register_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );
wp_register_style( 'carousel-css',get_template_directory_uri().'/css/carousel.css', array() );

wp_enqueue_script( 'jquery-slim-js' );
wp_enqueue_script( 'popper-js' );
wp_enqueue_script( 'bootstrap-js' );

wp_enqueue_style( 'bootstrap-css' );
wp_enqueue_style( 'carousel-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Adding custom CSS toWordPress child theme

But if you are using child them above will not work, you need to use following. Please note that, you need to useget_stylesheet_directory_uri() instead of get_template_directory_uri()


function my_scripts_enqueue() {

wp_register_script( 'jquery-slim-js', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'), NULL, true );
wp_register_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'), NULL, true );
wp_register_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );
wp_register_style( 'carousel-css', get_stylesheet_directory_uri().'/css/carousel.css', array() );

wp_enqueue_script( 'jquery-slim-js' );
wp_enqueue_script( 'popper-js' );
wp_enqueue_script( 'bootstrap-js' );

wp_enqueue_style( 'bootstrap-css' );
wp_enqueue_style( 'carousel-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.