How to create a child theme

The best and recommended way to customize Ashford is to create a child theme. And the best way to start is to create a “clone” of the Ashford Pro theme.

For example, Axis is a Premium theme with all the features of Pro, but also adds beautiful visual design. It started as a clone of Pro then slowly the CSS was modified to execute the custom look and feel.

The only difference between Pro and Axis is the style.css and image files.

Before you start…

No matter your skill level, you should always create a child theme when starting a new project. Then make sure you are prepared with the following:

  • Unique theme name (Ashford themes for example all start with the letter “A”)
  • Logo or image from which to create the screen shot
  • Image that can be resized very small for the favicon

1. Clone Pro folder

The first step is to make a copy the entire Pro folder. Then rename the folder…

ashford_pro_anew

All official Ashford child themes start with the letter “a”. In this example, anew is just a suggestion. You can name your theme as you wish. Now, you should now have clone of all the files distributed with Pro.

Q: Why is cloning ashford_pro required? When ashford_pro can be modified directly?
A: So when there is a new release of Ashford, you can more easily find where and how your custom theme differs from Pro and then more easily migrate your changes to the new release. For more, see How to upgrade to the latest release of Ashford.

2. Open and edit style.css

The next step is to open the style.css and change the values:

  • Theme Name
  • Theme URI
  • Description
  • Author

You may also want to edit the tags, but it is not necessary. The license should remain unmodified.

3. Edit screenshot.png

All WordPress themes require a “screen shot” which is displayed on the Appearance editor screen. Open up your favorite image editor, create a screen shot (recommended size is 320:240px). Then replace the existing screenshot.png with the new (png, jpg and gif are acceptable).

This typically is a screen shot of the expected look and feel of the site with the theme applied.

4. Edit your favicon

Ashford displays the favicon from the child theme folder.

  • Dynamic Drive offers a free FavIcon Generator
  • Create a 16px x 16px JPG or PNG file
  • Follow the prompts to upload the file to FavIcon Generator
  • Download it and save it in your ashford_anew folder as favicon.ico

The latest release also allows you to add a mobile icon.

  • Create a PNG file 57px x 57px
  • Save it to your ashford_anew folder as favicon-mobi.png

5. Activate your theme

Dashboard > Appearance

At this point, you can FTP this to your wp-content/themes folder. When you view Dashboard > Appearance, you will now see your new child theme listed. At this moment, it is advised that you proof all your changes as they appear on the WordPress Admin screens. Once you like what you see, activate your new child theme.

If you are a beginner or not interested in “code”, you can use the Appearance editing tools built-into the WordPress Admin screens to customize your child theme.

Then the next step is to customize your child them using:

As a child theme developer, you will need to account for the use of the Appearance editing tools by those operating the site. It is possible to ignore these tools, but it is recommended that you account for their use.