Before going into the heart of the matter and edit the templates, I would like to begin by answering a simple but important question: Why create your own WordPress theme? There are already many existing themes, many of which are of very good quality.

Moreover, embarking on such an adventure requires a lot of time and energy. Yes, but there are also a lot of benefits to creating your own WordPress theme and these are not negligible. According to WordPress developers:

• Customization is not affected when parent theme is updated.
• Inherits parent theme features.
• The flexibility of customization without coding the whole theme.

We will go through the steps to create Genesis child theme from scratch. Of course, this is not a complete training given the breadth of WordPress, but this article will guide you on a solid foundation to start your project on the right foot.

Genesis Child Theme Files

Create a new folder inside wp-content > themes and give it a name of your choice. We are naming our file as Custom.

Now inside your child theme folder, create the following three new files:

• functions.php
• style.css
• front-page.php

1. Functions.php File

This file contains our custom functions which we will create in our Genesis child theme to modify default functionality of Genesis as well as WordPress itself.

For this, open the file in text editor and start with adding standard documentation in the form of doc block.

<?php

/**
 * Theme customizations
 *
 * @package	Custom
 * @author	Ibad Rehman
 * @link	https://github.com/ibadrehman/custom
 * @copyright	Copyright (c) 2018, Ibad Rehman
 * @license	GPL-2.0+
 */

This piece of a document contains information regarding our theme name, its author, the link where its hosted and the license type.

Visit codex.wordpress for detailed information on functions.php file in WordPress.

The next line of code we are adding will initialize the Genesis framework. There are two methods of doing so. First, by referencing ini.php file inside your functions.php file and second which we will be using in the tutorial is by hooking our code into the Genesis setup function.

add_action( 'Genesis_setup', 'custom_setup',15);

This function hooks to Genesis setup which is the first parameter. Next parameter is the name of the function we will be using to execute our custom Genesis child theme functionalities. Finally, the third parameter is the value which ensures that our function file executes after the parent theme so it may override our custom functionality.

Text domain in WordPress is an identifier that helps WordPress to identify between all loaded translations and for that, we will add another function to our functions.php file as follows:

  // Load child theme textdomain.
load_child_theme_textdomain( 'custom' );

For our Genesis child theme setup function, we will initialize a custom wrapper function.

function custom_setup(){}

And inside that function we will initialize the following:

• Constants
• Theme Support

Constants

Constants are useful when you need to modify your Genesis child theme. Changes made here will be implemented across the theme.

Add the following snippet to add constants.

      // Define theme constants.
define( 'CHILD_THEME_NAME', 'Custom' );
define( 'CHILD_THEME_URL', 'https://github.com/ibadrehman/custom' );
define( 'CHILD_THEME_VERSION', '1.0.0' );

Theme Support

After defining constants, we are towards adding theme support for our Genesis child theme. Theme support can be added to various WordPress options, such as menus, posts, gallery, caption, comments etc.

To implement that, we will use the function add_theme_support function.

// Add HTML5 markup structure.
	add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption'  ) );
	
	// Add viewport meta tag for mobile browsers.
	add_theme_support( 'Genesis-responsive-viewport' );
	
	// Add theme support for accessibility.
	add_theme_support( 'Genesis-accessibility', array(
		'404-page',
		'drop-down-menu',
		'headings',
		'rems',
		'search-form',
		'skip-links',
	) );

Lastly, for our theme support, we will also add support for our footer widgets.

  // Add theme support for footer widgets.
add_theme_support( 'Genesis-footer-widgets', 3 );

Getting Rid of Extra Sidebar Layouts

By default, Genesis comes with six layout options and as a theme developer, it is our responsibility to give styling support for each one of them. Although it is not mandatory to have all six layout options. Therefore, we will get rid of three options altogether so we are only left with three options.

To do so, add this code to functions.php file.

  // Unregister layouts that use a secondary sidebar.
Genesis_unregister_layout( 'content-sidebar-sidebar' );
Genesis_unregister_layout( 'sidebar-content-sidebar' );
Genesis_unregister_layout( 'sidebar-sidebar-content' );

  // Unregister secondary sidebar.
unregister_sidebar( 'sidebar-alt' );

2. Style.css File

We will begin styling CSS file by adding the standard header text which contains information about theme name, author, version, description, and template etc.

Styling HTML

Now we need to add support for HTML5 Reset and default HTML5 elements. For starters, HTML5 reset any default browser styling and ensure better rendering of HTML5 elements.

Default HTML5 elements add styling for basic elements like headings, list, buttons, paragraphs etc.

Styling Theme Structure

After that, we will add CSS required for our Genesis child theme structure. In this section, we intend to style our site header, section and footer and their respective classes are:

• site_header
• site_inner
• site_footer

Styling Theme Navigation

Moving ahead, we will add styling to our theme navigation. In this particular child theme, we will have a centered solid navbar at the top of our page.

If you find yourself lost while styling your child theme, you can refer to Genesis sample theme structure. It has a simple structure and code is easy to follow.

Adding Fonts

An important element in theme styling is the font used for its headings and body text. In order to add fonts to our child theme, we will make use of Google fonts. To do so, we need to edit two files: functions.php and style.css respectively.

In functions.php file, we will use wp_enqueue_style function inside our custom function.

function custom_equeue_styles() {

	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Lobster' );

}

As you can see by looking at the URL, we have used two popular fonts; Roboto for body text and Lobster for headings.

Now we also have to add an action to hook our fonts with our child theme.

  // Add Google Font stylesheet.
add_action( 'wp_enqueue_scripts', 'custom_equeue_styles' );

3. Front-page.php File

You may have noticed that most WordPress themes use this template, which usually displays static posts or latest posts as per user preferences. This is not a require template file for a theme but we will use this in our child theme to display latest posts or custom widgets (out of the scope of this article).

Let’s go ahead and create a new page inside the root directory and name it as front-page.php. Just like style.css and functions.php files, here we will also add documentation doc block after the starting tag of PHP.

<?php

/**
 * Theme customizations
 *
 * @package	Custom
 * @author	Ibad Rehman
 * @link	https://github.com/ibadrehman/custom
 * @copyright	Copyright (c) 2018, Ibad Rehman
 * @license	GPL-2.0+
 */

Next, we will initialize a function which will remove posts being displayed on our page.

function custom_home_page_setup() {

	// Remove posts.
	remove_action( 'Genesis_loop', 'Genesis_do_loop' );
}

This function will be useless if we do not define the WordPress action to specify the position of our theme.

add_action( 'Genesis_meta', 'custom_home_page_setup' );

Lastly, we will initialize Genesis framework.

Genesis();  (Needed for any template we create)

Sample Data

Currently, our theme is raw and does not look attractive. Therefore, to spice things up, we can use sample data available by WordPress and upload sample pages, comments, and posts.

Go to WordPress theme unit, test page and click on git repository to download the xml file. Once downloaded, go to WordPress dashboard, under Tools, click on Import > Run Importer located right at the bottom WordPress to begin the importing process.

Wrapping Up!

We have practically created our Genesis child theme from scratch. Make sure to add commenting where needed as it will help you or any other developer in understanding your code for future modification and debugging. Test your theme on various screen sizes to ensure its responsiveness and also look for possible bugs. Design an attractive thumbnail image for your child theme.

Source code:  https://github.com/ibadrehman/custom

Challenge

After creating the child theme, we went a further ahead and created a few custom child widgets for our Genesis child theme.

This is how our genesis child theme looks after adding the custom widgets.

Create a Genesis child theme by following these two articles and share your final product. Good luck!

Ibad Ur Rehman

Ibad Ur Rehman is a WordPress Community Manager at Cloudways. He likes to explore the latest open-source technologies and to interact with different communities. In his free time, he likes to read, watch a series or fly his favorite Cessna 172SP in X Plane 11 flight simulator.

Get Connected on: Twitter Community Forum