How to Rebrand a WordPress Theme

March 10, 2015
Developers, Wordpress
LinkedInTwitterFacebookEmail

Rebranding a WordPress theme is a small change that can really make your work look more professional. It doesn’t take much, just a few minutes, a screenshot of the finished site, and access to the files.

Rebranding WP Theme - A Computer on a Chair

 

What You’ll Need

To make this happen, you’ll need either FTP access, or access to the files in a file manager.

You’ll also want to make sure the site isn’t live when you do this, as it will shut it down for a few moments. The best time to do this is right before you launch so you can get a good image of the finished theme (more of that later).

Step 1 – Changing the Theme Name

First, you’ll want to edit the theme name. In WordPress, the theme name is associated with the folder it’s in, so if you change the theme name, you have to change the name of the folder for the theme as well.

The file that has all this information is style.css. Go to this folder structure in your website:

http://yourdomainname.com/wfc-content/themes/themeName

Once you get to the theme folder that you’re editing (themeName above), you’ll find a “style.css” file under that folder. Open up the “style.css” file in an editor.

This is my custom theme, but I started with a starter theme which had it’s own name and image. The most important one we’ll edit is the Theme Name. That’s what will need to match the theme folder. But WordPress also shows some more information in the Theme folder, including the Description, Author, and the Author URI. Here’s the minimum I’d recommend, though only the theme name and template is required:

Those will be the four big ones, but you can edit more if you’d like.

Next, open up your file structure, and change the Folder Name of the Theme to the theme name you just used:

Theme Name: KimJoyFox

Folder for the theme: KimJoyFox

Now my folder structure looks like this:

http://yourdomainname.com/wp-content/themes/KimJoyFox

Before you continue, load your site and make sure everything works. If not, check your theme name and theme folder name.

Not all themes will work with rebranding, and frankly, not all themes should. Don’t take someone else’s theme and just put your name on it. If you’re rebranding a theme, it should be because you started with a “starter theme”. If you want to still customize a theme a bit for your client, check out the image area below. You can change the image while still giving credit to the theme’s author.

You can also create a child theme of the main theme and rebrand that for your client. Keep in mind the child theme’s name won’t be very editable, but at the very least you can change the author, the image, etc. Check out Creating a Child Theme for more information.

Step 2 – Changing the Image

Every theme has an image associated with it in the WordPress Appearance-> Themes page.

The file name is “screenshot.png”. Yes, that must be the file name. The size of the image should be 880×660 pixels, as recommended by the WordPress Codex.

Replace that file, and then reload the Themes page. Your new screenshot should show up now for that theme! If it doesn’t, check to make sure your theme is working (the theme title matches the theme folder name) and you uploaded the image into the right folder. Also, make sure you clear any cache that might be saving it, either on your browser or on the WordPress site.

I mentioned back at the top that the best time to rebrand a theme is right before you launch. The reason is the image here – it’s much easier to just take a screenshot of the site once it’s finished.

Summary

Rebranding is actually a fairly simple process, whether you’re doing it with a main theme or a child theme. Just remember to match the theme name with the theme’s folder name and you’ll be ready to go in no time!

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Comments