Enqueue Styles in WordPress Site

In wordpress sites its not very easy to enqueue styles in wordpress sites. We have to enqueue it through a function called wp_enqueue_style(). Lets explore it.

Basic Syntax

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle: It is name for current enqueue action. It is a handle for our style sheet and it should be unique.

$src: Here we will put the URL that points to our style sheet.

$deps: It is dependencies, here we can make a style sheet dependent of another by putting that main stylesheet’s handle here.

$ver: It is version of your style sheet.

$media: It tells the browser that on which media this stylesheet should run. Either on print or screen.

Enqueue The Main Theme Stylesheet

Main stylesheet is the style.css file that every theme has on the root. Lets enqueue it in a function.

function my_scripts() {
	wp_enqueue_style( 'main-styles', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

Enqueue Conditional Stylesheets

For conditional stylesheet lets add some conditions in our my_scripts() function.

function my_scripts() {
	if (is_page_template( 'page-templates/page-nosidebar.php' )) {
		wp_enqueue_style( 'style-nosidebar', get_template_directory_uri(). '/css/nosidebar.css' );
	} else {
		wp_enqueue_style( 'style-sidebar', get_template_directory_uri(). '/css/sidebar.css' );
	}
	
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );