SlideShare a Scribd company logo
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 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.
A WEE INTRO
KNOW THE WORDPRESS FILE STRUCTURE
HOW TO CREATE YOUR OWN CHILD THEME
Detailed description at
https://codex.wordpress.org/WordPress_Files
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…
THEME FILE STRUCTURE
HOW TO CREATE YOUR OWN CHILD THEME
THE STYLESHEET
HOW TO CREATE YOUR OWN CHILD THEME
LET’S GET STARTED!
1. THE BRIEF
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.
2. THE CONTENT
OUR CLIENT IS
VERY EFFICIENT…Image by George Hodan, https://tinyurl.com/ya8orzl3
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.
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
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.
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
3. THE THEME
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.
IS THERE A THEME
ALREADY OUT THERE?
Image author unknown, https://tinyurl.com/y9vvyt46
HOW TO CREATE YOUR OWN CHILD THEME
BIG VIDEO HEADER IN THE HOMEPAGE
Web Designer
Could we use Twenty Seventeen ?
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
Image author unknown, https://tinyurl.com/ycmebvwl
DOES IT FIT?
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
LET’S SEE IT!
IT’S OK BUT…
HOW TO CREATE YOUR OWN CHILD THEME
The HEADER FONT is sort of
BOOORIIINNG …
How about we try something else?
Web Designer
ENTER GOOGLE FONTS
CHOOSE THE NEW FONT…
HOW TO CREATE YOUR OWN CHILD THEME
… AND GET ITS EMBED CODE
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
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.
READ THE SOURCE CODE (CONT.)
HOW TO CREATE YOUR OWN CHILD THEME
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;

}
LET’S SEE IT!
BUT…
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
LET’S SEE IT!
ENTER CHILD THEME
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
10 MINUTES REST
Image by Diego Delso, https://tinyurl.com/ybgj8ecv
LET’S START
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
4. THE CHILD THEME
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
YOU CAN NOW ACTIVATE IT !
HOW TO CREATE YOUR OWN CHILD THEME
Dashboard > Appearance > Themes > Twentyseventeen
Child > Activate
LET’S SEE IT!
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
LET’S SEE IT!
WHAT IF THERE’S TWENTY SEVENTEEN UPDATE ???
HOW TO CREATE YOUR OWN CHILD THEME
Image by Conmongt, https://tinyurl.com/yabtlb2r
SHALL WE TRY?
Image by Jenny C, https://tinyurl.com/ya3hk2vs
LET’S SEE IT!
LET’S TAKE IT FURTHER
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.
HOW TO CREATE YOUR OWN CHILD THEME
If in doubt, use the Codex to find out what the functions do
(https://codex.wordpress.org)
LET’S SEE IT!
FINISHING TOUCHES
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.
THE SCREENSHOT
HOW TO CREATE YOUR OWN CHILD THEME
https://codex.wordpress.org/Theme_Development#Screenshot
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
ANYTHING ELSE?
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!
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
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
READY TO ROLL!
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:
Congrats!
Image by AngMoKio, https://tinyurl.com/ybw36jog
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.
IF YOU WANT TO
LEARN MORE…
HAVE FUN PLAYING!
Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb
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/
GET IN TOUCH FOR
ANY QUESTIONS
info@carmemias.com
@CarmeMiasStudio
Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb

More Related Content

What's hot

Your Site Has Been Hacked, Now What?
Your Site Has Been Hacked, Now What?Your Site Has Been Hacked, Now What?
Your Site Has Been Hacked, Now What?
Michele Butcher-Jones
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin Development
Brad Williams
 
WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)
Stephanie Leary
 
WordPress for beginners lesson 4 fall2015 JALC
WordPress for beginners lesson 4 fall2015 JALCWordPress for beginners lesson 4 fall2015 JALC
WordPress for beginners lesson 4 fall2015 JALC
Michele Butcher-Jones
 
SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99
Noel Saw
 
Introduction to Jetpack- WordCamp Chicago 2014
Introduction to Jetpack- WordCamp Chicago 2014Introduction to Jetpack- WordCamp Chicago 2014
Introduction to Jetpack- WordCamp Chicago 2014
Michele Butcher-Jones
 
Setting up a Blog with WordPress.com
Setting up a Blog with WordPress.comSetting up a Blog with WordPress.com
Setting up a Blog with WordPress.com
Eileen Lonergan
 
Setting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 ClassSetting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 Class
Eileen Lonergan
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin Development
Aizat Faiz
 
Wordpress customisation for travel blogs
Wordpress customisation for travel blogs Wordpress customisation for travel blogs
Wordpress customisation for travel blogs
GetawayMagazine
 
What to include in a boilerplate theme
What to include in a boilerplate themeWhat to include in a boilerplate theme
What to include in a boilerplate theme
Tim Brown
 
Creating a Website with WordPress.org
Creating a Website with WordPress.orgCreating a Website with WordPress.org
Creating a Website with WordPress.org
Eileen Lonergan
 
WordCamp RI 2015 - Beginner WordPress Workshop
WordCamp RI 2015 - Beginner WordPress Workshop   WordCamp RI 2015 - Beginner WordPress Workshop
WordCamp RI 2015 - Beginner WordPress Workshop
Ella J Designs
 
Social Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP MeetupSocial Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP Meetup
Noel Saw
 
Big List of Coolness Summer 2011
Big List of Coolness Summer 2011Big List of Coolness Summer 2011
Big List of Coolness Summer 2011
Gaston Digital
 
Stop Coding and Start Clicking - Pragmatic site building in Drupal
Stop Coding and Start Clicking - Pragmatic site building in DrupalStop Coding and Start Clicking - Pragmatic site building in Drupal
Stop Coding and Start Clicking - Pragmatic site building in Drupal
Kyle Taylor
 
10 things to do after the install- WordCamp Victoria 2012
10 things to do after the install- WordCamp Victoria 201210 things to do after the install- WordCamp Victoria 2012
10 things to do after the install- WordCamp Victoria 2012
Al Davis
 
Seo stands for multimedia
Seo stands for multimediaSeo stands for multimedia
Seo stands for multimedia
Nick Kringas
 
WordPress 3.4 Preview
WordPress 3.4 PreviewWordPress 3.4 Preview
WordPress 3.4 Preview
Noel Saw
 
Joomla Day New York City 2010
Joomla Day New York City 2010Joomla Day New York City 2010
Joomla Day New York City 2010
Helvecio da Silva
 

What's hot (20)

Your Site Has Been Hacked, Now What?
Your Site Has Been Hacked, Now What?Your Site Has Been Hacked, Now What?
Your Site Has Been Hacked, Now What?
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin Development
 
WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)
 
WordPress for beginners lesson 4 fall2015 JALC
WordPress for beginners lesson 4 fall2015 JALCWordPress for beginners lesson 4 fall2015 JALC
WordPress for beginners lesson 4 fall2015 JALC
 
SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99
 
Introduction to Jetpack- WordCamp Chicago 2014
Introduction to Jetpack- WordCamp Chicago 2014Introduction to Jetpack- WordCamp Chicago 2014
Introduction to Jetpack- WordCamp Chicago 2014
 
Setting up a Blog with WordPress.com
Setting up a Blog with WordPress.comSetting up a Blog with WordPress.com
Setting up a Blog with WordPress.com
 
Setting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 ClassSetting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 Class
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin Development
 
Wordpress customisation for travel blogs
Wordpress customisation for travel blogs Wordpress customisation for travel blogs
Wordpress customisation for travel blogs
 
What to include in a boilerplate theme
What to include in a boilerplate themeWhat to include in a boilerplate theme
What to include in a boilerplate theme
 
Creating a Website with WordPress.org
Creating a Website with WordPress.orgCreating a Website with WordPress.org
Creating a Website with WordPress.org
 
WordCamp RI 2015 - Beginner WordPress Workshop
WordCamp RI 2015 - Beginner WordPress Workshop   WordCamp RI 2015 - Beginner WordPress Workshop
WordCamp RI 2015 - Beginner WordPress Workshop
 
Social Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP MeetupSocial Media + WordPress - SoCal WP Meetup
Social Media + WordPress - SoCal WP Meetup
 
Big List of Coolness Summer 2011
Big List of Coolness Summer 2011Big List of Coolness Summer 2011
Big List of Coolness Summer 2011
 
Stop Coding and Start Clicking - Pragmatic site building in Drupal
Stop Coding and Start Clicking - Pragmatic site building in DrupalStop Coding and Start Clicking - Pragmatic site building in Drupal
Stop Coding and Start Clicking - Pragmatic site building in Drupal
 
10 things to do after the install- WordCamp Victoria 2012
10 things to do after the install- WordCamp Victoria 201210 things to do after the install- WordCamp Victoria 2012
10 things to do after the install- WordCamp Victoria 2012
 
Seo stands for multimedia
Seo stands for multimediaSeo stands for multimedia
Seo stands for multimedia
 
WordPress 3.4 Preview
WordPress 3.4 PreviewWordPress 3.4 Preview
WordPress 3.4 Preview
 
Joomla Day New York City 2010
Joomla Day New York City 2010Joomla Day New York City 2010
Joomla Day New York City 2010
 

Similar to WordPress Child Theme Workshop

Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
Joe Querin
 
Drupal Camp Manila 2014 - Theming with Zen
Drupal Camp Manila 2014 - Theming with ZenDrupal Camp Manila 2014 - Theming with Zen
Drupal Camp Manila 2014 - Theming with Zen
Japo Domingo
 
10 things you did not know about word press
10 things you did not know about word press10 things you did not know about word press
10 things you did not know about word press
Remkus de Vries
 
FVCP Ad Words
FVCP Ad WordsFVCP Ad Words
FVCP Ad Words
guest1575bb
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WPJoburg
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
Kanchha kaji Prajapati
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themes
henri_makembe
 
Child themes
Child themesChild themes
Child themes
bobwlsn
 
Wordpress for Dummies
Wordpress for DummiesWordpress for Dummies
Wordpress for Dummies
Bow Kraivanich
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
 
Web components
Web componentsWeb components
Web components
Arvind Ravulavaru
 
W pthemes
W pthemesW pthemes
W pthemes
Becky Davis
 
Levelling up your WordPress development workflow
Levelling up your WordPress development workflowLevelling up your WordPress development workflow
Levelling up your WordPress development workflow
daraskolnick
 
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
topher1kenobe
 
Using Featured Images with WordPress
Using Featured Images with WordPressUsing Featured Images with WordPress
Using Featured Images with WordPress
Sara Rosso
 
Php2pdf
Php2pdfPhp2pdf
Drupal Video Presentation
Drupal Video PresentationDrupal Video Presentation
Drupal Video Presentation
Eric Michalsen
 
Creating custom themes in AtoM
Creating custom themes in AtoMCreating custom themes in AtoM
Creating custom themes in AtoM
Artefactual Systems - AtoM
 
WordPress and Child Themes
WordPress and Child ThemesWordPress and Child Themes
WordPress and Child Themes
nairobiwordcamp
 
Adding flash animation to a website
Adding flash animation to a websiteAdding flash animation to a website
Adding flash animation to a website
Bubblefruit.com
 

Similar to WordPress Child Theme Workshop (20)

Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Drupal Camp Manila 2014 - Theming with Zen
Drupal Camp Manila 2014 - Theming with ZenDrupal Camp Manila 2014 - Theming with Zen
Drupal Camp Manila 2014 - Theming with Zen
 
10 things you did not know about word press
10 things you did not know about word press10 things you did not know about word press
10 things you did not know about word press
 
FVCP Ad Words
FVCP Ad WordsFVCP Ad Words
FVCP Ad Words
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themes
 
Child themes
Child themesChild themes
Child themes
 
Wordpress for Dummies
Wordpress for DummiesWordpress for Dummies
Wordpress for Dummies
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
 
Web components
Web componentsWeb components
Web components
 
W pthemes
W pthemesW pthemes
W pthemes
 
Levelling up your WordPress development workflow
Levelling up your WordPress development workflowLevelling up your WordPress development workflow
Levelling up your WordPress development workflow
 
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
Introduction to WordPress Child Theming, WordCamp Kansas City, 2015
 
Using Featured Images with WordPress
Using Featured Images with WordPressUsing Featured Images with WordPress
Using Featured Images with WordPress
 
Php2pdf
Php2pdfPhp2pdf
Php2pdf
 
Drupal Video Presentation
Drupal Video PresentationDrupal Video Presentation
Drupal Video Presentation
 
Creating custom themes in AtoM
Creating custom themes in AtoMCreating custom themes in AtoM
Creating custom themes in AtoM
 
WordPress and Child Themes
WordPress and Child ThemesWordPress and Child Themes
WordPress and Child Themes
 
Adding flash animation to a website
Adding flash animation to a websiteAdding flash animation to a website
Adding flash animation to a website
 

Recently uploaded

一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Infosec train
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
Emre Gündoğdu
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 

Recently uploaded (12)

一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 

WordPress Child Theme Workshop

  • 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.
  • 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
  • 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.
  • 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
  • 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.
  • 22. HOW TO CREATE YOUR OWN CHILD THEME BIG VIDEO HEADER IN THE HOMEPAGE Web Designer Could we use Twenty Seventeen ?
  • 23. 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
  • 24. Image author unknown, https://tinyurl.com/ycmebvwl DOES IT FIT?
  • 25. 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
  • 28. HOW TO CREATE YOUR OWN CHILD THEME The HEADER FONT is sort of BOOORIIINNG … How about we try something else? Web Designer
  • 30.
  • 31. CHOOSE THE NEW FONT… HOW TO CREATE YOUR OWN CHILD THEME … AND GET ITS EMBED CODE
  • 32. 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
  • 33. 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.
  • 34. READ THE SOURCE CODE (CONT.) HOW TO CREATE YOUR OWN CHILD THEME
  • 35. 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; }
  • 38. 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
  • 41. 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
  • 42. 10 MINUTES REST Image by Diego Delso, https://tinyurl.com/ybgj8ecv
  • 44. 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
  • 45. 4. THE CHILD THEME
  • 46. 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
  • 47. YOU CAN NOW ACTIVATE IT ! HOW TO CREATE YOUR OWN CHILD THEME Dashboard > Appearance > Themes > Twentyseventeen Child > Activate
  • 49. 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
  • 51. WHAT IF THERE’S TWENTY SEVENTEEN UPDATE ??? HOW TO CREATE YOUR OWN CHILD THEME Image by Conmongt, https://tinyurl.com/yabtlb2r
  • 52. SHALL WE TRY? Image by Jenny C, https://tinyurl.com/ya3hk2vs
  • 54. LET’S TAKE IT FURTHER
  • 55. 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
  • 56. 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)
  • 59. 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.
  • 60. THE SCREENSHOT HOW TO CREATE YOUR OWN CHILD THEME https://codex.wordpress.org/Theme_Development#Screenshot
  • 61. 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
  • 63. 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!
  • 64. 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
  • 65. 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
  • 67. 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:
  • 68. Congrats! Image by AngMoKio, https://tinyurl.com/ybw36jog
  • 69. 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.
  • 70. IF YOU WANT TO LEARN MORE…
  • 71. HAVE FUN PLAYING! Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb
  • 72. 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/
  • 73. GET IN TOUCH FOR ANY QUESTIONS info@carmemias.com @CarmeMiasStudio Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb