How To Customize Your WordPress Theme
Looking to make changes to your WordPress theme? With just a little help you can customize and even create your own future themes.
Have you ever downloaded a WordPress theme, only to find out that the customization options are very limited? Or have you wanted to make major changes to your theme but are worried that you’ll break the site? In this blog post, we’ll take you through the beginning steps of customizing any WordPress theme.
With a little background knowledge of HTML and CSS (knowing PHP can be helpful as well), you can be on your way to customizing any WordPress theme to your liking. The trick is to do it the right way to avoid future issues.
There are essentially three ways to customize your WordPress theme. We’ll walk you through each of these processes to help turn your default theme into the website you’ve been dreaming of:
- Making changes in the WordPress Dashboard
By far the easiest way to customize your WordPress site is by using the Appearance Editor in the WordPress Dashboard. However, this is also the most limited option; you will only be able to change certain colors, images and other minor style options.
To access the editor, log in to WordPress, hover over ‘Appearance’ in the left-hand toolbar, then click on ‘Customize’. Each theme will be different, but it is usually pretty easy to explore the different customization options available. Generally you’ll be able to add images, move around and add widgets, and change the colors and fonts you want on certain areas of your website. With this option, you won’t handle any code or ever need to worry about breaking the site.
- Download a custom CSS plugin
If you’d like more styling options, you can download a CSS plugin to have the ability to alter some of the CSS associated with the site. CSS stands for Cascading Style Sheet and it’s used for determining the look and feel of a website. Elements like font, color changes and layout are all done using CSS. Every website has at least one CSS file that details all of the styling for that particular site.
By downloading a custom CSS plugin, you can change the current styling of your WordPress theme. We recommend WP Add Custom CSS or Jetpack to be able to accomplish this. Once you’ve downloaded the plugin, you can usually make changes to the CSS by hovering over ‘Appearance’ in your WordPress Dashboard, then clicking on ‘Edit CSS’. You won’t see any code in the editor, but you can just add the CSS code that you want and it will override what’s currently on the site.
In order to do this, it’s best to pull up your website in another tab. From there you can see the CSS code of your site by right clicking anywhere on the web page, and clicking on ‘Inspect’ if you’re using Google Chrome, or ‘Inspect Element’ if you’re using Firefox or Safari. Click on the area of the website you want to inspect, and the tool at the bottom should navigate you to the corresponding code. You can then copy and paste that snippet of code (don’t forget the {} braces) and paste it into the editor in your WordPress Dashboard.
Once you’ve pasted the snippet of code, you can modify the CSS to make it look like you want it to. Click ‘Save Stylesheet’ to push your changes live. If you need a more detailed walkthrough, check out this support article from WordPress.com
If all of this talk about code is entirely foreign to you, consider reading up on some basics of CSS on either W3 Schools or Codecademy.
- Create a child theme
The third way to change your WordPress theme is by creating a child theme. Although this is a more challenging option, it is by far the best route for making major changes to your WordPress theme. With a child theme you can change just about anything you want on your WordPress site, all the way down to the PHP code powering your site.
So first off, what’s a child theme? A child theme is like a companion to your main WordPress theme currently activated for your site. Unlike a generic WordPress theme, a child theme functions with the parent theme (which is just the primary theme you’re using). A child theme piggybacks onto the parent theme, but you will only edit the child theme. This means you’re not editing the actual theme, allowing you to make security updates to your theme down the road without your custom changes affecting the update.
Technically, you can edit the parent theme, but we strongly recommend the child theme route to keep your site from breaking once you run an update. Also, if you ever want to revert back to your original site, all you have to do is take off the child theme and you’re back to square one.
To start, you’ll first need to create the child theme. Make a new folder in your WP-CONTENT/THEMES folder. You can do this either through FTP, your web host’s file manager, or just locally and then zip your child theme folder and install it through WordPress. Feel free to name the new theme to whatever you want, but we suggest naming it after the parent theme, and then adding ‘child’ onto the end. For example, if you’re working with the Twenty Fifteen theme, you can name the child theme twentyfifteen-child.
Next, create a CSS file to hold all of the styling for your website. Create a new text file (you can do this is any text editor) and call it style.css. Add this .css file to your child theme folder. The only code you’ll need to initially add comes from the parent theme. You can simply copy and paste the code snippet below at the top of your style.css file and then replace the ‘Theme Name’, ‘Theme URI’ and ‘Template’ with the actual theme you’re using. Feel free to replace the other text with whatever is relevant to your site, but those are the only three you’ll need to fill in.
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/
Once you’ve added that folder, you should be able to activate your child theme. In your WordPress Dashboard, hover over ‘Appearance’, then click on ‘Themes’. Your newly created child theme should appear. Just click on ‘Activate’ to make your child theme go live.
In order to sync up your child theme with the existing parent theme, you’ll need to inherit the the parent theme’s CSS. Before doing this, create a PhP file in your child theme folder. Call the new file functions.php and copy the code snippet below into the file.
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>
With just these two files in your child theme folder, you should be inheriting everything you need from the parent theme. Once the style.css file and function.php file are uploaded to WordPress, your site should look identical to the parent theme.
So what was the point of all that if your child theme is identical to the parent theme? Well, now you can make whatever changes you want to the CSS or even PHP files of your site and not have to worry about breaking the entire theme. This is where you can explore what you want to change and apply those changes to the child theme. If at any time you want to abandon your changes, you can easily make those changes in your newly created .css or .php files, or even revert to the original theme by deactivating the child theme.
You can edit the CSS in a similar way to how we did before. Go to your site, open up the dev tools in your browser (right click and click on ‘inspect’), and find the CSS code snippet you want to modify.
If we lost you at any time during this blog post, or if you’d like a more detailed explanation, you can always refer back to WordPress.org’s Codex page on Child Themes. Or, if you’re a WestHost client and you’re having trouble getting your files uploaded to the server, don’t hesitate to contact our friendly tech support!
Make sure you check out WestHost’s Premium WordPress Hosting to host your newly customized theme!