When wanting to modify Clipper to suit specific needs of your website, the best practice is to create a child theme. Using a child theme ensures that the changes you create aren’t deleted when you go ahead and update your theme.
What is a Child Theme?
A child theme inherits its functionality from a parent theme. A child theme is used when you need to customize an existing theme although need the ability to update the theme. In the case of this documentation, the parent theme is ‘Clipper’.
Consider the Following Prior to Creating a ‘Child Theme’
To create a child theme for Clipper you will need to have:
- A basic understanding of PHP, HTML and CSS
- Some knowledge of child themes for WordPress
- The ability to add files to your hosting site
Step 1) Creating a Child Theme Directory
On your local host Clipper site (/wp-content/themes/), create a new folder named “clipper-child”. If you’re working remotely, you’ll need to sftp or ssh to the server first and create it there.
Step 2) Creating a Style Sheet File
Inside the new child theme folder, create a file called, “style.css”. It’s where you’ll place any style changes you want to make.
The stylesheet must begin with the following code so copy and paste it:
/* Theme Name: Clipper Example Child Theme Theme URI: http://appthemes.com/ Description: Example child theme for the Clipper theme Author: AppThemes Author URI: http://appthemes.com/ Template: clipper Version: 1.0.0 */ /* Add you custom styles below */
Further Steps
- Replace the “Author” and “Author URI” with the details relevant to you
- The “Template” entry refers to the directory name of the Clipper parent theme
Note:
If you renamed the default ‘clipper’ theme folder, you’ll need to change the “Template” entry to match it.
Step 3) Creating a Functions File
Inside the same child theme folder, create a file called, “functions.php”. Copy and paste in the code snippet below. This will load your child theme “style.css” file that we created in the previous step.
<?php
/* Clipper child theme functions.
*
* BEFORE USING: Move the clipper-child theme into the /themes/ folder.
*
* @package Clipper\Functions
* @author AppThemes
* @since Clipper 2.0.2
*/
/**
* Registers the stylesheet for the child theme.
*/
function clipper_child_styles() {
global $clpr_options;
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
// Enqueue color scheme.
wp_enqueue_style( 'at-color', get_template_directory_uri() . '/styles/' . $clpr_options->stylesheet );
// Disable the Clipper default styles.
//wp_dequeue_style( 'at-main' );
// Disable the Foundation framework styles.
//wp_dequeue_style( 'foundation' );
}
add_action( 'wp_enqueue_scripts', 'clipper_child_styles', 999 );
/**
* Registers the scripts for the child theme.
*/
function clipper_child_scripts() {
wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . '/general.js' );
// Disable the Clipper default scripts.
//wp_dequeue_script( 'theme-scripts' );
// Disable the Foundation framework scripts.
//wp_dequeue_script( 'foundation' );
//wp_dequeue_script( 'foundation-motion-ui' );
}
add_action( 'wp_enqueue_scripts', 'clipper_child_scripts', 999 );
/**
* This function migrates parent theme mods to the child theme.
*/
function clipper_child_assign_mods_on_activation() {
if ( empty( get_theme_mod( 'migrated_from_parent' ) ) ) {
$theme = get_option( 'stylesheet' );
update_option( "theme_mods_$theme", get_option( 'theme_mods_clipper' ) );
set_theme_mod( 'migrated_from_parent', 1 );
}
}
add_action( 'after_switch_theme', 'clipper_child_assign_mods_on_activation' );
// You can add your own actions, filters and code below.
Step 4) Activating Your Child Theme
Now you’re ready to enable your new child theme on your website. Once you log in to your site, you should see your child theme listed and ready for activation.
- Log in to your site’s admin panel
- Go to “Appearance” => “Themes”
- Click the “Activate” button
Visit your website once you’ve activated it.
Guess what? Nothing looks different at all! That’s because you’ve just setup the skeleton child theme.
From here, you can add page templates, different styles, override default functions, and more.
Adding a Screenshot to Your Child Theme
It’s pretty boring not having a screenshot to identify your child theme.
To create your own after your child theme is completed, you’ll need to know the following:
- The screenshot should be named “screenshot.png”
- The image size should be 1200×900 (to support HD displays)
- Place it in the root of your child theme directory
Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.