add custom css

How to Add Custom CSS in WordPress? – 3 Ways to Implement

How to Add Custom CSS in WordPress? – 3 Ways to Implement

By | September 14, 2024

WordPress is a powerful and flexible platform for creating websites. With its vast array of themes and plugins, you can build a website that suits your needs perfectly. However, sometimes you may want to make custom design changes to your WordPress site that go beyond the capabilities of your theme’s settings. This is where custom CSS (Cascading Style Sheets) comes into play. In this comprehensive guide, we will explore two methods to Add Custom CSS to your WordPress site: using a plugin and creating a child theme. We will also discuss common errors and how to troubleshoot them.

 

Part 1: Add Custom CSS in WordPress with a Plugin

Using a WordPress plugin to add custom CSS is one of the easiest methods, especially for users who are not comfortable with coding. Here is how to do it:

 

Step 1: Install and Activate the Plugin

Log in to your WordPress dashboard.

Navigate to the “Plugins” menu on the left sidebar and click on “Add New.”

In the search bar on the top right, type “Custom CSS” and press Enter.

You will see a list of plugins that can help you add custom CSS. One popular option is “Simple Custom CSS and JS.” Click the “Install Now” button next to the plugin’s name and then activate it.

Step 2: Access the Custom CSS Interface

After activating the plugin, go to the “Appearance” menu on the left sidebar and click on “Custom CSS.” This will take you to the custom CSS interface provided by the plugin.

 

Step 3: Add Custom CSS Code

In the Custom CSS interface, you’ll see a text editor where you can add your CSS code.

You can start by adding your CSS rules, such as changing the font size, colours, margins, or any other styling you desire.

Make sure your CSS code is well-structured and follows standard CSS conventions.

 

Step 4: Preview and Save Your Changes

After add custom CSS of yours, you can click the “Preview” button to see how your changes affect your site.

Once you’re satisfied with the preview, click the “Save” button to apply the custom CSS to your website.

 

Step 5: Check Your Website

Visit your website to ensure that the add custom CSS changes have been applied correctly.

If everything looks as expected, congratulations, you’ve successfully add custom CSS using a plugin!

 

ALSO READ: How Much Does a WordPress Website Cost?

Part 2: Add Custom CSS with a Child Theme

Creating a child theme is a more advanced method to add custom CSS to your WordPress site. It’s especially useful if you plan to make extensive code modifications or if you want to maintain a clean and stable website. Here’s how to do it:

 

Step 1: Create a Child Theme Directory

Connect to your WordPress site using FTP or a file manager in your hosting control panel.

Navigate to the “wp-content/themes” directory, where your themes are stored.

Create a new folder for your child’s theme. You can name it something like “mytheme-child.”

 

Step 2: Create a Child Theme Stylesheet

Inside your child theme directory, create a new file named “style.css.”

Open the “style.css” file in a text editor and add the following code:

/*

Theme Name: MyTheme Child

Template: mytheme  (Replace ‘mytheme’ with the name of your parent theme)

*/

Save the “style.css” file.

Step 3: Enqueue the Child Theme Stylesheet

 

Create a new file in your child theme directory and name it “functions.php.”

Open the “functions.php” file and add the following code:

<?php

function enqueue_child_theme_styles() {

    wp_enqueue_style(‘parent-style’, get_template_directory_uri() . ‘/style.css’);

    wp_enqueue_style(‘child-style’, get_stylesheet_uri(), array(‘parent-style’));

}

add_action(‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’);

?>

Save the “functions.php” file.

 

Step 4: Add Custom CSS

Now, you can add  custom CSS of yours to the “style.css” file in your active theme.

Use the same CSS rules and structure as in the plugin method.

 

Step 5: Activate the Child Theme

Go to your WordPress dashboard and navigate to the “Appearance” > “Themes” section.

Activate your child theme (e.g., “MyTheme Child”).

 

Step 6: Check Your Website

Visit your website to ensure that the add custom CSS changes have been applied correctly.

If everything looks as expected, you’ve successfully add custom CSS using a child theme!

 

ALSO READ: How To Install or Delete WordPress Theme?

 

Part 3: Add Custom CSS Using Theme Customizer

Step 1: Go to Active theme

Step 2: On the left section click Appearance -> Customize

Step 3: On the live preview of your website,  click “Additional CSS” in the left section.

Step 4: Enter the valid CSS rule in the text box and you can able to verify the applied CSS on the live website.

Step 5: Click “Publish” once done.

 

Common Errors and How to Troubleshoot Them

While adding custom CSS to WordPress is relatively straightforward, you may encounter some common errors along the way. Here are a few and how to troubleshoot them:

 

  1. CSS Not Applying:

Check CSS Specificity:

Ensure that your custom CSS selectors are specific enough to target the elements you intend to style. Specificity is crucial in CSS.

 

Check for Syntax Errors:

Even a minor syntax error can prevent your CSS from working. Review your code carefully for typos, missing semicolons, or unclosed brackets.

 

Check the Browser Cache:

Sometimes, your browser may cache the old CSS. Try clearing your browser cache or opening your site in an incognito/private window to see if the changes apply.

 

  1. White Screen of Death (WSOD):

If you encounter a white screen after you add custom CSS, it may be due to a PHP error in your child theme’s functions.php file. Check for any syntax errors or missing semicolons in your functions.php code and correct them.

 

  1. Broken Layout:

If your custom CSS causes layout issues, such as overlapping elements or broken columns, review your CSS code for unintended changes. Make sure you’re not inadvertently affecting other elements on your site.

 

  1. Mobile Responsiveness Problems:

Ensure that your custom CSS considers responsive design. Test your site on various screen sizes to ensure that your changes adapt gracefully to different devices.

 

  1. Incompatibility with Plugins or Updates:

Sometimes, custom CSS may conflict with other plugins or WordPress updates. If you notice issues after installing or updating a plugin, try disabling your custom CSS temporarily to identify the source of the problem. You may need to adjust your CSS code accordingly.

ALSO READ: Disadvantages of using WordPress Plugins in Your Website

Conclusion:

Custom CSS is a valuable tool for WordPress users looking to personalize their website’s appearance and functionality. Whether you choose to use a plugin or create a child theme, adding custom CSS allows you to take control of your site’s design. By following the steps outlined in this guide and troubleshooting common errors, you can confidently enhance your WordPress website’s visual appeal and user experience. Remember to always back up your website before making significant changes to ensure you can restore it in case of unexpected issues.