1.
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.

2.
CHILD THEME
HOW TO CREATE YOUR OWN

3.
WHAT THIS WORKSHOP COVERS
▸ Overview of the WordPress file 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
HOW TO CREATE YOUR OWN CHILD THEME
Using step-by-step exercises based on a fictional “real-life”
scenario.

4.
A WEE INTRO

5.
KNOW THE WORDPRESS FILE STRUCTURE
HOW TO CREATE YOUR OWN CHILD THEME
Detailed description at
https://codex.wordpress.org/WordPress_Files

6.
THEME FILES
HOW TO CREATE YOUR OWN CHILD THEME
Theme files are written in a combination of HTML, CSS and
PHP code.
HTML and PHP provide the page structure.
CSS provides the style.
Roughly speaking…

7.
THEME FILE STRUCTURE
HOW TO CREATE YOUR OWN CHILD THEME

8.
THE STYLESHEET
HOW TO CREATE YOUR OWN CHILD THEME

9.
LET’S GET STARTED!

10.
1. THE BRIEF

11.
HOW TO CREATE YOUR OWN CHILD THEME
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.

12.
2. THE CONTENT

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

14.
HOW TO CREATE YOUR OWN CHILD THEME
HE HAD THE SAMPLE CONTENT READY …
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.

15.
HOW TO CREATE YOUR OWN CHILD THEME
Web Designer
We would normally add the sample
content manually but we’ll import it for
this workshop

16.
HOW TO CREATE YOUR OWN CHILD THEME
GET THE SAMPLE CONTENT
https://tinyurl.com/y9c5mlqw
Open this link to download the sample content:
Unzip it and find inside a file with a .xml extension.

17.
HOW TO CREATE YOUR OWN CHILD THEME
IMPORT THE SAMPLE CONTENT
In your local WordPress site:
1. Go to Dashboard > Tools > Import > WordPress > Install
Now
2. Run Importer with the .xml file
3. Assign Authors and Download and Import file attachments

18.
3. THE THEME

19.
HOW TO CREATE YOUR OWN CHILD THEME
LET’S REMIND OURSELVES OF THE BRIEF …
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.

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

21.
HOW TO CREATE YOUR OWN CHILD THEME
BIG VIDEO HEADER IN THE HOMEPAGE
Web Designer
Could we use Twenty Seventeen ?

22.
HOW TO CREATE YOUR OWN CHILD THEME
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

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

24.
HOW TO CREATE YOUR OWN CHILD THEME
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

25.
LET’S SEE IT!

26.
IT’S OK BUT…

27.
HOW TO CREATE YOUR OWN CHILD THEME
The HEADER FONT is sort of
BOOORIIINNG …
How about we try something else?
Web Designer

28.
ENTER GOOGLE FONTS

29.
CHOOSE THE NEW FONT…
HOW TO CREATE YOUR OWN CHILD THEME
… AND GET ITS EMBED CODE

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

31.
READ THE SOURCE CODE
HOW TO CREATE YOUR OWN CHILD THEME
We need to find 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.

32.
READ THE SOURCE CODE (CONT.)
HOW TO CREATE YOUR OWN CHILD THEME

33.
ADD THE CSS STYLE
HOW TO CREATE YOUR OWN CHILD THEME
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;
}

34.
LET’S SEE IT!

35.
BUT…

36.
WHAT IF THERE’S TWENTY SEVENTEEN UPDATE ???
HOW TO CREATE YOUR OWN CHILD THEME
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

37.
LET’S SEE IT!

38.
ENTER CHILD THEME

39.
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
HOW TO CREATE YOUR OWN CHILD THEME

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

41.
LET’S START

42.
HOW TO CREATE YOUR OWN CHILD THEME
START A NEW CHILD THEME
Pssst… First remember to remove the
changes we made to the Parent Theme…
… and then …
Web Designer

43.
4. THE CHILD THEME

44.
START A NEW CHILD THEME
HOW TO CREATE YOUR OWN 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

45.
YOU CAN NOW ACTIVATE IT !
HOW TO CREATE YOUR OWN CHILD THEME
Dashboard > Appearance > Themes > Twentyseventeen
Child > Activate

46.
LET’S SEE IT!

47.
LET’S CHANGE THE HEADER’S FONT IN THE CHILD THEME
1. Go to the Parent Theme’s folder and copy the
header.php file.
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.
HOW TO CREATE YOUR OWN CHILD THEME

48.
LET’S SEE IT!

49.
WHAT IF THERE’S TWENTY SEVENTEEN UPDATE ???
HOW TO CREATE YOUR OWN CHILD THEME
Image by Conmongt, https://tinyurl.com/yabtlb2r

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

51.
LET’S SEE IT!

52.
LET’S TAKE IT FURTHER

53.
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

54.
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.
HOW TO CREATE YOUR OWN CHILD THEME
If in doubt, use the Codex to find out what the functions do
(https://codex.wordpress.org)

55.
LET’S SEE IT!

56.
FINISHING TOUCHES

57.
SMALL DETAILS COUNT…
HOW TO CREATE YOUR OWN CHILD THEME
We need an image to be able to identify our Child Theme in
the Dashboard.

58.
THE SCREENSHOT
HOW TO CREATE YOUR OWN CHILD THEME
https://codex.wordpress.org/Theme_Development#Screenshot

59.
THE SCREENSHOT (CONT.)
HOW TO CREATE YOUR OWN CHILD THEME
Add screenshot.png into the twentyseventeen-child folder.
Image from video by Simon Spear, https://tinyurl.com/yctog4dd

60.
ANYTHING ELSE?

61.
RESPONSIVENESS AND ACCESSIBILITY
HOW TO CREATE YOUR OWN CHILD THEME
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!

62.
ACCESSIBILITY
HOW TO CREATE YOUR OWN CHILD THEME
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

63.
RESPONSIVENESS
HOW TO CREATE YOUR OWN CHILD THEME
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

64.
READY TO ROLL!

65.
MAKE IT LIVE
HOW TO CREATE YOUR OWN CHILD THEME
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 file onto the live site from Dashboard >
Appearance > Themes > Add New > Upload Theme.
To use your new Child Theme in a live site:

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

67.
WHAT WE HAVE LEARNED
HOW TO CREATE YOUR OWN CHILD THEME
‣ 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.

68.
IF YOU WANT TO
LEARN MORE…

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

70.
AND AFTER THAT…
HOW TO CREATE YOUR OWN CHILD THEME
You can read about :
*WordPress functions
*The template hierarchy
*The loop
*Actions and filters
It’s all in the WordPress Codex!
https://codex.wordpress.org/

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