WordPress provides many different ways to customize your site. You can build a custom theme that is unique to your site or you can use an existing theme and tweak it to suit your needs and style.
In all these years of working with WordPress, I have had countless occasions when I had to add a little custom code to the site. If you are a web developer, then this does not seem like an issue at all. You just know where to add the relevant code and you also know how to troubleshoot it if it does not work.
For those of you who are not quite the developers, but would like to have fun with your site, WordPress makes it easy to add code snippets. There are many different ways to add custom CSS or JavaScript to your site. You can use a plugin, or the customizer (only for CSS) or dive into creating a child theme and get your hands dirty with some coding. Whatever method you choose, there are lots of options and good documentation to get you through.
Using the Customizer to add custom CSS:
The Customizer has been part of WordPress for a while now and we have all got used to adding CSS quickly. Go to Appearance -> Customize. In the customizer, there is an option for ‘Additional CSS’. Click on that and add all the CSS you need and save. This is by far the easiest way to add custom CSS to your theme.
This method is good if you need to change or tweak a couple of things on your site. If you want to add CSS for many sections on the site, using a child theme is better.
There is no option to add custom JavaScript in the customizer with the default WordPress theme. You will have to use some plugins. Some other themes might provide this feature.
Plugins for adding custom CSS and JS
There are a number of plugins that let you add custom code snippets to customize your site.
Custom Header Footer Scripts for Customizer enables you to add scripts to the header and footer of your theme via the customizer.
Simple Custom CSS and JS is my favorite one of all. It makes it very easy to add custom code and has a lot of features even in the free version. It also has options to add custom HTML.
CSS Hero is another plugin that can be used to tweak the CSS of your theme. This premium plugin lets you customize your site live. It gives you an easy interface to edit and see the changes as you are making them.
Using a child theme
There a lot of WordPress themes that you can use to build your site. Each theme gives you certain functionalities along with a certain look/design. If you choose a theme, that gives you the features you want for your site, but would like to change the look and style of it, child themes are best way to do it.
You can use child themes to use the functionality of the parent theme, but change the look and styles of your site. You can add/remove some functionality through the child theme if you like. Creating a child theme requires some knowledge of coding. There are some great tutorials that will guide you though the process of creating a child theme.
Here are some useful links for creating child themes.
- https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/
- https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
- https://developer.wordpress.org/themes/advanced-topics/child-themes/
Once you have a child theme in place, you can add new CSS and Js files by adding them to the child theme’s functions.php. You need to properly enqueue them.