The best way to include CSS on a WordPress theme in 2018

The best way to include CSS on a WordPress theme in 2018

05

Dec

The best way to include CSS on a WordPress theme in 2018

Wednesday December 5, 2018 Gilblas Ngunte Possi
The best way to include CSS on your WordPress theme in 2018 is by using functions. In fact, WordPress provides a function structure that you can use to add CSS and JS easily. And using this function will not only help to improve your website performance; but enable you to collaborate with other third-party plugins. As an example, when you use plugins like Fast Velocity Minify to minify your CSS and JS files, the process will only work with all the scripts and stylesheet added through functions. That also applies with most of the plugins that use best and recommended practices.

How to use functions to include CSS on a template?

WordPress uses wp_enqueue_style to call and display styleSheet on your website through functions. The use of wp_enqueue_style will be similar to the code below. [code] wp_enqueue_style( 'external', get_template_directory_uri(). '/css/external.css', false, false ); [/code]

Explanation wp_enqueue_style

in the expression above, you will see pieces of information such as "external", "get_template_directory_uri()".
  • "external"  is the Name of the stylesheet and it Should be unique.
  • get_template_directory_uri() print the path to your template (for example https://example.com/wp-content/themes/yourtheme)
  • "/css/external.css" is the relative path to the stylesheet called external.css
A recommended reading about the function wp_enqueue_style is available on the website developer.wordpress.org. If you don't understand much about PHP development, don't worry; just duplicate the code and replace.  'external' by a name you will like to give to your CSS and  '/css/external.css' by the path to your stylesheet.

A practical example on where to use wp_enqueue_style

Let assume that you have some styling changes to do on your existing WordPress website. Some of those changes might require to change the colors, resize images, change font size ... In that case, instead of inlining your code or adding it in a CSS file that you call at the header.php, the best practice will require to either add it on the last CSS files on the list of CSS on your website. Alternatively, you can create a custom CSS file called custom.css (for example). Once you created your custom file, there are two options:
  • The function to call the CSS and JS already exist in the file functions.php of your template

To verify if the function exists, check if there is something similar to this in your functions.php file [code] add_action( 'wp_enqueue_scripts', 'something' ); [/code] Where "something" is the name of the function used to include CSS and JavaScript. If that is the case, you will surely see above that line some calls on your Script and StyleSheet (often with the functions wp_enqueue_style and wp_enqueue_script). If you are able to locate, you can duplicate one of the lines with wp_enqueue_style and create your own. For example; let assume that among your stylesheet you have a  call similar to the one below : [code] wp_enqueue_style( 'external', get_template_directory_uri(). '/css/external.css', false, false ); [/code] You can change external by custom and external.css by custom.css (providing that you placed custom.css in the folder CSS of your template. Once that is done, make sure to place your code after the last stylesheet call. That is because you want your changes to overwrite the existing style. You will end up having something like this : [code] .... wp_enqueue_style( 'external', get_template_directory_uri(). '/css/external.css', false, false ); wp_enqueue_style( 'custom', get_template_directory_uri(). '/css/custom.css', false, false ); [/code]
  • The function to call the CSS and JS is not in your functions.php file

In this case, there are either include css and js at the footer or header. You can also check for the style.css to see if your stylings are a call from there. For a more technical person, I will recommend moving them from where there are and using the function for that. Otherwise, you can follow this tutorial to create your own function to call your file custom.css.  The code to call style and js with a function is as below: [code] function callin_scripts() { ... wp_enqueue_style( 'font', get_template_directory_uri(). '/assets/css/final/stylesheet.css', false, false ); ... wp_enqueue_script( 'jquery', get_template_directory_uri().'/assets/js/jquery-3.3.1.min.js', false, false, true ); } add_action( 'wp_enqueue_scripts', 'callin_scripts' ); [/code] The idea behind creating your own function will be to use something similar to the example above, In the process, the only parameter that you need to replace are:
  • 'font' and 'jquery' with your own Name of the stylesheet/Script.  Make sure it Should be unique.
  • '/assets/css/final/stylesheet.css' with the relative path to your stylesheet
  • callin_scripts with your own function name

Alternative ways to include CSS on a WordPress theme

There are various methods to call CSS and JavaScript on a web page. However, with CMSs like WordPress, it is important to do it the right way. The reason is that there are millions of people working daily to bring their contributions. And as such, following a guideline help to avoid duplicate information or performance issues. These are alternative ways to include CSS :
  • Inline styling in the code of content.

In this case, you just call the style to a specific tag. For example, let assume that you have a title "This is the best food" that is within the h1 tag. And let further assume that the title is in black and you want to change the color to red... Putting your information inline will mean to call CSS directly in your h1 tag as illustrated in the example below: [code] <h1 style="color:#dc3545">This is the best food</h1> [/code] Note that, inline CSS is applied locally, and is not really recommended because it has an impact on the SEO. Moreover, if you want to apply the same color to many lines of your code, creating a class might be a better option.
  • Adding Style at the header of the website

CSS style added at the header of a template is global. In fact, you can call anywhere on your website without having to redefine it. In order to add a style at the header, you need to define either a "Class" or an "id". Personally, I prefer a class because you can call it as many time as you want on a single page. Whereas, with an "id", you can use it only once per page. If we come back to our previous example of "This is the best food", using styling at the header of your template will look like this. (this segment of code is to go in your file header.php) once you define the style to change the color to red at the header of your Wordpress template, you can call it on your tag, by using either class="changecolor" (if you used the .changecolor) or id="changecolor" (if you used #changecolor). Even though proceeding this way is better than the inline method, it is the best approach for WordPress.
  • Adding CSS in the file style.css of your WordPress theme

WordPress recognizes the style.css under the main directory of your template as a file to add your styling information.  The file style.css is also used to add extra pieces of information about the template. You can, for example, add data like the name of the theme, the author, description... In order to add your styles in the file style.css, you need to use the attribute @import follow by the path/url to your css files. For example, if your css files are located in the folder asset; i.e. for the stylings color.css, data.css ..., Adding CSS in style.css will still work but most of the plugins don't recognize those files when it comes to optimization or security. For example, if you want to use some plugins like Fast Minify Velocity, to minify your CSS files, all the stylings URL included in style.css  will not be minified. If you need personalized advice on how to build a WordPress theme, please contact us.
Stay Updated

Get the latest updates and offers.