Custom CSS for Your WordPress Website

Right. But also wrong! I’ll explain the ambivalence shortly 🙂

Let me first explain in a few sentences the difference between WordPress.org and WordPress.com. I’ve already touched this subject in one of my previous posts. Basically, with WordPress.org you have to take care of everything – you need to find a hosting provider that suits you, you need to install WordPress, take care of your site’s security, updates and backups. You have full control, but it comes with a lot of responsibility.

On the other hand, you can set up a blog with WordPress.com in a matter of seconds. The folks from Automattic take care of every single detail I mentioned above and all you need to do is customize your website according to your needs and write, write, write, publish, publish, publish, and then write and publish some more.

WordPress.org – Adding Custom CSS

With WordPress.org, installing a proper theme for your website is one of the first things you are going to do after you’ve installed WordPress on your server (you can check my tutorial How to Install a WordPress theme if you need any kind of assistance regarding this).

Of course, rarely does a theme you install match perfectly to what you really want to see on your website. You might want this button moved 2px to the right, sometimes you need that header to be a bit wider, you’d like to change the font and its size – basically, there are a lot of modifications that you’d like to add to the theme’s default CSS. However, if you add custom CSS to the theme’s CSS files directly, you will lose all your custom code once you update that theme. The golden rule is:

Never make modifications to the theme’s style.css file! You will then limit yourself to using only that particular version of the theme and you will lose all the custom CSS code you inserted if you decide to ever update the theme.

And the theme should be updated as soon as its developers release an update. There are 2 main reasons for this – bug fixes and security updates. As with plugins, update your theme as soon as there is an update available and read patch notes!

So How to Add Custom CSS to a WordPress.org Website?

I would recommend using one of the following:

• Create a child theme (I’ll write about this option in one of my next posts)
• Use a plugin to add custom CSS (we’ll focus on this approach now)

Since we’ll explore the option number two in this article, the plugin I would recommend for this job is Jetpack. And here’s how you can add custom CSS to your theme by using Jetpack:

First, install Jetpack by navigating to Plugins > Add new. You should see Jetpack among the first few featured plugins and then click Install Now.

After the installation process, click on Activate Plugin:

You have installed and activated Jetpack by WordPress.com. One of Jetpack’s awesome features is the ability to connect it to your WordPress.com account in order to receive a bunch of very cool options you can use.

If you’d like to use all of Jetpack’s standard features without connecting it to your WordPress.com account (which I don’t recommend!), please check this guide.

After clicking on Connect Jetpack, you’ll land at a page where you can connect Jetpack to your WordPress.com account. A page will look something like this:

After clicking on Approve, you’ll connect Jetpack on your website to your WordPress.com account and you’ll be ready to use all of Jetpack’s features. Now, let’s proceed to the Custom CSS part.

At the wp-admin area of your website, go to Appearance > Edit CSS. This is where you can add any kind of CSS to your website and it will still be active even after you upgrade your theme. And that’s it. Pretty neat, right? 🙂

WordPress.com – Adding Custom CSS

When you are choosing a theme on your WordPress.com website, you never actually need to install it. All of the themes on WordPress.com are already installed and you just need to choose one which suits you the best (either Free or Premium) and activate it.

By going into Appearance > Customize, you’ll have a lot of options to modify your theme. The options you are given vary from theme to theme, of course. However, in order to add custom CSS, you need to purchase a Premium Upgrade for WordPress.com. This will allow you to additionally customize your blog and use Custom CSS as a feature.

The coolest thing about Custom CSS is that you can try it out and see how you can customize your blog even though you didn’t purchase Premium Upgrade for WordPress. Of course, in order to actually apply the code, you would need to upgrade to Premium plan first. Also, you’ll have access to CSS Revisions, just in case you need to revert to the old code you’ve written.

To add Custom CSS to your WordPress.com website, navigate to Appearance > Customize > CSS.

I hope this article was helpful 🙂