This article will show you how to add custom styles or css to your WordPress site without editing your theme files, and see changes in real-time.

 Step 1: Log in to Your WordPress Dashboard

  1. Open your browser and go to your WordPress site admin login page.
    • Usually: yoursite.com/wp-admin
  2. Enter your username and password.
  3. Click the Log In button.

Step 2: Open the WordPress Customizer

  1. In the left-hand sidebar of the dashboard, go to:
    • Appearance → Customize
  2. This opens the WordPress Customizer, which shows a live preview of your site on the right and customization options on the left.

 Step 3: Open the “Additional CSS” Panel

  1. In the left sidebar, scroll down and click on “Additional CSS”.
    • This opens a built-in code editor where you can type or paste your CSS code.

 Step 4: Add Your Custom CSS Code

Inside the editor, type your CSS code.
Example:

body {

    background-color: #f0f0f0;

}

h1 {

    color: darkblue;

    font-family: ‘Arial’, sans-serif;

}

.site-footer {

    background-color: #333;

    color: #fff;

}

  1. As you type, you’ll see the live preview update on the right.
    • Some changes may not appear if the element isn’t currently visible in the preview.

Step 5: Publish Your Changes

  1. Once you’re happy with the preview:
    • Click the “Publish” button at the top of the left sidebar.
  2. Your CSS is now live and saved.

Step 6 (Optional): Test on the Frontend

  1. Visit your website normally (not in the Customizer) to see the live changes.
  2. Use your browser’s Inspect Tool (Right-click → Inspect) to verify that your styles are applied correctly.

Notes:

  • This method does not require a child theme.
  • It is safe and update-proof, because your CSS is saved independently of your theme files.
  • If you switch themes, the CSS may still be stored, but it might not apply the same way depending on the new theme structure.

Related Posts