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.

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.

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!

The team at WestHost has done an excellent job designing and maintaining our website! Customer service is always excellent and response time timely.

Samantha M. (www.cgadventures.org)

In an age where companies frequently cut corners at the expense of customer satisfaction, WestHost is a breath of fresh air. I originally had low expectations for your service given the very affordable rates but have been consistently impressed with all facets or your business. You are the hands-down value leader for hosting services on the Web today.

Greg C.

I have recently implemented two Websites with WestHost and your support team by far has been the most responsive, helpful and easiest to work with group that I have encountered to date and I will surely recommend WestHost in the future.

Tom Ricci (www.riccicommunications.com)

The customer service has been great for us. We're just a bunch of radio people trying to understand the online marketplace and WestHost has been a great help in our online journey.

Eric F. (www.610kvnu.com)

You are doing a fantastic job at keeping low cost full featured Web hosting. We do Web design and have many clients with sites already on servers. We intend to not only bring all clients with new sites to you, but also to transfer existing sites to your servers. We are certain our clients will agree that you are a rare and wonderful find. Thanks and keep it up!

David F.

WestHost designed our website and when saw what with my ideas I was so surprised! It was more beautiful than I had imagined. They did such a great job that we decided to use their design as our logo.

Hope B. (www.loganmemorials.com)

The amount of care and concern displayed by your company and its employees was a breath of fresh air in contrast to the run-around received by [other companies I do business with] all of whom were passing the buck and arrogantly I may add! I am thrilled to do business with a company exemplifying such customer service skills as yours. I assure you that I will communicate my satisfaction and pleasure to as many of my clients that I can when the opportunity arises.

John Rossetti (www.thecateringmill.com)

Making the switch to WestHost has been great for our company. Their customer service has been excellent. They are quick to respond to problems we have and always follow through to make sure issues have been resolved to our satisfaction. Having all our web and email administration under one roof has been very convenient.

Lee T. (www.shopsei.com)

I selected WestHost for my site in 1997 and have been ever so grateful of my choice. Incredibly reliable, attentive and by far the most user friendly provider in the world. I am utterly impressed with your 'World Class' performance.