Skip to content

How to Change the CSS of a WordPress Theme (and Not Go Crazy)

The subject we’ll be tackling is how to make clean, logical, stable changes to the CSS of your WordPress site. We’ll be accounting for the fact that this often involves overriding existing CSS styles from the original parent theme, as well as plugin files, while leaving them intact—meaning that you’ll be working within a large, often complex landscape of overlapping CSS styles.

For this article, it’s best if you have general understanding of the following:

If any of the above is new to you, now’s a great time to learn those things! We’ll be here.

We’ll look at the two core concepts you need to make intelligent CSS changes to your WordPress site, and then look at a couple of case studies to draw out principles to work from.

Core concepts: breadth and specificity

Every styling change you make needs to get two things right:

Yay! 🎉 You made it to the end of the article!
Fred Meyer
Share:

8 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Ashutosh Jha
August 1, 2015 12:45 pm

This was an awesome post

fredclaymeyer
February 24, 2015 10:44 pm

For English speakers (thanks Google translate): “Although it may seem like another thing to learn, a grounding in just the basics of syntax with respect to hierarchy makes things an order of magnitude easier to read, and much less wordy.”

Well said!

Custom Scripts and Styles In WordPress | robii
February 20, 2015 11:54 am

[…] and WordPress takes care of the rest. Used well, this lets you avoid some of the more painfulspecificity olympics—or, worse, !important contests—you’d otherwise […]

Don't Over-@extend Yourself in Sass (Or: There's a Class for That!) - Press Up
November 12, 2014 4:46 pm

[…] This type of unusable, uninterpretable styling rule frequently and needlessly complicates working in WordPress, and requires unreasonable amounts of creativity to work around. […]

Everything You Should Know About Using Custom Scripts and Styles In WordPress - Andrew Good
August 21, 2014 6:22 am

[…] and WordPress takes care of the rest. Used well, this lets you avoid some of the more painful specificity olympics—or, worse, !important contests—you’d otherwise […]

Everything You Should Know About Using Custom Scripts and Styles In WordPress | WPShout.com
August 19, 2014 1:00 pm

[…] and WordPress takes care of the rest. Used well, this lets you avoid some of the more painful specificity olympics—or, worse, !important contests—you’d otherwise […]

toko online murah
May 7, 2014 6:04 am

I actually do not know much about css, but I am curious about the colors and layout tatak my website. so I often try
(but I’ve backup my website before I practice)

Hugh C
May 6, 2014 7:23 pm

The one thing that keeps my CSS sane and legible is not to edit it directly at all, but instead to use less and compile it to CSS every time I save (I use WinLess, there are many other compilers to choose from). Although it may seem like another thing to learn, a grounding in just the basics of the syntax with respect to hierarchy make things an order of magnitude easier to rea, and much less verbose.

The end result of selectors like the button example above may be spaghetti, but trying to craft such code by hand is grief, and considerably more error-prone.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!