I’m still pretty much a newbie when it comes to WordPress administration.
Nevertheless, I have quickly realized that upgrading a theme can erase any custom styling that had been applied.
If a theme doesn’t support custom styling out of the box, and thus requires modification of the original CSS files, this can easily be retrofitted by making use of CSS’ @import rule:
Simply create a new file in the theme’s folder[1] (e.g. wp-content/themes/[name-of-theme]/custom.css) and add your CSS code[2](the file should be available from the WordPress admin panel’s Theme Editor).
Then add the following line to the top of the theme’s main style sheet:
@import "custom.css"
Later, when upgrading the theme — after making sure that custom.css is not deleted — all that’s required is to re-insert the @import code.
- Initially, I wanted to create a central
custom.cssin thethemesparent folder — unfortunately, that file wouldn’t show up in the Theme Editor. [↩] - Don’t forget about CSS specificity; from my experiences, this is often the culprit when a modification doesn’t seem to take effect. [↩]