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.

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

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() );

Here is the new line of code:

wp_enqueue_style( 'twentysixteen-mgdp2060', get_template_directory_uri() . '/css/mgdp2060.css', array( 'twentysixteen-style' ), '1.0' );

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 '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

...

See also

• WordPress Theme style sheet