How to Add Custom Styling to an Off-the-Shelf WordPress Theme

WordPress theme developers do their best to create themes that will appeal to as many website owners as possible. No two website owners have exactly the same needs, though. For example, you might love everything about your website’s theme except the font choice for posts. You might find the header or footer too large or small. If your website’s theme is almost perfect, don’t waste time looking for a different theme — customize the one that you have. Here’s how to do it.

Customize Your WordPress Theme With a Plugin

If you don’t know how to edit PHP and CSS code — or simply don’t want to risk breaking a website that already works — you can customize your website’s theme with a plugin. WP Theme Customizer ($19) and CTL Tweaker ($14) are two options.

The elements of your website’s theme that you can customize with a plugin depend on the plugin’s capabilities. Some plugins allow only simple customizations such as changing the background colors or fonts of your pages. Some plugins may include element explorers that allow you to click any element that you’d like to change.

You should investigate the capabilities of a plugin thoroughly before you buy it to ensure that it supports the custom styling you require. You should also check to ensure that the plugin can customize your website’s theme without modifying the theme’s core files. Otherwise, you could lose the customizations when you update your website’s theme.

Create a Child Theme

If you understand how to use CSS or PHP coding, using a child theme is the best way to add custom styling to a WordPress theme. Since a child theme doesn’t modify a WordPress theme’s core files, you can download and install theme updates without losing your cutomizations.

You can create a child theme manually by creating a new directory on your server and giving it the same name as your website’s theme but with “-child” at the end. If your current WordPress theme is “twentyseventeen,” for example, the child directory should be “twentyseventeen-child.” You’ll also need to copy the “style.css” and “functions.php” files from your theme’s directory to the child directory and modify those files according to these instructions.

Alternatively, you can create a child theme automatically with a plugin such as One-Click Child Theme (Free).

Once you’ve created a child theme, you’ll make it your active theme from the “Themes” section of the WordPress “Appearance” menu. You can then modify the child theme’s PHP and CSS files directly with no risk of breaking the parent theme.

Customize Your WordPress Theme Directly (Not Recommended Without a Child Theme)

It is possible to directly edit your website’s CSS and PHP files without first creating a child theme. However, we strongly recommend against doing that for two reasons:

  • An incorrect modification could break your website’s theme. If you’re using a child theme, you can always revert to the parent theme to correct your error.
  • If you modify a parent theme directly, you’ll lose your modifications if you download a theme update.

If you’ve created a child theme and made it active — or you’re simply comfortable modifying your website’s parent theme — follow these steps to customize the theme.

  • Open the “Editor” section of the “Appearance” WordPress menu.
  • Click the name of the file that you want to edit. You’ll find it under the “Templates” heading on the right side of the page. When you click the file name, you’ll see its contents in the center of the page.
  • Make the desired customizations by typing them in the editor.
  • Click the “Update File” button at the bottom of the screen.