How to customize a WordPress theme

Having done WordPress web design for several years now, I’ve found plenty of tips and tricks for how to customize a WordPress theme in a way that doesn’t cause problems later. If you’re just getting started with WordPress, you can skip dirty work like hosting setup and management by leveraging WordPress Hosting from GoDaddy.

Learn how to customize a WordPress theme

If you’re not familiar with WordPress development, it’s crucial to start with an existing theme that fits your overarching needs for functionality. Look at the theme’s options before you modify its files or create a child theme. Let’s move forward, examining in detail these steps:

1. Choose a good theme to customize.

2. Make changes using the Customizer.

3. Make further customizations with plugins.

4. Customize using custom CSS.

5. Make advanced changes with a child theme.

Ready to get started?

1. Choose a good theme to customize

It’s important to choose a theme that has the functionality that you want. Make sure it does what you want, and has a general look and feel you want rather than making a selection based on a couple of colors in their demonstration.

Usually, it’s easy to change colors, but modifying the overall look and feel will take some digging. Do you want a slider, testimonials, or eCommerce functionality? Make sure those pieces are integrated into the theme you choose, rather than trying to modify one without them if you’re newer to WordPress. If you’re having trouble selecting a WordPress theme, check out this article.

2. Customize using the Customizer

The Customizer in WordPress helps make it super-easy to get started with some changes to your WordPress site. When you’re logged into WordPress, navigate to your home page, and then click Customize in the top toolbar.

In the example here, OppSource can swap out their logo and site icon easily from the customizer, as well by selecting Site Identity.Another option that is often available when you look at how to customize a WordPress theme is modifying the color scheme by selecting Colors. Here’s an example from another website — but keep in mind your site could have different options based on what the theme developer has available.

3. Customize using plugins

Many times, the edit we need is at our fingertips — with a little help from a plugin!

Plugins, if you’re not familiar with the term, are magical when it comes to quickly giving us the functionality and style we may not be able to create easily at the beginning of our WordPress journey.

Independent developers will often build out these excellent add-ons and offer them at no charge, or offer them under a “freemium” model, That means basic functionality is free, but there’s an upcharge for more in-depth functionality.

Some customization plugins include:

• Site Origin CSS — Modify more visual elements without necessarily knowing CSS.
• Galau UI Visual Editor — Add or remove blocks from pages while viewing the front end of the site.
• Visual Composer — This plugin has been around for some time. It takes a bit of getting used to, but it’s built into many themes. Visual Composer lets you do almost anything you can imagine without knowing a ton of code. It’s a little imprecise, however, so ideally you’d know at least some CSS.
• Beaver Builder — A drag-and-drop page builder plugin for WordPress.
• Elementor Page Builder — Another drag-and-drop page builder plugin.

4. Customize using custom CSS

The first couple times I edited themes, I was just trying to add custom CSS. I used Jetpack with the function you can find by going to Appearance, and then selecting Edit CSS.Plenty of plugins will allow you to write custom CSS. If you’re worried about messing up anything else, but it’s just a styling issue, try one of these options as a beginner strategy:

• The CSS editor built into the Customizer
• Custom CSS in Jetpack plugin
• Advanced CSS Editor

With that last option, keep in mind it’s more for people who know CSS but want to add it directly from the Customizer and have it apply to different devices — phone, tablet and desktop.

5. Customize a WordPress theme using a child theme

There are natural limitations to what you can change with CSS, generally applies to aesthetics and typically doesn’t affect functionality.

If you’re working with the site’s structural elements, the best way to customize a WordPress theme is to create a child theme.

And if you’re new to this endeavour, read this article first.

Skip this step at your own peril. If you modify a theme instead of using a child theme, you will lose all of the changes you have made when your theme updates.

What’s a child theme?

An easy way to describe it is the child theme sits on top of a parent theme — or the main theme files — and your site will only use the version of the file from a child theme when there is one. So if you have an index.php file in the child theme, but not a page.php file, the index file will be used but the site will default to using the parent theme’s page.php template.

This lets site owners add, change or modify existing themes without having their work overwritten if they ever update the theme.

How is a child theme created?

The files in a WordPress theme control the look and feel of a site. To edit theme files, in your WordPress dashboard go to Appearance, and then select Theme Editor. You can also access theme files via FTP connection.

Ideally, you would use an FTP client like FileZilla to access them. That way, if something breaks, you can undo it easily.

In the /wp-content/themes/ folder, create a folder called parentthemename-child — replacing themename with the actual name. Your new child theme needs only one file: style.css. It should start with a standard header, something that looks like this:

Theme Name: Your child theme name
Theme URL: https://yourdomain.com
Description: A child theme of parent theme Name
Author: Your name or brand name
Author URI: http://www.yourdomain.com
Version: 1.0.0
Template: parentthemename
*/
@import url("../parentthemename/style.css");

Change parentthemename to the directory or folder name of the parent theme (the theme you’re modifying). Change your child theme name to a custom name. After you save these changes to your child theme’s style.css file, in the WordPress dashboard go back to Appearance, select Themes, and then activate your child theme.

Have I mentioned you should be doing your edits via FTP? It’s dangerous to edit your theme files in the /wp-admin/ theme editor. You might accidentally break something and lock yourself out. It’s safer to use FTP to edit your theme files.

How do I override the parent theme?

This is done by by copying template files to your child theme. If you take single.php, for instance, and copy it into the child theme folder, you can then make changes to the code or structure in that template. The single.php template file in your child theme will override the single.php in the parent theme, but the rest of the parent theme’s template files will be used.

To see if your edits are actually working, try adding something obvious, like a paragraph, to a template file:

<p style=”color: red; font-size: 50px”>I’m doing it right</p>

If you save this to a template in your child theme (e.g. single.php) and see it on your site, you know that your child theme templates are overriding the parent theme.

How do I avoid changing PHP?

Generally, PHP and HTML are mixed together. The content itself doesn’t live in the template. Rather, it lives in a particular WordPress database and gets dynamically inserted by PHP. Avoid messing with the PHP elements until you become familiar with WordPress theme development.

There are many ways to customize a WordPress theme

This is what makes WordPress trickier than a simple HTML, CSS, and Javascript site. But it also makes WordPress more scalable. Start customizing with built-in tools like the Customizer before moving on to more complicated methods like child themes.

Image by: Nilotpal Kalita on Unsplash