Tutorials, WordPress Help

Where do you put CSS code in a WordPress website?

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 hell does this &%$#* code go?

Ever been handed a snippet of code to insert into your WordPress website and wondered, “Well, now what?”

At some point, it will happen. 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, tweet at me, or get in touch.

Was this helpful? Share it now:

By D.J. Billings

I love to help bloggers and small businesses with their WP websites.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.