Building A Custom WordPress Child Theme

This tutorial covers creating a custom WordPress child theme, and then customizing the new child theme’s CSS. This tutorial is designed for beginners, and it assumes you know nothing. I will guide you through editing the header, creating the logo, and customizing colors.

Topics Covered:
Choosing your theme – 1:27
Creating the child theme folder – 3:00
Writing the style.css – 4:12
Editing CSS styes – 6:48
Editing the header – 9:29
Creating header.php – 12:03
Creating the logo – 13:14
Saving the logo – 16:11
Editing the header background – 18:51
Editing the site tagline – 21:22
Editing the header height – 21:59

Code used:
In header.php:
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" />

To create style.css:
/*
Theme Name: XcartGuru
Theme URI: http://example.com/twenty-thirteen-child/
Description: Twenty Thirteen Child Theme
Author: Mike White
Author URI: http://xcartguru.com
Template: twentythirteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-thirteen-child
*/

@import url("../twentythirteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

CSS Styles:
h1 {
font-size: 36px;
}

.entry-title a {
color: #6585c7;
}

header.site-header {
background: #333333 none;
background-size: auto auto;
}

.site-header .home-link {
color: #ffffff;
}

.site-header .home-link {
min-height: 160px;
}

Need help? Contact the Guru!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>