Where do you put CSS code in a WordPress website?

Man sips a cup of coffee at a laptop with the caption, "Maybe if I drink this, I'll know what the hell I'm doing..."

Where the heck does this CSS code go?

Ever been handed a snippet of CSS code and wondered, “Well, now what?” Knowing where to put CSS code in a WordPress website is not exactly intuitive, but in this post I’ll show you how to do it.

At some point, you’ll get a chunk of javascript from Mailchimp, or someone in a WordPress forum will give you some custom CSS code to use on your site.

Then, you go to your site to stick it in there and… well, hrmph. It’s not like there’s a giant window that says, “INSERT CODE HERE.” So what do you do? Thankfully, I have some easy solutions for you.

Header and Footer Code

When you get instructions to insert a snippet of code into your site’s header or footer, it’s not clear where you do that in WordPress. Typically, it would go into one of the PHP files that make up your site. Since you’re not a coder, you don’t want to mess with that anyway. Trust me on this.

The great thing is, there’s a handy plugin that will make your life happy again. It’s called the “Insert Headers and Footers” plugin. Isn’t that clever? Just install that plugin and now you can place the code in the header, body, or footer (wherever the instructions tell you). Once installed, go to Settings>Insert Headers and Footers. It’s that easy.

CSS Code

What about CSS code? Where does that go? Again, it typically goes into one of the WordPress core files that make up your site. But you don’t have to mess with that. Yay!

In your admin dashboard, go to Appearance>Customize. Scroll to the bottom, and you’ll see a section called Additional CSS. When you put the code in there, you might even see your site update on the fly, depending on what the code is meant to do. Just hit Publish and you’re done!

Widget Code

Some code is meant to be used in a widget. For example, you can use code to put a Mailchimp signup form in your sidebar. There’s a handy widget called “Custom HTML.” Just add that widget and paste your code into the box. Presto!

Adding code to your WordPress site is not intuitive, but with these methods, you can feel confident that you can make it work. And if you get stuck, I’ll be right here to rescue you.

Questions? Comments? Hit me up! Paste your comment below, or get in touch.

Learn more!

Sign up to receive my latest website tips directly in your inbox.

I’ll never send you spam or share your email address.
Find out more in our Privacy Policy.







Leave a Reply

Your email address will not be published. Required fields are marked *