{"id":5474,"date":"2021-01-07T00:55:06","date_gmt":"2021-01-07T00:55:06","guid":{"rendered":"https:\/\/readyship.co\/blog\/?p=5474"},"modified":"2021-03-08T09:36:40","modified_gmt":"2021-03-08T09:36:40","slug":"add-custom-css-wordpress","status":"publish","type":"post","link":"https:\/\/readyship.co\/blog\/add-custom-css-wordpress\/","title":{"rendered":"4 Ways to Add Custom CSS in WordPress for Different Areas"},"content":{"rendered":"\n

At some point, you’ll want to make changes to your WordPress website’s design. You go through your theme’s or plugin’s settings, but you notice that there’s no option to change what you want.<\/p>\n\n\n\n

So, you reach out to the developers or the WordPress community. You’ll get a piece of custom CSS to add in WordPress, which is great. But, most of the time, you won’t get instructions on where to add it exactly. And if you’re a beginner, that’s a problem. The code is useless if you don’t know where to add it, right?<\/p>\n\n\n\n

Well, that’s what I’m about to show you here, in this tutorial – how to add custom CSS in WordPress for your theme, plugins, or admin dashboard.<\/p>\n\n\n\n

\n

Contents<\/strong><\/p>\n\n\n\n

  1. How to Add Custom CSS in the WordPress Customizer<\/a><\/li>
  2. How to Add Custom CSS to Your WordPress Theme<\/a><\/li>
  3. How to Add Custom CSS to Your WordPress Dashboard<\/a><\/li>
  4. Plugin Alternative to the First Two Methods<\/a><\/li>
  5. Why and What to Do If the Changes Won’t Show Up<\/a><\/li><\/ol>\n<\/div><\/div>\n\n\n\n

    1. How to Add Custom CSS in the WordPress Customizer<\/h2>\n\n\n\n

    WordPress has a great feature called Customize<\/strong> (sometimes referred to as Customizer), where a bunch of settings is found. Nowadays, most themes add their settings there too.<\/p>\n\n\n\n

    This is the fastest and easiest way to add custom CSS code in WordPress for your theme and plugins. The code will also remain after changing themes or removing plugins.<\/p>\n\n\n\n

    If you need to add a lot of custom CSS to your theme, you should also check the next section.<\/p>\n\n\n\n

    Step 1<\/h3>\n\n\n\n

    To access Customize, go to Appearance<\/strong> > Customize<\/strong> from your dashboard’s menu.<\/p>\n\n\n\n

    \"customize<\/figure><\/div>\n\n\n\n

    You can also access Customize from the admin toolbar, at the top, when you’re viewing one of your website’s pages.<\/p>\n\n\n\n

    \"customize<\/figure><\/div>\n\n\n\n

    Step 2<\/h3>\n\n\n\n

    Inside Customize, click on Additional CSS<\/strong>.<\/p>\n\n\n\n

    \"additional<\/figure><\/div>\n\n\n\n

    Some WordPress themes<\/a> or plugins might change its name. For example, in some cases, you might see it as Additional CSS\/JS. JS stands for JavaScript.<\/p>\n\n\n\n

    Step 3<\/h3>\n\n\n\n

    Add the custom CSS code in the box, below the instructions.<\/p>\n\n\n\n

    \"add<\/figure><\/div>\n\n\n\n

    If you’re on the page where you want the changes to take place, then you’ll see the preview in real-time, if the CSS code is good and valid.<\/p>\n\n\n\n

    Once you’re satisfied with the result, click on the Publish<\/strong> button so that the changes can take effect.<\/p>\n\n\n\n

    \n

    Looking for an All-in-One WordPress Solution?<\/strong><\/p>\n\n\n\n

    ReadyShip offers you ready-made WordPress sites and blogs, plus high-quality managed AWS hosting with free SSL and CDN, at no initial cost!<\/strong><\/p>\n\n\n\n

    \n
    Visit Marketplace<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

    2. How to Add Custom CSS to Your WordPress Theme<\/h2>\n\n\n\n

    If you need to add a lot of custom CSS that’s specific to your WordPress theme<\/strong>, then adding it in the style.css<\/code> file is the best way to do it.<\/p>\n\n\n\n

    I don’t recommend<\/strong> using the style.css<\/code> file found in the parent theme<\/strong> because the changes will go away with the next theme update. Instead, you should have a child theme<\/a> with its own style.css<\/code> file, and add the custom CSS there.<\/p>\n\n\n\n

    Since I’ve put together a separate and comprehensive tutorial on how to access and edit your WordPress files<\/a>, I won’t go into details here.<\/p>\n\n\n\n

    But, in a nutshell, the easiest way to access your theme’s style.css<\/code> file is using cPanel’s File Manager tool or an FTP client, such as FileZilla<\/a>. Or, you could briefly install a plugin<\/a> called File Manager<\/a>, and edit the file from your dashboard.<\/p>\n\n\n\n

    The style.css<\/code> file is usually found in:<\/p>\n\n\n\n

    public_html\/wp-content\/themes\/YOUR-THEME-NAME-CHILD\/style.css<\/code><\/pre>\n\n\n\n
    If you’re using an add-on domain, not your main one, the public_html<\/code> folder might get replaced with your domain, so it can look like this:<\/p>\n\n\n\n
    example.com\/wp-content\/themes\/YOUR-THEME-NAME-CHILD\/style.css<\/code><\/pre>\n\n\n\n
    \"editing
    Editing the child theme’s style.css file in cPanel<\/figcaption><\/figure><\/div>\n\n\n\n
    Once you’ve found the file and opened it for editing, you can paste the custom CSS code right after everything that’s added there by default.<\/p>\n\n\n\n
    Some WordPress themes come with a child theme automatically, so there could be a bunch of code already there. You just add yours after that.<\/p>\n\n\n\n
    \"Adding
    Adding custom CSS in a standard child theme’s style.css file<\/figcaption><\/figure><\/div>\n\n\n\n
    Don’t forget to save the file!<\/p>\n\n\n\n
    Now, if you change the WordPress theme, the custom CSS will be gone. But, it shouldn’t matter as long as you’ve only added code for the theme that you won’t use anymore.<\/p>\n\n\n\n
    3. How to Add Custom CSS to Your WordPress Dashboard<\/h2>\n\n\n\n
    The above methods only work for your website’s front-end. They won’t work if you want to make some design changes to the back-end, which is your WordPress dashboard.<\/p>\n\n\n\n
    For this, I recommend a plugin called Add Admin CSS<\/a>.<\/p>\n\n\n\n
    Step 1<\/h3>\n\n\n\n
    Install and activate the Add Admin CSS<\/strong> plugin.<\/p>\n\n\n\n
    While the plugin is in the official WordPress repository, I could never find it by searching from Plugins > Add New. If that’s the case for you, too, then download it from its page and install it manually, as shown in my tutorial on how to install a WordPress plugin<\/a>.<\/p>\n\n\n\n
    Step 2<\/h3>\n\n\n\n
    Got to Appearance<\/strong> > Admin CSS<\/strong> to access its settings.<\/p>\n\n\n\n
    \"add<\/figure><\/div>\n\n\n\n
    Step 3<\/h3>\n\n\n\n
    Add the custom CSS code for your WordPress admin area, in the Admin CSS<\/strong> box, and click the Save Changes<\/strong> button.<\/p>\n\n\n\n
    \"adding<\/figure><\/div>\n\n\n\n
    As you can see from the screenshot, I changed the dashboard’s background to a red-ish color. Well, I almost changed it. There’s still some margin on the left with the default color, but it’s just a quick and raw example.<\/p>\n\n\n\n
    If you’re a more experienced WordPress user or a developer, I don’t recommend using a plugin only for a small change. You could opt to add small custom CSS changes to your dashboard using a PHP snippet that you can add in your functions.php<\/code> file, in your child theme. This code should still work<\/a>.<\/p>\n\n\n\n
    4. Plugin Alternative to the First Two Methods<\/h2>\n\n\n\n
    If you don’t want or can’t use the Additional CSS feature from the Customize tool, or editing the style.css<\/code> file in your child theme proves to be frustrating, then you could use a plugin called Simple Custom CSS<\/a>. It’s a bit outdated at the time of this writing, but it seems to be working fine.<\/p>\n\n\n\n
    Step 1<\/h3>\n\n\n\n
    Install and activate the Simple Custom CSS<\/strong> plugin.<\/p>\n\n\n\n
    Step 2<\/h3>\n\n\n\n
    Go to Appearance<\/strong> > Custom CSS<\/strong> to access its settings.<\/p>\n\n\n\n
    \"Simple<\/figure><\/div>\n\n\n\n
    Step 3<\/h3>\n\n\n\n
    Add your custom CSS in the box and click on the Update Custom CSS<\/strong> button.<\/p>\n\n\n\n
    \"adding<\/figure><\/div>\n\n\n\n
    Why and What to Do If the Changes Won’t Show Up<\/h2>\n\n\n\n
    There could be several different reasons why the changes won’t show up after you’ve added custom CSS in WordPress. Here are the main ones:<\/p>\n\n\n\n