Difference between revisions of "WordPress custom style sheet"

Revision as of 07:22, 29 September 2016

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. See WordPress functions.php.

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

See also

• WordPress Theme style sheet

External links