YogeshChauhan . com

What is the correct way to enqueue multiple CSS files in WordPress?

in WordPress on August 7, 2020

Using wp_enqueue_style() function we can add multiple CSS files.

Syntax


wp_enqueue_style( string $handle, 
  string $src = '', 
  string[] $deps = array(), 
  string|bool|null $ver = false, 
  string $media = 'all' 
)

Parameters

$handle

(string) (Required) Name of the stylesheet. Should be unique.

$src
(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.

Default value: ''

$deps
(string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on.

Default value: array()

$ver
(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes.

If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$media
(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.

Default value: 'all'

Proper way to styles


function namespace_theme_stylesheets() {
    wp_enqueue_style( 'mamies-wafers-bootstrap-min',  get_template_directory_uri() .'/css/bootstrap.min.css', array(), null, 'all' );
    wp_enqueue_style( 'mamies-wafers-carousel',  get_template_directory_uri() .'/css/carousel.css', array(), null, 'all' );
    wp_enqueue_style( 'mamies-wafers-style', get_stylesheet_uri(), '', null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'namespace_theme_stylesheets' );

Credit: WP Dev

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

ALTER DATABASE in PostgreSQLPostgresWhy does MOV matter in IT or any kind of projects?MiscHow to Make CSS Lists Bullets Smaller?CSSHow to make WordPress main stylesheet (style.css)?WordPressHow to change CSS with jQuery?CSSSome SQL LIKE Operators We Need to Keep in MindSQL/MySQL