How To Add CSS To WordPress Using Child Theme
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
- 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
- Go to your WordPress dashboard:
- Appearance → Themes
- Find your child theme and click Activate.
Step 6: Add More CSS to Your Child Theme
Now that the child theme is active:
- 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
- Visit your site and check if the styles are applied.
- Use the browser’s Inspect tool (right-click → Inspect) to confirm CSS is loading from the child theme.