This tutorial talks about some basic and important steps one should take before designing a feature-rich website for WordPress. Using CSS variables is an important one but how do we manage all those styles and scripts in the website?
Although You can manage them directly on the theme, It is recommended to use child themes or create a plugin specific for the customizations. I have created the Customizations Plugin to do the basic work for you.
Download the Customizations Plugin. Just Install and activate and you are ready to go.
Before jumping on the other options, It is highly recommended to understand how and where you should add your style or script to work properly.
There are two recommended places to put your styles/script. 1. Under <Head> before <body> under <HTML> and 2. before </body> and </HTML> closing .
WordPress Enqueue scripts in the footer by default. However, to most of the scripts work, we need two files 1. main-script.js and 2. script-init.js file. The main-script.js file should be in the <Head> and the script-init.js file should be in the footer, before </body></html>
You can always enqueue the main script before </body></html> but make sure the init script is after the main script to work.
Make sure Your code remains in the correct position to work. A stylesheet can be added in the header or footer and that totally depends on after which file you want to enqueue it because it can be overwritten when enqueued before a different stylesheet that has some codes for the same classes.
Here are some of the options you can look into:
For Beginners
If You do not want to make changes in a theme or plugin file, You can use a plugin like Header Footer Code Manager for basic Styles and scripts or Code Snippets plugin for advanced edits.
However, it is highly recommended to make changes using SFTP/FTP so you can revert as soon as it gives an error.
Using Theme
If You prefer to use them in child-theme, You can enqueue the styles and scripts using the following code:
//* Load custom stylesh and scripts
add_action( 'wp_enqueue_scripts', 'load_custom_styles_scripts' );
function load_custom_styles_scripts() {
// custom.css
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0' );
// custom.js
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), '1.0.0', false );
}
Using Plugin
If You have a plugin to store your codes, You can use the following codes to add custom.css and custom.js files.
//* Load custom stylesh and scripts
add_action( 'wp_enqueue_scripts', 'load_custom_styles_scripts' );
function load_custom_styles_scripts() {
// custom.css
wp_enqueue_style( 'custom-style', plugin_dir_url( __FILE__ ) . '/custom.css', array(), '1.0.0' );
// custom.js
wp_enqueue_script( 'custom-script', plugin_dir_url( __FILE__ ) . '/custom.js', array('jquery'), '1.0.0', false );
}
To learn more about this, check out some free articles on Designody on How to enqueue styles and scripts.