How to Create a Child Theme from Blankslate and Add Custom CSS, JavaScript, Header and Footer

Prefer watching over reading? You can check out the full tutorial on YouTube in the player below. 

Or if you’re more of an old-school type who likes a proper walkthrough in text — just scroll down.

Table of Contents

1. Introduction: Why use a child theme in WordPress
2. When to use Blankslate
3. Pros and cons of Blankslate and other boilerplate themes
4. Step 1: Creating a child theme
   1. Folder structure
   2. Creating style.css with theme metadata
   3. Enqueuing parent styles via functions.php
5. Step 2: Adding custom CSS and JavaScript
   1. Creating css/ and js/ directories
   2. Registering and enqueueing your files properly
6. Step 3: Customising the header and footer
   1. Overriding header.php and footer.php
   2. Injecting custom HTML, scripts, and layout structure
7. Best practices for clean theme structure
8. Testing and debugging your child theme
9. Conclusion: Where to go from here

1. Introduction: Why use a child theme in WordPress

Child themes in WordPress are the go-to method for safely customising an existing theme. They let you override styles, templates, and functions without touching the original theme — so when the parent updates, your customisations stay intact. This is particularly useful for development workflows where stability, maintainability, and version control matter.

2. When to use Blankslate

Blankslate is a minimalistic WordPress theme designed specifically as a foundation for building custom themes. It contains no design, minimal markup, and just enough structure to get you started. You should consider using it when:

• You want full design control without removing built-in styles
• You’re building a custom client site or rapid prototype
• You need a lightweight base for performance-focused projects
• You prefer to use your own CSS/JS framework or design system

3. Pros and cons of Blankslate and other boilerplate themes

Theme	Pros	Cons
Blankslate	Minimal code, no opinionated styles, fast loading	No built-in components, more initial work
Underscores (_s)	Well-documented, accessible markup, WP best practices	Slightly more bloated than Blankslate, outdated styling
Sage	Modern tooling, Blade templating, great for advanced devs	Steep learning curve, heavy setup

4. Step 1: Creating a child theme

a. Folder structure

Create a new folder inside wp-content/themes, e.g. blankslate-child.

b. Creating style.css with theme metadata

/*
Theme Name: Blankslate Child
Template: blankslate
Author: Your Name
Version: 1.0
*/

c. Enqueuing parent styles via functions.php

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

5. Step 2: Adding custom CSS and JavaScript

a. Creating css/ and js/ directories

Inside your child theme folder, create two new folders: css and js. Place your custom files inside them, e.g. css/custom.css and js/scripts.js.

b. Registering and enqueueing your files properly

<?php
function oz_assets() {
  wp_enqueue_style( 'oz_custom', get_stylesheet_directory_uri() . '/css/style.css' );
  wp_enqueue_script( 'oz_js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'oz_assets' );

6. Step 3: Customising the header and footer

a. Overriding header.php and footer.php

Copy header.php and footer.php from the Blankslate parent theme into your child theme folder. WordPress will automatically use the child versions if they exist.

b. Injecting custom HTML, scripts, and layout structure

Add any global elements, such as additional meta tags, tracking scripts (e.g. Google Analytics), or a custom navigation layout directly inside your copied files.

<!-- Inside header.php -->
<meta name="theme-color" content="#fff">
<link rel="stylesheet" href="https://cdn.example.com/fonts.css">

7. Best practices for clean theme structure

• Keep custom logic in separate include files (e.g. inc/ folder)
• Use BEM or utility-first classes for CSS clarity
• Comment your code generously if collaborating
• Group enqueue calls in one function for maintainability

8. Testing and debugging your child theme

Before deploying, make sure to:

• Check file loading in browser dev tools
• Confirm that overrides like header.php work
• Test on mobile devices and multiple browsers
• Validate your HTML and CSS via W3C tools

9. Conclusion: Where to go from here

Once your child theme is stable, you can progressively add more templates like single.php, page.php, or even use custom fields for advanced content structures. Blankslate gives you total control — but with that power comes the responsibility of building your structure thoughtfully from the ground up.