Adding Custom Style Sheets to WordPress

Adding Custom Stylesheets to WordPress

Every WordPress theme has a specific layout that, when used properly, will make the site look best. With images that are properly sized, and some careful content management, a good theme can turn any content into a beautiful, responsive user experience.

Sometimes, though, we want to customize the theme in places that Theme Options doesn’t allow. For this, we often need to add a custom stylesheet (.css file)

Stylesheets at w3 schools

WordPress themes will have their own packet of stylesheets included, so we’ll just add an extra stylesheet to the existing /css folder.

First you’ll need to create and add your stylesheet to your site using FTP or your hosting platform’s file manager.

You can find more information about creating a stylesheet at the w3 schools link above.

  1. Connect to your website via FTP or through the file manager.
  2. Navigate to the /wp-content/themes/THEME NAME/css folder in your theme.

Viewing the /css folder through FTP:
CSS Folder

Viewing the /css folder through cPanel’s file manager:
File Manager

  1. Add your stylesheet to the /css folder.

Now that your stylesheet has been added to the server you need to add the function to WordPress to use the stylesheet you added.

  1. Navigate to Appearance > Editor, and find the functions.php file.
  2. At the bottom of this file, insert the following code (but make sure you change all the $values to match your site and files). WordPress has an internal function especially created to add styles and scripts to your theme, wp_enqueue_style. You can see it’s syntax below:


function safely_add_stylesheet() {
wp_enqueue_style('$stylesheetName.css',get_template_directory_uri().'$pathToStylesheet' );
}
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet');

0 Comments

Leave a Reply