Create Your Genesis Child Theme

Pin

To create your Genesis child theme, you have to have a minimum level, since you are going to have to manipulate files, and knowledge of CSS and PHP. Or at least, you know what it is.

The Genesis framework works only with child themes. First, obviously you need the Genesis framework.

Files And Directory

Create a new folder on your desktop and give it the name of your child theme.
For your child theme you will need 3 files:

  • functions.php
  • style.css
  • screenshot.png (880px by 600px saved in PNG format)

Inside the directory, we will create a file that we will call style.css, and inside we will include the following code.


/*
Theme Name: Your Theme Name
Theme URI: https://your-theme-url.com/
Description: Theme Description
Author: Your Name
Author URI: https://your-site.com/
Version: 1.0
Template: genesis
*/
  • Theme name: The name of the child theme.
  • Theme URI: This is a site where they can view a demo or find more information about the child theme.
  • Description: Describe your child theme.
  • Author: Your name.
  • Author URI: Your personal website address.
  • Version: For future versions. Start with 1.0.
  • Template: The name matching the parent Genesis theme (case sensitive).

The next thing we are going to do, in the same folder, is to create a file called functions.php, and inside we will include the following code.


<?php
//* this will bring in the Genesis Parent files needed:
include_once( get_template_directory() . '/lib/init.php' );

//* We tell the name of our child theme
define( 'Child_Theme_Name', __( 'Genesis Child', 'genesischild' ) );
//* We tell the web address of our child theme (More info & demo)
define( 'Child_Theme_Url', 'http://child-theme-url.com' );
//* We tell the version of our child theme
define( 'Child_Theme_Version', '1.0' );

//* Add HTML5 markup structure from Genesis
add_theme_support( 'html5' );

//* Add HTML5 responsive recognition
add_theme_support( 'genesis-responsive-viewport' );

add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
    wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}

Once you have the files ready, compress the directory (folder) in a zip, activate Genesis, upload in WordPress your child theme, Appearance -> Themes -> Add New, and activate it.

create your Genesis child theme addPin

We started with the easiest, a start, how to create your Genesis child theme. Now that you have the base, you can add more files, folders, add code in your style.css or in other .css that you want to add to structure your child theme.

References:
sitepoint.com

Leave a Reply

Your email address will not be published. Required fields are marked *

13