WordPress custom style sheet
In WordPress, you can create a custom style sheet to supplement or override the existing styles.
There are two parts to this process:
- Create an external style sheet for your custom styles.
- Add code to the
functions.php
file which loads the external style sheet.
This example uses the WordPress 2016 Theme.
Contents
External style sheet
In your WordPress Theme folder, find the folder named css
(or create the folder, if it does not exist in your Theme).
In the css
folder, create an external style sheet named something.css
(this example uses mgdp2060.css
.
Enter your custom style rules in the external style sheet, and upload the server.
functions.php
Most WordPress Themes include a file named functions.php
. If your Theme does not include functions.php
, create the file.
WordPress 2016 example
In the WordPress 2016 Theme, open the functions.php
file in a text editor, and locate this code:
function twentysixteen_scripts() { // Add custom fonts, used in the main stylesheet. wp_enqueue_style( 'twentysixteen-fonts', twentysixteen_fonts_url(), array(), null ); // Add Genericons, used in the main stylesheet. wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.4.1' ); // Theme stylesheet. wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
Add code for custom style sheet
Here is the new line of code:
wp_enqueue_style( 'twentysixteen-mgdp2060', get_template_directory_uri() . '/css/mgdp2060.css', array( 'twentysixteen-style' ), '1.0' );
Add new code as shown below:
function twentysixteen_scripts() { // Load the MGDP2060 specific stylesheet. wp_enqueue_style( 'twentysixteen-mgdp2060', get_template_directory_uri() . '/css/mgdp2060.css', array( 'twentysixteen-style' ), '1.0' ); // Add custom fonts, used in the main stylesheet. wp_enqueue_style( 'twentysixteen-fonts', twentysixteen_fonts_url(), array(), null ); // Add Genericons, used in the main stylesheet. wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.4.1' ); // Theme stylesheet. wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() ); // Etc.
Details
Details of the new line of code:
- The phrase
'twentysixteen-mgdp2060'
is a unique reference to the custom style sheet. - The phrase
'/css/mgdp2060.css'
is the path to your custom style sheet file. - The phrase
array( 'twentysixteen-style' )
indicates the primary external style sheet (your custom style sheet is dependent on the primary style sheet).- The phrase
'twentysixteen-style'
depends upon the Theme, see Dependencies below. - Different themes will use different dependencies.
- The phrase
- The phrase
'1.0'
is a version number, which you can update as needed- Indicates the version number
- Changing the version number prevents server-side caching
Dependencies
Specifying a dependency causes the custom style sheet to appear after the dependency.
In this example, the custom style sheet is dependent upon the WordPress Theme style sheet, because we want the custom style sheet to appear after the Theme style sheet, so our custom styles override Theme styles.
// Theme stylesheet. wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );
The above example uses the wp_enqueue_style()
function.
This function has two arguments, separated by a comma:
- 'twentysixteen-style' - this is a unique name (a "handle") for a file in the WordPress file queue.
- get_stylesheet_uri() - this is the WordPress function
get_stylesheet_uri()
, which returns the URI the Theme folder
WordPress child themes
An alternative approach is to use a WordPress Child Theme.
Creating a custom style sheet is a relatively advanced technique, compared with Child Themes.