How to add custom CSS code without a child theme (WordPress)

Adding custom CSS code to your WordPress website needn’t be a hassle. Contrary to the advice you might be reading online, you can even do it quickly and easily without creating a child theme. Yes, that’s right. Add CSS code (styles) to WordPress – no child theme required. This is an easy (and completely professional) solution for beginners. With this solution there is zero chance of the code being overwritten with a WordPress or theme update.

A common problem: How to improve your WordPress theme without needing to create a child theme

So you’ve got a WordPress website and a theme you’re relatively happy with – great! But after living with it for a while you’d like to make a few changes. Just a few little tweaks – how hard can it be? Perhaps a colour change here or a position change there. A little extra space around this and remove that ugly thing I never really liked. So you search online for a solution – naturally.

You might’ve gotten lucky and found a small piece of CSS code you need to insert into your website. Great. But then you realise you can’t add that code directly into your theme otherwise it’ll be overwritten when you update it :(

Everywhere you look you get the same answer…

You need to create a child theme.

So you look into how to create a child theme and before you know it you’re frustrated at how complicated life has to be just for a small, tiny, micro, nanoscopic alteration – that’ll likely only need a few lines of code.

So you throw your keyboard at the cat, sulk for an hour and realise you’ve got three options.

  • Live with what you’ve got.
  • Pay someone else to do it for you.
  • Or just buy a new theme.

Sound familiar? 

Well there is a fourth way!

Answer: The power of plugins

The answer is as simple as installing a plugin. Here’s one I recommend. It’s free to install and is called ‘My Custom Styles’. And no, I’m not being paid to promote it. I just really like the plugin.

My Custom Styles WordPress Plugin Free

This plugin is a great solution for beginners wanting to add custom code to their WordPress site. It only does one thing, but it does it well. It allows you to add custom CSS code without needing a child theme. The code is safely saved entirely independent of your theme.

Take a look at the link above and check it out for yourself. The best and most efficient way to install the plugin however is via your own site’s plugin administration area. Log in to your WordPress site, go to Plugins > Add New and search for a plugin called My Custom Styles plugins. The plugin is authored by Arthur “Berserkr” Gareginyan.

insert custom CSS code into my WordPress website

The beauty of this plugin is its simplicity.

  • No need to create a child theme – therefore much quicker and easier to implement
  • Upgrade your theme without overwriting and losing your code
  • Activate and deactivate your theme without losing any code
  • Remove your changes quickly and easily by deactivating the plugin
  • Reactivate the plugin and your changes won’t be lost either

Can’t the Jetpack plugin help with custom CSS?

Yes and no. There is a module built into the Jetpack plugin that allows you to add custom CSS styling. However it has one major and really quite annoying flaw. If you deactivate your theme your changes will be lost. In most cases this might be ok, but it doesn’t help if you switch themes and decide to revert back or switch to a similar theme by the same author, with the same niggling problems.

I can add custom CSS in my theme already. Why use this method?

Some premium themes have an add custom CSS facility built-in. In most cases they can work perfectly fine. But if you’re reading this post that’s unlikely to be your situation. However, it is worth noting that if your theme comes with various templates and you change ‘theme template’. You may need to remember to copy your custom CSS code and paste it into your new template before you commit.

If your theme allows you to save your own “theme style” or “theme settings” as a group and you also decide to change to a separate “theme style” then you will have the same problem of remembering to copy and paste your code from one to the other.

Won’t extra plugins slow down my site?

Plugins don’t inherently slow down your website’s loading speed. It’s the additional code they insert into your the <head> and/or <body> tags of your page’s HTML code that slows things down.

This plugin will add no more resource requests in your header than a child theme would.

So far so good – but how do I write my own CSS code

Unfortunately each problem requires a unique solution and unique lines of code – but to help you out here’s some advice to get you started. With some basic understanding you’ll likely feel empowered to do more customisation to your site to make it just how you want it.

Go forth brave souls. The answers are below (EDIT – Probably not).

Writing custom CSS for WordPress websites

Simple CSS tweaks are relatively easy to implement as long as you can find the correct selector. Every web page is made up of HTML objects/elements etc. If you can target a specific object, you can change its style (visual appearance). A selector is the identity of an object or objects. Attached to each selector are styles in the forms of property and value pairings. For example:

selector { property: value; }

Say for example you want to change the font size of Heading 2 text. The code might look like this:

h2 { font-size: 20px; }

or if you want to change the color to red, the code might look like this:

h2 { color: red; }

You can also combine both styles together.

h2 { font-size: 20px; color: red; }

You can also style multiple targets.

h2, h3, h4 { font-size: 20px; color: red; }

Using Chrome’s ‘Inspect’ tool to write custom CSS code and find the correct CSS selector

To find the correct selector I’d recommend using the “Developer Tool” aka “Inspect” tool found in Google’s Chrome web browser. You can download Chrome for free for Mac or PC, if you haven’t already got it. Open up your site with Chrome. Right click (‘Ctrl + click’ for Mac users) on an object/area of your website and click Inspect.

Chrome Inpsect tool to help write custom CSS code

A sidebar or footer panel will open. It might look scary at first but bear with me.

Half the panel will show the underlying HTML code that makes up the web page. You can click (highlight) each element and expand grouped code (triangle arrows) to find the element you want to style. You will need to make sure the ‘Elements’ tab is open in this panel – see the top of the screengrab below.

Chrome Inspect panel HTML code

As you select different elements in the Inspect panel the web page will highlight the corresponding element for a visual reference. It’ll even give you the dimensions of the object (in pixels) which can be very useful.

Chrome Developer Tools to highlight HTML elements on a web page

The second half of the panel should show the corresponding CSS styles associated with the chosen page element.

Add CSS code to WordPress

The styles are generally ordered by priority. Any styles that are striked-through with a line have been overwritten by a higher priority style. If you don’t see styles like those shown in the screengrab above, make sure you have the ‘Styles’ tab selected – see top of screengrab above.

Once you think you have found the correct HTML element you can add a ‘temporary’ style to that element, right within the Inspect panel. You won’t be changing any actual code yet, you are just ‘previewing’ how a change might look. Here’s one way to add a temporary style.

Click into an existing style value and hit the return key.

add css code to WordPress

As you then start typing, CSS property suggestions will popup.

choose a CSS property for selector

Once you’ve added a property to an existing selector, hit the return key again and add a value for that property.

add a value to the css property

Here’s the new temporary style…

add temporary css style using Chrome Developer tools

…and here’s the visual preview that is created in my browser.

custom css in WordPress without a child theme

If you’re happy with the results, open up a new window/tab on your browser, navigate to your new ‘custom styles’ editor, add the new styles and hit save. Using the screengrab examples above all I would need to add is this:

h2, .h2 { color: red; }

I hope that makes sense. That was just a quick insight into the process I sometimes go through, when adding my own custom CSS styles to WordPress sites.

If you have any questions about this topic please shoot me a question in the comments area below.

Summary of how to add custom CSS without a child theme in WordPress

  1. Install a CSS editor plugin for your WordPress site. I recommend ‘My Custom Styles’ by Arthur Gareginyan.
  2. If you have the CSS code you need already – great. Pop it into your new plugin and away you go.
  3. If you don’t, try using Chrome’s Inspect tool to ascertain the correct CSS selector (object identifier).
  4. Use the ‘Elements’ and ‘Styles’ tabs in combination to select the right element.
  5. Add new property and value pairing into an existing CSS style.
  6. Preview the change and re-work the code until you’re happy. It’s a great way to experiment and learn CSS code!
  7. Open up your CSS editor plugin in a new browser window and add your new styles.
  8. Save your custom CSS code and refresh your web page.
  9. Give your cat some love. Throwing a keyboard at it might’ve scared the poor thing.

Ask a question or write a comment here…

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