Getting Started With Custom CSS

With your WordPress site, not only can you customize the layout of your pages, but you can customize their styles too. Cascading style sheets or CSS is the technology that allows you to style your web pages.

This guide shows you the best 3 ways to add custom styles using CSS to your website:

Use a plugin (generally the easiest way) #
Use the Appearance > Customize > Additional CSS editor #
Edit your child theme's style.css file #

Note: Your theme might include an option or settings area for you to add CSS. Using your theme's support for CSS might be even easier than using a plugin. Please check your theme's documentation.

Use a Plugin #

If you aren't comfortable or don't want to bother with editing server files using a plugin is the way to go! We'll cover 2 plugins we like to use.

Simple Custom CSS and JS Plugin #

The first plugin we recommend is the Simple Custom CSS and JS plugin.

After you install and activate the plugin, add your CSS by going to Custom CSS & JS > Add Custom CSS under your wp-admin side menu.

The screen capture above is courtesy of Simple Custom CSS and JS.

The awesome thing about this plugin is that you plop in only CSS code. You don't need to worry about wrapping it around any HTML or PHP. Whew!

Important! If you want to add custom CSS to style your Popup Maker popups use the following settings:

Linking type: Internal
Where on page: Footer
Where in site: In Frontend

When you're done adding your CSS, click Publish to save your code. And as always, purge your caches to check your changes on the front end.

Code Snippets Plugin #

We also like the Code Snippets plugin. Learn more on how to use the Code Snippets plugin in our Getting Started with Custom PHP guide.

Pro tip: Use the Example CSS snippet that comes installed with the plugin as a template for adding your CSS. That example template uses the wp_head hook to inject your CSS into the head of your posts and pages on the front end (public-facing end) of your site.

The 2 main differences between Code Snippets and Simple Custom CSS and JS are:

Storage location: Simple Custom CSS and JS stores your snippets as files on your webserver. Code Snippets stores snippets in the database.
PHP snippets: Code Snippets wraps all code inside PHP. That might be confusing to beginners, but that lets you add PHP code on top of HTML, CSS, and JavaScript. Simple Custom CSS and JS does not support PHP snippets at the time of writing.

Benefits of Using a Plugin #

Using a plugin has 2 big benefits:

Easier to manage: Both plugins we've covered let you create individual CSS snippets. Having smaller and more focused snippets make it easier to sort, find, edit, delete, enable/disable, export, and troubleshoot compared with a monolithic chunk of code in the Additional CSS editor or in a huge style.css file.
Better editing experience: Both plugins also have wider code editing areas with built-in shortcut features.

In the screen capture above is a list of keyboard shortcuts the Code Snippets editor supports.

Use the Appearance > Customize > Additional CSS Editor #

Using the Additional CSS Editor under the wp-admin menu Appearance > Customize is the usual way most WordPress docs recommend. If you don't want a plugin or mess with server files and a child theme, then this is your best bet.

Just be aware that the Additional CSS editor is not suited for adding a lot of custom CSS, the CSS code is stored in the database, and the editing experience can be painful. In the screen capture below, you can see how confined the CSS editor is compared to the rest of the screen.

Below is what the Additional CSS looks like in the database.

Edit Your Child Theme's style.css File #

Editing your child theme's style.css file is the most advanced option out of the 3 ways covered in this guide. But if you don't want to use a plugin or the Additional CSS editor for your custom CSS, this option is for you!

Before you start you'll need a child theme. After your child theme's set up, you can add your CSS directly into the child theme's style.css file.

Remember when you created your child theme? A WordPress child theme needs at least a style.css and functions.php file. Here's a minimalist example of a child theme's web directory (/wp-content/themes/twentytwentyone-child/).

But First, Take a Backup #

Before you start editing server files, make sure you have a current backup of your site. You should also edit and test your changes on a staging copy instead of making changes directly on your live site.

Pro tip: Save a copy of the file you want to edit before you make any changes. You can save it in the same folder as the original. You'll just need to give it a different name, e.g., style.css.bak. Then, if your edits crash your site, you can quickly revert to the backup file with a quick rename ;-). Just remember to either delete your bad version of the file or rename it to something else for debugging later.

3 Ways to Edit #

Here are 3 ways you can edit your child theme's style.css file.

SFTP (e.g. FileZilla)
cPanel File Manager
WordPress Theme Editor (only if there's no other way)

Just for the sake of an example, here's what a child theme style.css file looks like in the Theme Editor.

In the example above, you'd start adding your custom CSS code right after line 11. Even though you can use the built-in Theme Editor, we suggest you edit your style.css using SFTP or File Manager.

Major caveat: Every time you add custom code, you take responsibility for testing and maintaining it. Here are some best practices you should follow:

Make sure you have a recent full backup of your site.
Test your code on a staging copy of your live site.
Remember that any custom code example you decide to reuse is exactly that—an example! Meaning, that you'll need to tweak and make sure the code works in your environment and meets your needs.

Whenever you need to troubleshoot your site for a possible plugin or theme conflict, make sure you disable all custom code.