Extending Profits Theme Designs With Child Theme

Out of the box, Profits Theme front-end designs are just stunning. All of the skins included in the theme have beautiful layouts, color schemes, and look very professional. For a non-designer like me, this is awesome as I can set up my sites very quickly.

However, there are few cosmetic things that I want to do that requires me to edit the theme files. Right now I only need to modify the stylesheet but may need to tweak the template files as well. Actually, Profits Theme allows you to insert additional scripts in the header or footer so you can create your own CSS file, upload it somewhere in your WordPress directory, and link it from the Profits Theme option page.

Link to custom scripts and stylesheets from inside Profits Theme admin panel
Profits Theme’s additional header & footer scripts and codes

This is definitely easier if you only need to change the stylesheet or insert some JavaScript codes. But in my opinion, creating a child theme is the better way of extending any theme. Checking on Profits Theme files, currently it doesn’t fully support child theme, e.g. child theme cannot override the parent theme’s PHP functions as explained in WordPress codex but you can customize the stylesheet just fine.

The main benefits of creating a child theme is:

  • You don’t touch the parent theme’s files at all. This means that when there are Profits Theme updates in the future, you only need to upgrade the parent theme and your customization should still work (unless there are major changes to the structure of the theme).
  • If you break anything in the child theme and not sure where the problem is, simply deactivate it and activate the parent theme to revert back to the default state. You can then create a new child theme and do the customization one by one so you can pinpoint exactly the part that was giving you the problem.
  • You can create multiple child themes, e.g. seasonal themes or just experimenting with different designs.

Creating Profits Theme’s child theme is exactly the same as creating normal WordPress child theme. You start by creating a new style.css file and define the child theme details there (name, author, URL, parent theme).

/*
Theme Name: Profits Theme Child
Description: Child theme for the Profits Theme
Author: Your Name
Template: profitstheme
Version: 0.1
*/

@import url("../profitstheme/style.css");

Line 2 is where you define the child theme’s name and it can be anything. Line 5 is important, it’s where you tell WordPress the parent theme’s folder name so in this case, WordPress will look for the parent theme’s file in ‘profitstheme’ folder in the themes directory. The rest are optional, i.e. you can just not define the theme description or author.

Unless you want to re-do the entire style from scratch, you need to import the parent theme’s stylesheet so for anything that you don’t override in the child theme, WordPress will get the styles from the parent’s stylesheet. The importing is done on line 9 in the example above.

Once you are done creating the style.css file, create a new folder in your WordPress themes directory and upload the CSS file there. Then, on WordPress dashboard go to Appearance and you should see your child theme there. Activate the child theme and check if your site still looks and functions correctly.

If you don’t see your child theme, most probably there is problem with the style.css file. Either the template parent is not defined correctly or there is line break problem caused by your text editor. Try to re-open and save the style.css file again using Notepad and re-upload the file.

If everything looks ok, great! What happens at this point is WordPress will check your child theme first to see if there is any custom styles or templates that should override Profits Theme‘s styles or templates. If none found, it will then fall back gracefully to the parent theme.

In my next post, I will explain what I did to this site’s header to make it looks nice and SEO-friendly at the same time.