• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Easily Edit CSS In WordPress Without Child Themes

Bhagwad Park

Published on: September 19, 2018

Categories: WordPress 0

For all its customizability, WordPress made it quite difficult to change appearances right until the end of 2016. Even now, articles all over the web before this date give outdated advice on how to modify WordPress’s CSS, and suggest all kinds of complicated solutions like creating special customizers etc (I’m looking at you WPMU DEV!).

Earlier solutions to changing CSS included the following steps:

  1. Create a child theme
  2. Modify style.css manually (and risk breaking your site)

Or even installing one of the many CSS plugins for this purpose. Jetpack was the “go to” plugin since it integrated nicely with existing WordPress screens and is a valuable plugin to have anyway. All that changed on the 6th of December 2016.

Enter WordPress 4.7 “Vaughan”

Just in time for 2017, WordPress released its new “Twenty Seventeen” theme with the introduction of WordPress 4.7. This finally fixed the long-standing problem of WordPress’s problems with customizing CSS and integrated the functionality of Jetpack into WordPress itself.

At one stroke, it got rid of all the previous solutions, making them outdated. Users could now experiment with changing their CSS without needing to create or modify child themes, and best of all, we could test out the changes first before committing to them.

So let’s take a look at how to edit CSS in WordPress easily, and in a few minutes.

Step 1: Open the Theme Customizer

In your WordPress dashboard, go to “Appearance -> Customize” as shown here:

Appearance Customize

In the resulting options screen, scroll all the way down until you see “Additional CSS” like this:

Additional CSS

Different themes may have more or fewer options depending on what features the developers chose to include by default. But now all themes will allow users to change CSS.

Step 2: Preview and Add your CSS

The textbox in the next screen allows you to add your CSS. To make things easier, it has useful features like autocomplete as shown here:

Editing CSS with Autocomplete

In addition, there’s also a CSS syntax checker which will tell you when you mess stuff up like forgetting to close a comment or inserting a semi-colon at the end of a statement. It also automatically inserts things like closing curly brackets etc, to make the job easier.

As you finish writing complete CSS statements, the style preview on the right-hand side changes in real time to reflect your new CSS.

How to Easily Edit CSS in WordPress

In the example above, I’ve changed the color of the “Heading 1” <h1> tag to brown. You can see that I haven’t saved my changes yet, but the customizer is showing me what it’ll look like when I finally publish my changes. This ability to preview CSS is a real improvement over the older method of copy-pasting stuff, saving your changes, and then navigating to your site to see the impact!

Finally, when you’re done, click the blue “Publish” button at the top to save your changes and make your CSS go live. That’s it! You’ve modified your CSS without needing to install child themes or plugins.

CSS Changes are Theme Specific

If there’s one drawback to this method, it’s that your changes are specific to the current theme. This means that if you change your theme to something else, your CSS won’t carry over. While I can see why they did this, it’s not always useful. Sometimes HTML elements like tables or links need to be styled the same way regardless of theme.

But it’s not really a problem. To overcome this, you can always switch back to your old theme and copy the CSS rules to paste into the CSS customization area of your new theme. Then remove the ones that are irrelevant to the new theme, and experiment till you’ve got the look exactly right.

With 4.7, WordPress finally brought easy CSS customization and gave millions of site owners a seamless way to modify the appearance of their theme without messing about with theme files!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel 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.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA