How To Add CSS To WordPress Using Child Theme

Bywsadmin

In this article,  we will show how to add CSS in WordPress using a child theme, which is the best practice for safe, update-proof customization of your site’s styles and code.  A child theme lets you override or add styles to your parent theme without losing your changes when the parent theme updates.

Step 1: Access Your Site Files

You’ll need access to your WordPress site files using one of the following:

  • FTP/SFTP (e.g., via FileZilla)
  • Hosting File Manager (like cPanel)
  • Local development environment (e.g., LocalWP)

Navigate to:

/wp-content/themes/

 Step 2: Create a New Child Theme Folder

  1. Inside /wp-content/themes/, create a new folder.

Name it something like:
pgsql
your-theme-name-child

Example: if your theme is “twentytwentyfour“, name the folder:

twentytwentyfour-child

Step 3: Create a style.css File

Inside your child theme folder, create a file named:

style.css

Add the following to the top of the file (update accordingly):

/*

Theme Name: Twenty Twenty-Four Child

Theme URI: https://example.com/

Description: Child theme for the Twenty Twenty-Four theme

Author: Your Name

Author URI: https://yourwebsite.com/

Template: twentytwentyfour

Version: 1.0.0

*/

/* Add your custom CSS below this line */

body {

    background-color: #f4f4f4;

}

 Important: The Template: value must match the folder name of the parent theme exactly, including case.

Step 4: Create a functions.php File

Also in the child theme folder, create:

functions.php

Add this code to load the parent theme’s styles and your custom styles:

<?php

// Enqueue parent and child theme styles

function child_theme_enqueue_styles() {

    $parent_style = ‘twentytwentyfour-style’; // Change this to match the parent theme’s style handle

    wp_enqueue_style($parent_style, get_template_directory_uri() . ‘/style.css’);

    wp_enqueue_style(‘child-style’,

        get_stylesheet_directory_uri() . ‘/style.css’,

        array($parent_style),

        wp_get_theme()->get(‘Version’)

    );

}

add_action(‘wp_enqueue_scripts’, ‘child_theme_enqueue_styles’);

If you don’t know the parent theme’s handle, check the parent theme’s functions.php for wp_enqueue_style().

Step 5: Upload and Activate the Child Theme

If using FTP/File Manager, make sure your folder with the two files (style.css and functions.php) is uploaded to:

/wp-content/themes/your-child-theme

  1. Go to your WordPress dashboard:
    • Appearance → Themes
  2. Find your child theme and click Activate.

Step 6: Add More CSS to Your Child Theme

Now that the child theme is active:

  1. Open style.css again.

Add any custom CSS you need at the bottom. Example:

h1, h2 {

    font-family: ‘Georgia’, serif;

    color: #222;

}

.site-footer {

    background-color: #000;

    color: #fff;

}

Step 7: Test Your Site

  1. Visit your site and check if the styles are applied.
  2. Use the browser’s Inspect tool (right-click → Inspect) to confirm CSS is loading from the child theme.

Similar Posts