HostOnNet Blog

How to Create a WordPress Child Theme with underscores starter theme

Installed WordPress in localhost for developing theme for Website Design Portfolio website and downloaded Underscores starter theme.

To generate an underscores starter theme go to the Underscores home page and in the input box type a theme name for your theme and click generate button.

underscore-theme

I named my theme as ‘hon’ and copy/paste the hon folder to /wp-content/themes

How do I create Child Theme for Underscores

STEP 1 : I created hon-child folder in wp-content/themes

wordpress child theme

STEP 2 : Copy-paste the style.css file from ‘hon’ folder to ‘hon-child’ and then removed the below line from parent theme stylesheet (wp-content/themes/hon)

Template: hon

Now style.css in child theme look like below

/*
 Theme Name: Hon Child
 Theme URI: https://www.hostonnet.com
 Author: hostonnet
 Author URI: https://www.hostonnet.com
 Template: hon
 Description: Child theme for hon
 Version: 0.1
 */

STEP 3 : Copy-paste the following code and save this file as functions.php in the child theme folder you just created.

 <?php
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 }

For using the Bootstrap web framework , I updated the functions.php like below and copied the js, css and fonts folder from the Boostrap distribution to parent theme


 <?php
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 }

 function reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap-theme.min', get_template_directory_uri() . '/bootstrap/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/bootstrap/js/jquery.min.js', array(), true );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array(), true );

}
add_action('wp_enqueue_scripts', 'reg_scripts');

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
?>

bootstrap to wordpress

The below code you can see in functions.php, that I have used to add Bootstrap menu to WordPress.
You can download it here and copy-paste the class-wp-bootstrap-navwalker.php to parent theme

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Wordpress