Create Custom Child Theme

HOW TO CREATE YOUR OWN CHILD THEME
1. A laptop.
2. A sandbox, or local development area, with a web server,
MySQL and PHP.
3. A text editor. See http://www.techradar.com/news/the-
best-free-text-editor-2017
4. WordPress installed.
WHAT WE NEED FOR THIS WORKSHOP
You can use http://poopy.life for the exercises if you don’t
have a sandbox and WordPress already installed.

CHILD THEME
HOW TO CREATE YOUR OWN

WHAT THIS WORKSHOP COVERS
▸ Overview of the WordPress ﬁle structure.
▸ Why and when to use a Child Theme.
▸ How to build a basic Child Theme from scratch.
▸ How to test website’s accessibility and responsiveness.
▸ How to upload Child Theme to live website.
▸ Pointers to continue learning
Using step-by-step exercises based on a ﬁctional “real-life”
scenario.

KNOW THE WORDPRESS FILE STRUCTURE
Detailed description at
https://codex.wordpress.org/WordPress_Files

THEME FILES
Theme ﬁles are written in a combination of HTML, CSS and
PHP code.
HTML and PHP provide the page structure.
CSS provides the style.
Roughly speaking…

THEME FILE STRUCTURE

THE STYLESHEET

WHAT WEBSITE ARE WE BUILDING?
The Customer
SCOTTISH COASTAL JOURNEY
Very visual.
Big video header in the homepage.
Wants to customise the image header in
individual pages.
Modern and dynamic but also classy.
Will provide sample content.

OUR CLIENT IS
VERY EFFICIENT…Image by George Hodan, https://tinyurl.com/ya8orzl3

HE HAD THE SAMPLE CONTENT READY …
The Customer
Very visual.
individual pages.

Web Designer
We would normally add the sample
content manually but we’ll import it for
this workshop

GET THE SAMPLE CONTENT
https://tinyurl.com/y9c5mlqw
Open this link to download the sample content:
Unzip it and ﬁnd inside a ﬁle with a .xml extension.

IMPORT THE SAMPLE CONTENT
In your local WordPress site:
1. Go to Dashboard > Tools > Import > WordPress > Install
Now
2. Run Importer with the .xml ﬁle
3. Assign Authors and Download and Import ﬁle attachments

LET’S REMIND OURSELVES OF THE BRIEF …
The Customer
Very visual.
individual pages.

IS THERE A THEME
ALREADY OUT THERE?
Image author unknown, https://tinyurl.com/y9vvyt46

BIG VIDEO HEADER IN THE HOMEPAGE
Web Designer
Could we use Twenty Seventeen ?

LET’S TRY IT!
The Twenty Seventeen theme will normally come already
installed but we need to double check and activate it if it isn’t
already.
Dashboard > Appearance > Themes

Image author unknown, https://tinyurl.com/ycmebvwl
DOES IT FIT?

WORDPRESS CUSTOMIZER
1. Site Description
2. Colours
3. One or two columns
4. YouTube video in header (YouTube > Solstice - Scotland's Basking Sharks)
5. Header images for the other pages
Go to Dashboard > Appearance > Customizer

The HEADER FONT is sort of
BOOORIIINNG …
How about we try something else?
Web Designer

CHOOSE THE NEW FONT…
… AND GET ITS EMBED CODE

ADD THE EMBED CODE TO THE WEBSITE
1. Go to Dashboard > Appearance > Editor > Theme
Header (header.php)
2. Add the Standard <link …> code somewhere between
<head> and </head> tags

READ THE SOURCE CODE
We need to ﬁnd out which class or id the header title has.
1. View the homepage with Google Chrome.
2. If on Windows: right-click on the main title.
If on Apple: Ctrl+click on the main title.
3. Click Inspect from the menu.

READ THE SOURCE CODE (CONT.)

ADD THE CSS STYLE
1. Go to Dashboard > Appearance > Customizer >
Additional CSS
2. Add the CSS from Google Fonts to the header title class
or id
.site-title {

font-family: 'Abril Fatface', cursive;

}

WHAT IF THERE’S TWENTY SEVENTEEN UPDATE ???
The Additional CSS added from the Customizer would
remain…
… but changes to the Template Header would be lost
forever.
Image by Conmongt, https://tinyurl.com/yabtlb2r

TEXT
A CHILD THEME HAS MANY ADVANTAGES
1. It inherits all functionality and design features from its
parent theme
2. It allows us to change anything from such functionality
and features
3. Without loosing any of the changes when the parent
theme is updated

10 MINUTES REST
Image by Diego Delso, https://tinyurl.com/ybgj8ecv

START A NEW CHILD THEME
Pssst… First remember to remove the
changes we made to the Parent Theme…
… and then …
Web Designer

START A NEW CHILD THEME
2. Add a new empty file called style.css
3. Add a new empty file called functions.php
4. Go to https://codex.wordpress.org/Child_Themes
5. Copy and paste the starting code for both files. Adapt the
code according to your requirements.
1. Create a new folder called “twentyseventeen-child” under
wp-content/themes

YOU CAN NOW ACTIVATE IT !
Dashboard > Appearance > Themes > Twentyseventeen
Child > Activate

LET’S CHANGE THE HEADER’S FONT IN THE CHILD THEME
1. Go to the Parent Theme’s folder and copy the
header.php ﬁle.
2. Paste it into the Child Theme’s folder
3. Add the <link ….> code from Google Fonts anywhere
between <head> and </head>
4. Open your child theme’s style.css and add the CSS code
from Google Fonts.

WHAT IF THERE’S TWENTY SEVENTEEN UPDATE ???
Image by Conmongt, https://tinyurl.com/yabtlb2r

SHALL WE TRY?
Image by Jenny C, https://tinyurl.com/ya3hk2vs

In single pages and posts,
this huge featured image looks odd.
Let’s remove it!
Images by Gil Cavalcanti, https://tinyurl.com/ya5prdq5, and Miro Alt, https://tinyurl.com/y8q5ywlz
Web Designer

HOW DO WE KNOW WHAT TO REMOVE ?
1. Inspect the website’s source and find the element you want
to change.
2. Find the element in the corresponding WordPress theme file.
3. Comment the element out or remove it.
If in doubt, use the Codex to find out what the functions do
(https://codex.wordpress.org)

SMALL DETAILS COUNT…
We need an image to be able to identify our Child Theme in
the Dashboard.

THE SCREENSHOT
https://codex.wordpress.org/Theme_Development#Screenshot

THE SCREENSHOT (CONT.)
Add screenshot.png into the twentyseventeen-child folder.
Image from video by Simon Spear, https://tinyurl.com/yctog4dd

RESPONSIVENESS AND ACCESSIBILITY
They shouldn’t be an after-thought but built in the whole
web design process.
But we know that our parent theme, twentyseventeen,
already is both responsive and accessible, so our child theme
will be too.
Let’s double check!

ACCESSIBILITY
Test it:
http://wave.webaim.org/ or as browser extension.
https://achecker.ca/checker/index.php
Find out more:
https://wordpress.tv/?s=accessibility
http://a11yproject.com

RESPONSIVENESS
Test it:
*Change the width of the browser window
*View the website on a mobile phone, tablet and desktop.
*Try different browsers (IE, Chrome, Firefox, etc.) and
Operating Systems (OSX, Windows).
Find out more:
https://responsivedesign.is/
https://wordpress.tv/?s=responsive

MAKE IT LIVE
1. Zip the whole Child Theme folder (twentyseventeen-
child) on your computer.
2. Make sure the parent theme is already installed in the live
site.
3. Upload the zip ﬁle onto the live site from Dashboard >
Appearance > Themes > Add New > Upload Theme.
To use your new Child Theme in a live site:

Congrats!
Image by AngMoKio, https://tinyurl.com/ybw36jog

WHAT WE HAVE LEARNED
‣ What is a sandbox.

‣ WordPress file structure.

‣ Theme template files and
their parts.

‣ How to differentiate HTML,
PHP and CSS.

‣ How to import content into a
WordPress site.

‣ WordPress Theme Directory.

‣ WordPress Customizer.

‣ Google Fonts.
‣ How to inspect a website’s
source.

‣ Parent Theme vs Child
Theme.

‣ Basic CSS styling.

‣ The WordPress Codex.

‣ How to comment out.

‣ The Theme screenshot.

‣ Responsiveness

‣ Accessibility

‣ How to upload a Child
Theme.

HAVE FUN PLAYING!
Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb

AND AFTER THAT…
You can read about :
*WordPress functions
*The template hierarchy
*The loop
*Actions and ﬁlters
It’s all in the WordPress Codex!
https://codex.wordpress.org/

GET IN TOUCH FOR
ANY QUESTIONS
info@carmemias.com
@CarmeMiasStudio
Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb

Create Custom Child Theme

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Create Custom Child Theme

Similar to Create Custom Child Theme (20)

Recently uploaded

Recently uploaded (20)

Create Custom Child Theme