How to Add Custom CSS in WordPress 

Have you ever tried to change a color or hide something on your WordPress site, only to find there’s no option for it? I’ve been there too. I remember spending way too long looking through my theme settings for a simple font tweak that just wasn’t possible.

That’s when I learned about custom CSS. It’s a quick way to fix small visual issues on your site, without editing theme files or hiring a developer.

You don’t need to know how to code for any of this. There are four places you can add custom CSS in WordPress, and the one you pick decides whether your styles survive the next theme change.

Methods to Add Custom CSS in WordPress:

• 1. Add Custom CSS with SeedProd
• 2. Add Custom CSS Without a Page Builder
• 3. Use a Custom CSS Plugin
• 4. Edit Your Theme Files (Not Recommended)
• Why Is the Additional CSS Option Missing?
• Which Method Should You Use?
• Bonus: Target Custom CSS to Pages or Blocks

What Is Custom CSS?

CSS stands for Cascading Style Sheets. It’s a simple language that controls how your WordPress site looks.

For example, this bit of CSS changes a heading color to red:

h1 {
  color: red;
}

And this one hides an element on the page:

.hidden {
  display: none;
}

You don’t need to write code like this from scratch. Most of the time, you’ll just copy and paste it into the right place.

The key is knowing where to put your custom CSS, and that’s exactly what I’ll show you next.

Why Add Custom CSS in WordPress?

Sometimes you want to change a button color, center a heading, or remove a bit of extra spacing, and your theme doesn’t give you a way to do it.

That’s where custom CSS comes in. It gives you control over the small design details that make your site look and feel just right.

With CSS, you’re not stuck with the default WordPress theme settings. You can fine-tune your layout, style, and spacing without switching themes or installing extra WordPress plugins.

Just remember: CSS helps tweak your design, but it won’t fix bigger visual mistakes that custom CSS can’t fix, like cluttered layouts or poor navigation.

So, how do you actually add custom CSS in WordPress?

There are a few different ways, but I’ll start with the one I use most often, and the one I recommend if you want full control without the hassle.

1. Add Custom CSS with SeedProd (My Favorite Way)

If you’ve never used SeedProd before, it’s a drag-and-drop WordPress builder that makes customizing your site super easy, even if you’re not a developer.

I use it all the time because I can build full themes or landing pages without touching any code. And when I do want to add a bit of CSS, SeedProd gives me a simple place to do it.

Before we get into the steps, it helps to have SeedProd set up on your site.

If you haven’t used it yet, here are a couple of beginner-friendly tutorials to help you get started:

• How to Create a Custom WordPress Theme Without Code
• How to Create a Landing Page in WordPress

Once you’ve built a landing page or theme with SeedProd, you’re ready to add your own custom CSS. Let’s start with how to do that on a single landing page.

How to Add CSS to a Landing Page in SeedProd

To get started, open your WordPress dashboard and go to SeedProd » Landing Pages.

Find the landing page you want to edit and click the Edit link next to it.

This will open the SeedProd page builder. In the bottom-left corner, click the gear icon to open your Global Settings.

From the left-hand sidebar, click on the Custom CSS tab.

Now paste in your CSS. For example, here’s one that styles your paragraph text:

p {
  font-style: italic;
  color: #444;
}

Click the Save button in the top-right corner.

You can then preview your page to see the saved changes live on your website.

How to Add Global CSS with SeedProd’s Theme Builder

If you’re using SeedProd’s Theme Builder to design your entire site, you can apply custom CSS that works across every page.

To get started, open your WordPress dashboard and go to SeedProd » Theme Builder.

Find the template called Global CSS and click Edit Design.

Inside the builder, click the gear icon in the bottom-left corner to open Global Settings.

From the left-hand sidebar, click the Custom CSS tab.

Click the Edit Custom CSS button. This opens the WordPress Customizer in a new window.

In the Customizer, click Additional CSS, then paste in your code.

For example:

p {
  font-style: italic;
}

This will make all paragraph text across your site appear italic.

Click Publish to save your changes and apply them sitewide.

You can now refresh your page to see the update live.

This method is helpful for making global style changes like font adjustments, spacing, and color tweaks.

2. Add Custom CSS in WordPress Without a Page Builder

If you’re not using a page builder like SeedProd, you can still add custom CSS directly in WordPress. The steps depend on the type of theme you’re using, either a classic theme or a block theme.

Classic themes use the older Customizer tool and often rely on widgets and page templates. Block themes, on the other hand, use the newer Site Editor, which lets you design your whole site with blocks.

Both boxes are built into WordPress, so there’s nothing to install. I use them for one-off changes rather than anything I want to keep, because WordPress files the CSS under whichever theme is active at the time.

Use the WordPress Customizer (Classic Themes)

In your WordPress dashboard, go to Appearance » Customize.

From the Customizer menu, click on Additional CSS.

A text box will appear where you can paste your custom code. For example:

p {
  color: #0073aa;
}

This changes all paragraph text on your site to a shade of blue.

You’ll see a live preview of your changes on the right as you type.

When you’re happy with how it looks, click the Publish button to save your changes.

This method works well with older themes that support the Customizer, and it doesn’t require any WordPress plugins.

Use the Site Editor (Block Themes)

If your WordPress site uses a block theme, you’ll manage your design using the full Site Editor instead of the Customizer.

To begin, go to Appearance » Editor in your WordPress dashboard.

In the left-hand sidebar, click the Styles icon. It looks like a half-moon or a paint palette.

Then click the small pencil icon labeled Edit Styles.

You’ll now see the WordPress editor. In the top-right corner of the screen, click the three-dot menu (⋮) and select Additional CSS from the dropdown.

Paste your custom code into the box. For example:

p {
  color: #0073aa;
}

This will change the paragraph text color across your entire site.

Click Save in the top-right corner to apply the changes.

3. Use a Custom CSS Plugin

If your theme doesn’t support the Customizer or Site Editor, or if you just want a clean way to manage your CSS in one place, I recommend using a plugin like WPCode.

WPCode is a lightweight WordPress plugin that lets you add custom code snippets, CSS included, without editing your theme files.

Once you’ve installed and activated WPCode, go to Code Snippets » + Add Snippet in your WordPress dashboard.

Click the box that says Add Your Custom Code (New Snippet) and give your snippet a name, like Custom CSS Styles.

Under Code Type, select CSS Snippet from the dropdown.

Now paste your CSS into the code box. For example:

p {
  color: #0073aa;
}

Scroll down and choose Auto Insert to apply the CSS across your entire site.

Then click Save Snippet and toggle the switch at the top to Active.

That’s it! Your custom styles are now live across your site, and you can come back to this snippet anytime to make changes.

4. Edit Your Theme Files (Not Recommended)

This method only works if you’re using a classic theme. Block themes don’t include access to the Theme File Editor in the WordPress dashboard.

If you’re using a classic theme, and you’re comfortable editing code, you can add custom CSS directly to your theme’s style.css file. But I don’t recommend this unless you know what you’re doing.

When you edit theme files directly, your changes can be lost during updates. You also won’t see a live preview, and even a small typo can break your layout.

That said, if you’re using a child theme or know how to restore your site if something goes wrong, here’s how to do it.

Go to Appearance » Theme File Editor in your WordPress dashboard.

From the list of files on the right, click on style.css.

Scroll to the bottom of the file and paste your CSS. For example:

p {
  color: #0073aa;
}

Click Update File to save your changes.

Why Is the Additional CSS Option Missing in WordPress?

WordPress hides Additional CSS from any account that lacks a permission called edit_css, so when the box disappears it’s the permission that went missing, not the feature.

The theme looks like the obvious suspect, and it almost never is. WordPress runs the same permission check for the Customizer box and the Site Editor box, so switching themes changes nothing.

Three things switch that permission off:

• A security setting in wp-config.php. When DISALLOW_UNFILTERED_HTML is defined on a site, WordPress takes custom CSS editing away from everyone, administrators included.
• Multisite. On a WordPress network, only the super admin who runs the network keeps the permission, so individual site admins lose the box.
• A hardening plugin that strips it. The edit_css permission is built on an older one called unfiltered_html, and some security plugins remove that, which takes the CSS box with it.

I went and read this in WordPress 7.1’s own code rather than repeating the theme explanation, because the option isn’t built on theme support at all.

If you’re the only admin and nothing obvious should be blocking you, ask your host or whoever set the site up whether DISALLOW_UNFILTERED_HTML is defined in your wp-config.php file. That’s the quickest one to rule out.

If the setting turns out to be deliberate, respect it and put your CSS somewhere that doesn’t go through the same check. SeedProd’s Custom CSS box saves through the builder’s own permissions and WPCode uses its own snippet permission, so a missing Additional CSS panel doesn’t stop either of them working.

Which Method Should You Use?

Pick based on what you want to happen when you change your theme, because that’s the real difference between these four.

Method	Best for	Survives a theme change?	Needs a paid plan?
SeedProd	Styling landing pages and templates you built yourself	Yes, the CSS is saved with the page	No for a single page, Plus for sitewide
Customizer or Site Editor	A quick tweak to the theme you’re running now	No, WordPress stores it per theme	No
WPCode	CSS you want to keep through any theme change	Yes	No
Theme files	Nothing, unless you’re working in a child theme	No, the next update overwrites it	No

If the CSS is sitewide and you want to stop thinking about it, I’d use WPCode, because it’s the only one of the four that ignores your theme completely. If the styling belongs to a page you designed, keep it in SeedProd with the page.

The Customizer is still fine for a small tweak you wouldn’t miss after a re-theme. Just know that’s what you’re choosing.

Bonus: Target Custom CSS to Pages or Blocks

Sometimes you don’t want your CSS to affect the whole site, you just want it to apply to one page or a single block. You can do that by using page IDs or custom CSS classes.

Using Page IDs in WordPress

Every page in WordPress has a unique ID, and you can use that to target styles for just that page.

To find the page ID, visit the page in your browser, right-click anywhere, and choose Inspect.

In the code, look for the <body> tag. It will include a class like page-id-37.

You can then use that in your CSS like this:

.page-id-37 p {
  color: green;
}

This will only change the paragraph text color on that specific page.

Using SeedProd’s Block Settings

If you’re using SeedProd, you can target specific blocks by adding a custom class name.

Open your page in the SeedProd builder and click on the block you want to style. In my case, I want to style a specific heading block.

In the left-hand panel, go to the Advanced tab, look for the Attributes option, and expand it.

Find the field labeled CSS Class and add a class name like my-special-style.

Then, in your global or page-level Custom CSS box, add something like this:

.my-special-style {
  background-color: #fff7e6;
  border-radius: 10px;
}

After saving and previewing the page, you’ll see your changes on that specific block without affecting the rest of your site.

FAQs About Adding Custom CSS in WordPress

How Do I Add CSS to a Specific Page?

You can target one page with its unique page ID, like .page-id-123 p { color: red; }. If you’re using SeedProd or WPCode, add a custom CSS class to the block or section you want to style and target that class instead.

Can I Use HTML and CSS Together?

Yes. You can add HTML inside WordPress blocks or widgets and style it with custom CSS, as long as your CSS targets the right element or class.

Is It Safe to Add CSS Without a Developer?

Yes, as long as you stay out of your theme files. CSS only changes how things look, so a mistake shows up as a visual oddity rather than a broken site, and you can delete the rule to undo it. Editing theme files directly is the only part of this that carries real risk.

Will Adding CSS to WordPress Affect Mobile Devices?

Your CSS applies to every screen size unless you wrap it in a media query. If you’re working in SeedProd, you can switch to the mobile preview in the builder and adjust it there before you publish.

Why Is My Custom CSS Not Working?

Two things cause this most of the time. Either a rule in your theme is more specific than yours, so it wins, or a caching plugin is still serving the old stylesheet. Clear your cache first, then right-click the element and choose Inspect to see which rule is actually being applied.

Where Does WordPress Store My Custom CSS?

CSS you add in the Customizer goes into a hidden post that WordPress names after your active theme, which is why it doesn’t follow you when you switch. The Site Editor keeps its CSS with your theme global styles. SeedProd and WPCode both store theirs outside the theme.

Ready to Customize Your WordPress Site?

Custom CSS is the quickest way past a theme that won’t let you change something, and none of it needs a developer.

You don’t have to rebuild anything or learn how stylesheets work to use it. Decide where the CSS should live, paste it in, and look at the page in your browser.

If you’d rather do the styling visually and keep it attached to the page you built, SeedProd handles both in the same place.

Want to keep customizing your WordPress site?

Here are some guides I recommend next:

• How to Edit Your WordPress Homepage
• How to Customize Headers in WordPress
• How to Add Testimonials to WordPress Pages
• How to Create a Custom 404 Page in WordPress

Thanks for reading! We’d love to hear your thoughts, so please feel free to join the conversation on YouTube, X and Facebook for more helpful advice and content to grow your business.