Handling Custom CSS in WordPress

A common request of GiveWP users is how to customize the look and feel of their GiveWP forms. Because GiveWP form styles are kept to a minimum they are relatively easy to apply a fully customized look to. Fortunately, adding custom CSS to your WordPress website is now fairly straightforward.

Over the years of WordPress development, there was no single way to add custom CSS to your site. This led to a lot of bad practices. Here are a few of the problematic solutions that were used in the past:

Problem #1: Add it to your theme’s style.css file

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 can be more rare than plugin updates, but it’s not worth the risk since theme updates can be security-related.

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 #2: Add it to your plugin’s stylesheet

Because adding to the theme stylesheet results in the plugins overriding them, some resort to adding the custom CSS styles directly to the plugin’s stylesheets. This is the same problem as adding to your theme stylesheet: the plugin will update and you’ll lose your changes, or there are other plugins that are loaded after your styles that override the style on that particular plugin.

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 is relatively easy as long as you know where to look.

Bonus Problem: GiveWP Multi-Step form templates load in an iframe

WordPress has a long history of struggle between plugin authors and theme authors when it comes to handling style. CSS stands for “Cascading Style Sheets” which is a clue that the “Cascade” is important. Anything that happens farther down the cascade overwrites the things that have happened before it.

That sets the stage for plugin authors and theme authors to try to add their styles last, so that theirs take effect. You can also “hack” the cascade using declarations like !important which trigger the browser to obey a style even if it’s not the last one in the cascade. With thousands of themes, and millions of possible theme/plugin combinations, you can probably see how that becomes a problem.

GiveWP’s legacy form templates load all of their styles alongside the theme and other plugins, meaning that they are susceptible to all of the problems mentioned above, and the method for adding additional styles is below in the “Customizing Legacy Form and non-GiveWP site elements” section.

The Multi-Step form template takes a different approach.

The Multi-Step template loads in an iframe (think of it like a page within the page), to make it more resistant to changes made in the theme’s CSS.

The iframe ONLY loads styles from GiveWP. That’s helpful for avoiding theme conflicts, but makes customizing the style of the form a bit more difficult. Instead of adding CSS in the methods outlined below, you need to inject that CSS into the iframe in order to customize the style.

The method of injecting that CSS into the iframe involves PHP, and should only be done by someone familiar with adding custom PHP to WordPress websites. For more on that process, see [the GiveWP guide on adding custom functions to your site.

Beyond the fact that you need custom PHP to insert the CSS, you have two options on how to do that.

The first is for small changes, and adds some style inline directly to the form in the iframe:
https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/style-givewp-iframes.php

On that one, you modify lines 13-17 with your own CSS.

The other is for enqueueing your own CSS via a custom stylesheet:
https://github.com/impress-org/givewp-snippet-library/blob/master/form-customizations/css-customizations/enqueue-style-for-givewp-iframes.php

To utilize this second snippet, create a file named “form-template-styles.css” and place it within your theme or child theme’s directory in the file structure.

The benefit of the second option is that it keeps the style tucked away in the theme files. The perhaps obvious downside is that switching the theme means moving the file, or losing the styles.

Note that both snippets will still need lots of !important declarations, because even when enqueued in an iframe, GiveWP’s code is fairly “defensive” so that theme styles can’t touch it.

Pro Tips for starting out with CSS

1—Confirm the styles are working

Any time you begin attempting to customize styles, a great first step is to make sure that the styles are in fact being applied to the site. To confirm quickly that you are in fact styling an actual thing, choose something audacious like giving the form a red outline. This snippet will work for that:

.give-form-wrap {

  border:4px solid red;

}

Since GiveWP forms are not normally styled with a border at all, you don’t need an !important declaration.

2—Use a Staging or test site

More of a general web-development best practice, but changing styles on a site in an unpredictable way can lead to problems for visitors on the live site. Use a staging site (many hosts provide them for free) or LocalWP to create test installations.

Once you get the styles just how you’d like them, make the same changes to the live site.

Customizing Legacy Form and non-GiveWP site elements

We recommend all GiveWP users use the Customizer for styling GiveWP forms. It has several benefits that we really like:

Your styles won’t be lost during theme or plugin updates.
Your styles will always be applied correctly.
When you’re looking at a GiveWP form in the Customizer, you can see your changes applied live (See screencast below).

You can find the Customizer in “WP-Admin > Appearance > Customize > Additional CSS”.

See our screencast here for an example:

Adding custom styles in the Customizer is a convenient solution that satisfies most use cases, however be aware that these styles will be deactivated if you switch themes. For a more permanent solution, see the plugins listed below.

What if my Customizer is Disabled?

Sometimes the Customizer has been disabled on a website, or some themes disable the Customizer’s additional CSS module. If you don’t see the “Customize” sub-menu item, or if there’s no spot to add additional CSS, we recommend using one of the following plugin options instead:

Simple CSS — This works great and has a dedicated settings page so that you know it will be available for you. The downside is you won’t see your new styles live, you’ll have to add them, then preview your live site.
WP Add Custom CSS — This also has a dedicated settings page, but it additionally adds a Custom CSS section to every page and post on your site. This is useful when you want your custom CSS applied only to that individual page or post. This applies to the single GiveWP form pages as well.