WordPress: Create a child theme

everything case sensitive

/*
Theme Name: University Child
Theme URI: http://www.vivathemes.com/university-free-wordpress-theme/
Description: A theme that can be used for educational, academic, institutions or business websites. Fully responsive. Front page image slider. Featured posts or pages below the slider. Integrated social media icon fonts, 11 available. Easily upload your logo image.
Author: Viva Themes
Author URI: http://www.vivathemes.com
License: GNU GPL
License URI: http://www.gnu.org/licenses/gpl.html
Version: 1.0.3
Tags: light, white, four-columns, fluid-layout, responsive-layout, custom-background, custom-menu, featured-images, custom-colors
Text Domain: university
Template: university
University Theme, (C) 2014 Viva Themes
*/

/* =Imports styles from the parent theme
————————————————————– */
@import url(‘../university/style.css’);

/* =Theme customization starts here
————————————————————– */
body {
background: #ffffff;
color: #000000;
font-family: ‘Calibri’, arial, helvetica, tahoma, sans-serif;
font-size: 16px;
}

 

 

According to our recent WordPress Themes Survey, 85% of our customers customize their themes, and only 35% use a child theme when doing so. This may be due to a lack of understanding as to what a child theme is, or due to the perceived difficulty of creating one. In this tutorial, we will go over how to create and use child themes, and why using them is so important. (A special note for Elegant Themes customers only: If you are only looking to perform simple CSS changes to your theme, then you can use the Custom CSS box in ePanel instead of creating a child theme. For more in-depth changes that require editing php files, a child theme must be used.)

icon-getting-started

Why You Should Be Using Child Themes

Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. By creating a child theme, you create a separate set of files that you can use to customize the theme without affecting the original theme at all. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original.

understand

Getting Started

In this example, we will be creating a child theme for our Foxy theme. First things first, we need to create a new folder for your child theme. Naming it something like /foxy-child/ is conventional. Within your new theme folder, create a file called style.css and fill in the information as outlined below. The theme Name, URI, Description and Author are totally up to you.

/*
 Theme Name:     Foxy Child Theme
 Description:    Foxy Child Theme
 Author:         Elegant Themes
 Author URI:     http://www.elegantthemes.com
 Template:       Foxy
 Version:        1.0.0
*/
@import url("../Foxy/style.css");
/* =Theme customization starts here
------------------------------------------------------- */

The most important parts of this file are the “Template:” and @import sections, which identifies the parent theme imports the CSS from the original. You must ensure that the path to your parent theme’s css file is correct, and that the “Template:” parameter correctly identifies the name of your parent theme. If you are using a different theme, then adjust the values accordingly. Everything must be case sensitive! The folder of our parent theme is “Foxy” with a capital F, and the @import URL reflects this.

Activating Your Child Theme

After you have created your child theme folder and style.css file, you can upload and activate your new child theme. Uploading and activating a child theme is no different than a normal theme, simply upload it via the Appearances > Themes page in your WordPress Dashboard and activate it. Before you upload it, you must first ZIP it. Macand Windows both have native ZIP functionality. Make sure that your parent theme is also uploaded (In the case of our example, the Foxy theme).

child-upload
icon-php

Modifying Your Theme’s CSS

We have now created our Foxy child theme and uploaded it. Because all we have done is import the original theme’s CSS, the theme will look exactly like the original. To modify your theme’s CSS, you can add any changes to your child theme’s CSS file below the @import line. All new CSS information is added after the original theme’s CSS is loaded. Because our new CSS is located below the original’s in the file, all new CSS styles will overwrite the original’s. For example, let’s say that we want to change the font weight of the “price tag” on our theme’s homepage. Right now it’s bold and gray, and we would like to make it thinner and green. We can add the relevant CSS to our foxy-child/style.css file as follows:

/*
 Theme Name:     Foxy Child Theme
 Description:    Foxy Child Theme
 Author:         Elegant Themes
 Author URI:     http://www.elegantthemes.com
 Template:       Foxy
 Version:        1.0.0
*/
@import url("../Foxy/style.css");
/* =Theme customization starts here
------------------------------------------------------- */
.et-price-sale { color: #5bbc26; font-weight: 300;}

Childtheme theme thumbnail

Once this change is added, the CSS in the child theme’s style.css file overwrites the original. In this case we get a nice green price tag as shown here:

 

 

4down voteaccepted

Create image file in PNG Format having name screenshot.png and save it in themes root folder.The recommended image size is 880×660. Even recommended image size is 880×660 though it will only be shown as 387×290 but the double-sized image allows for high-resolution viewing on HiDPI displays.

For more information see this page.

If you don’t already have a screenshot of your theme, You can create one easily by following below steps:

  1. Point your browser to the blog currently using the theme.
  2. Press the Print Screen button on the keyboard.
  3. Open a new file in Photoshop.
  4. Change the size to 300 by 225 (in pixels)
  5. Press Ctrl + v or Right click > Paste.
  6. With the Move tool activated, resize the screenshot to in the 600 x 450 space.
  7. Go to File > Save for Web…
  8. Save it as a PNG file.
  9. Name it screenshot.
  10. Place your image file in the child theme’s root folder.
shareimprove this answer
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s