Simple CSS Techniques for WordPress, Part 4

So far, we’ve covered some CSS Syntax, How CSS Rules Work, and How to Create New CSS Rules. In this article, we’ll look at how to add CSS rules to your WordPress site.

Making Permanent Changes to the CSS

Once you’ve determined how your CSS needs to change to get what you want, you’ll need to add those rules to your website. Typically, the CSS rules for a WP site are added as several separate “stylesheets” or css files.

There are two main ways to add new CSS rules to your site: as a theme or plugin setting, and as a change to your theme stylesheet.

Custom CSS Settings

In many WordPress installs, there are places built into the theme (or plugins) where custom CSS rules can be placed. If you have Jetpack installed (or have a wordpress.com site), there will be an “Edit CSS” item under the Appearance menu where your new rules can be placed. This setting is attached to the theme, so if you change the theme, rules placed in this location will be deactivated.

For most themes, look for a custom CSS setting when customizing the theme. Many themes also offer custom CSS on a page-by-page basis…but don’t use this unless you’re absolutely certain your changes need to go on that one page only.

Many plugins, Participants Database included, have a setting for extra CSS rules. These rules are saved with the plugin and so will be deactivated when the plugin is deactivated. If your CSS rule only affects something the plugin is doing, it’s a good idea to put those rules in the plugin’s settings. Some plugins also only make those rules active if the plugin is putting something visible on the screen, Participants Database works this way, so you’re not adding unneeded clutter to the CSS of other pages.

If you are using the Participants Database plugin, the custom CSS setting is in the plugin settings, under the “Custom CSS” tab.

Modifying the Theme Stylesheet

Another important way to change the site CSS is to put your changes into the theme stylesheet. Each WordPress theme has a file named “style.css” which is the main stylesheet for the theme. However, if you want to make changes to the theme stylesheet, I strongly recommend using a Child Theme. These are very easy to set up, (read the linked article) it will save you a lot of headaches later. Many more complex (mostly premium) themes aren’t set up to allow editing of the main theme stylesheet.

To directly edit your theme stylesheet, go to the “editor” item under the Appearance menu. On the right hand side, there will be a column of theme files to select, but generally, “style.css” will be selected by default. Add your changes to style.css and save. Refresh your web page, and your changes will (hopefully) show up.

Checking Your Changes

To check your changes, especially if they aren’t doing what you want them to do, use the browser developer tool, and select the affected element with the inspector. (how to do this is explained in Part 2)  You should see your new rule in the CSS pane. If not, re-check the selector to make sure it’s really targeting the element. If you see your rule, but one or more of it’s attribute settings is struck out, try using a more qualified selector.

What if CSS Changes Aren’t Showing Up?

There are several possible reasons why your changes don’t seem to be affecting anything. If this happens, go through these steps to figure out what the issue is.

1. The first step is to make sure your changes are loading:
   1. Hard-refresh the browser page. Often the browser cache serves an old version of the stylesheet, hard-refreshing the page in the browser clears the cache and loads the latest files.
   2. Check any caching or site optimization plugins: deactivate the plugin (or just the CSS caching) while you’re developing your changes, or just clear the plugin cache.
   3. If you are using CloudFlare or another third-party optimization and/or CDN service, put the site into “development mode” so that fresh resources from your web server will be served.
   4. Check to see that your changes have been loaded: using the “network” tab in your developer tools, you can see if the latest version of the CSS stylesheet you’re editing is loading. This can be difficult to spot, so this is really only viable for more experienced users who know what to look for.
2. OK, you know the current stylesheet is loading, but the changes aren’t affecting the layout:
   1. As mentioned above, check the element you’re trying to affect with your changes. Are your new rules in effect? You should see them in the CSS pane, and the attribute settings should not be grayed out or struck through.
   2. If one or more of the attribute settings are getting overridden, go through the list in the CSS pane, looking for the overridden attribute until you find the rule that is actively setting the attribute. Change the selector of your new rule so it will override the active rule. Sometimes it’s best to use a separate rule for a specific attribute.
   3. If the rule isn’t getting overridden, but the changes aren’t taking effect, you’ve got a more complex situation. This often happens with formatting changes (size or position) and the solution can be very hard to find…
3. OK your rule isn’t getting overridden, but it’s not having the desired effect:
   1. First thing to check is the layout or display setting of the element. Try changing the “display” attribute to block, or inline, or inline-block. If you know what it should be, leave it at that setting.
   2. Check the HTML structure. Use the element selector to at the HTML, look for what is wrapping your element, and what is wrapping that element, and so on, to gain an understanding of the structure that is used to contain and display the element. You will often need to change an attribute of a wrapping element to get the change you need.
   3. Do an internet search. Be sure to include “CSS” in your search parameters and just type your question into the search engine. Most of the time, you’ll come across some good advice for addressing your problem.

Solving CSS problems can be very tricky and difficult. As mentioned, some layout problems can’t be addressed with CSS alone. You may need to change the HTML in order to get what you want, or what you want to do simply can’t be achieved. In a case like that, you may need to opt for a different solution to your problem, one that is more easily achieved. One way to do this is to look at other websites where you can find examples of the layout you’re looking for. Study how it was done there to see if you can gain any insights that will help you in your situation.

Often, the best place to turn to for help with layout and formatting questions is a support forum for your WordPress theme. The fact that there is a common code base with the users of such a forum means that solutions you find there have a better chance of working for you.

Finally, sometimes there is really no substitute for expert help. You may have to pay for it, and it may be hard to find, but there are specialists in this field who have put in a lot of study to understand how things are done with HTML and CSS. It’s a complicated subject and sometimes what you want to do is not something that can be done with what knowledge you possess at the moment.