In some blog posts on this site and many others you'll find yourself coming across a tutorial or how-to post explaining how you can something programatically. In such post you may find some PHP, CSS and/or JavaScript (JS) snippets.
Knowing how to implement those snippets is usually not covered in such post, with good reason. Explaining that over and over in each post would become superfluous quickly, plus there's enough to cover a whole post about it.
I'll cover the 4 different methods of implementation in this post. For each implementation I'll cover how you can use it, and when its recommended to use that method.
1. Adding CSS Through Your Theme
When going for this method, make sure you're using a child theme, without that your changes will be overridden whenever you update your theme.
Every theme is required to have a style.css file with a specific header in order to be recognized by WordPress as a valid theme. We can use the existence of this file to our advantage and put any styles you want in here.
When to use: The style.css file usually is already included when loading a page, so any added styles will have a minimal impact on performance. This is perfect no matter if you have a little bit or a ton of CSS to add.
This is my preferred method when the style is not related to a specific plugin you've build.
2. Adding CSS Through PHP
Adding CSS through PHP can also be divided into different methods of implementation. You can either put everything in a dedicated .css file, or you can output it directly on the page.
Also the location where this lives can be decided, either in your theme or a custom plugin. The implementation of the PHP code itself remains mostly the same.
When to use: This method of implementation also requires some knowledge of PHP or at least how to implement a PHP code snippet.
Using a Dedicated CSS File
This implementation is ideal when you have a lot of CSS you want to add. For example when you have CSS that is directly related a plugin this is the perfect method.
When to use: This implementation works best if you have a good amount of CSS you want to add.
This is my personal preferred method as it gives the best control an possibilities of optimizing your styles, using my own preferred editor and – if you want to go a step further – use a CSS preprocessor (thats a subject for another post).
Output Directly
Using the code below in either your (child) theme's functions.php file or your custom plugin. This outputs the styles directly on the page's source code.
add_action( 'wp_head', 'my_unique_css_func_name' );
function my_unique_css_func_name() {
?><style>
/* Your styles here */
</style><?php
}
When to use: If you find yourself in a scenario where you've build a plugin that requires only a little bit of CSS, this method can be very beneficial. This method prevents you from having another HTTP request on your website, which would be a waste of resources, even with HTTP/2 for just a few lines of CSS.
3. Adding CSS Through the Customizer
Since WordPress 4.7 a new section 'Additional CSS' was added to the Customizer (under the 'Appearance' menu). Within there you get a editor that allows you to add your own custom CSS with a big advantage of having a live-preview mode of your changes.
When to use: You can use this method of implementation when the snippet you're implementing is meant for only your current theme. Its less suitable when the changes should also carry over to any future themes.
The styles implemented in here are outputted directly only the page and are not optimized in any way. Because of this it I'd recommend to keep the input to a minimum or choose a different implementation method.
4. Using a CSS Plugin
There are many plugins on the market that do this, the most basic one I've found is Simple Custom CSS. The advantage of implementing it through a plugin like this is that the styles will remain in tact when you change themes.
When to use: You can use this when having styles that should transfer between switching themes without having to manually copy them.
If you can use one of the other methods I'd recommend going with one of those. Using a plugin for something that you can easily do without is bad practice.