How to modify a WordPress theme

There are two ways to modify a WordPress theme: the fast way and the smart way.

The fastest way is to edit the files of the theme by selecting the files with the “Appearance”, “Editor” menu option. The drawback is that when the theme is updated your customizations will be wiped out. The update process will overwrite the files you changed, so all of your changes will disappear.

A better way of modifying a theme is to create a “child theme”. This has two advantages:

  1. By creating a child theme you maintain the changed files in a separate theme (the child theme) so when you update the original (parent) theme your customization is not affected.
  2. You keep a separate copy of your changes in the child theme, so you can always easily find your modifications without reading through the theme files. You will only maintain the changed lines from the style.css file and your functions.php file will only include your custom functions. Your images folder will only contain your image files.

 

In this tutorial we will create a child theme for the Simplify theme

  • Use your favorite FTP application (mine is FileZilla) and create a folder for the child theme in the wp-content/themes folder
    • Right click the “themes” folder and select “Create directory”

filezilla create directory

 

  • Enter the name of the folder of the child theme

filezilla create directory name

 

  • Double click the new folder name to open it

filezilla navigate to directory

 

Right click the empty area of the directory listing and select “Create new file”

filezilla new file

 

Enter style.css as the file name and click OK

filezilla new file name

 

  • Log into your site as administrator,
  • Navigate to the Theme Editor,

wordpress appearance editor select

 

  • In the upper right corner select the child theme and click the Select button

wordpress theme editor select theme

 

  • In the upper right corner click the “Stylesheet” to open the style.css file

wordpress theme editor select styles file

 

Copy the following to the editor window.

  • Enter the name of the new child theme to the “Theme Name” line
  • Replace “simplify” with the name of the original theme folder.

 

/*
Theme Name:     Simplify Child
Theme URI:      http://example.com/
Description:    Child theme for the Simplify theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       simplify
Version:        0.1.0
*/
@import url("../simplify/style.css");

 

  • Click the “Update File” button to save your changes

wordpress theme editor update file

 

Select and activate the new child theme

  • On the left side select “Appearance” , “Themes”

wordpress themes select

 

  • On the theme list click the empty image of the new child theme you just created

wordpress themes select child theme

 

  • Click the “Save & Activate” button to activate the child theme

wordpress theme activate

 

 

 

For more information see:

http://codex.wordpress.org/Child_Themes

Leave a Reply