A common request of Give users is how to customize the look and feel of their Give forms. Because Give form styles are kept to a minimum they are relatively easy to apply a fully customized look to. But knowing how to apply custom CSS styles in WordPress is not always straightforward. This article provides tools and techniques for applying custom CSS styles to your WordPress website.
Adding custom CSS styles to your WordPress website should be relatively straight-forward, but it’s most often a bit of a challenge. In order to understand why, you need to understand just a little of why it can be challenging.
Problem #1: Themes Get Updated Too
If you add custom CSS styles into your parent theme’s style.css file, you’ll lose those changes the next time your theme author pushes out an update of that theme. Theme updates are can be more rare than plugin updates, but it’s not worth the risk since theme updates can be security related.
Problem #2: Styles get loaded in different order
Even if your theme has a custom CSS field for adding these styles, they are sometimes loaded before a plugin’s styles which means the plugin styles will get the priority. This is why some plugin author’s tell you to add `!important` at the end of your custom CSS style rules (not a good practice).
Problem #3: What in the world is “Enqueuing”?
If you ask a developer how to apply custom CSS styles they’ll probably tell you to enqueue a new stylesheet with a late priority in a custom functionality plugin. Did you follow that? Don’t worry, 95% of all WordPress users don’t follow it either. You shouldn’t need to worry about those things to apply simple styles to your website.
Applying simple styles to your website can be relatively easy, as long as you understand how it works.
Understanding Theme Specific Styles
So how should you add custom CSS styles to your WordPress website? Well… it depends. It depends primarily on what you are trying to stylize. For example, maybe you have a child theme which is customizing your parent theme. The styles you want to add are specific to that parent theme. In that case, adding those styles to your styles.css file in your child theme is the best.
But maybe what you want to customize is not specific to your theme. For example, many people use Gravity Forms for their contact forms. If you wanted to apply specific styles to your Gravity Forms that weren’t dependent on your theme then putting those styles in your Child theme’s styles.css file would mean that you would lose those styles once you switched to a new theme.
The same is with Give. It’s likely that how you want to style your Give forms is fairly “theme agnostic”, meaning you’ll want those styles to stay even if you change your theme. So where do you put those then?
Two Tools for Theme Agnostic CSS Styles
Jetpack is a very powerful plugin with a growing list of modules. It’s biggest strength is that it is able to leverage a lot of the power of the global wordpress.com infrastructure to optimize certain features of your site if you like.
One small optional module it contains is called Custom CSS. It gives you a simple textarea to insert all of your custom CSS styles into. The beauty of this little tool is that Jetpack has a way of making sure that this stylesheet is ALWAYS served up last, which means if you want to over-write any styles, whether your theme or any plugins styles, this will do the trick without the pesky `!important` attribute.
Modular Custom CSS is a lot less known than Jetpack, but it has become a favorite of our Give team. It adds two fields into the Customizer (look under “Appearance > Customize” after activating this plugin). What that means is when you add your custom CSS styles into one of those fields, you’ll see your changes reflected on your site immediately. Meaning, right before your eyes without a page refresh. It’s really handy.
But why two fields? One is for “theme specific” styles, and the other is “theme agnostic” styles. You see? That’s why you needed to understand a bit about theme styles to get to the final point. This plugin allows you to do either type of custom CSS.
With the Modular Custom CSS plugin you can see your custom CSS changes happen immediately, without a page refresh.
In conclusion, if you are trying to apply custom styles to our Give forms, we highly recommend the Modular Custom CSS plugin. If you are customizing your parent theme, then keep those in your child theme’s styles.css file.