SlideShare a Scribd company logo

WordPress Child Theme Workshop

Carme Mias
Carme Mias
Carme MiasSoftware developer

Child Themes are great for those who want to take WordPress that bit further as they allow you to take an already existing WordPress Theme and change absolutely anything from it. Why reinvent the wheel by coding a theme from scratch every time, right? The workshop starts by teaching the structure of a WordPress theme and then how to create your own Child Theme step by step. You’ll also learn how to test your site for the various platforms and make sure it is responsive and accessible. Presented at WordPress Glasgow meetup. August, 2017

WordPress Child Theme Workshop

1 of 73
Download to read offline
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…
Ad

Recommended

WordCamp Ottawa 2016: Updates
WordCamp Ottawa 2016: UpdatesWordCamp Ottawa 2016: Updates
WordCamp Ottawa 2016: Updatesthe___miked
 
EdTech Training by AG
EdTech Training by AGEdTech Training by AG
EdTech Training by AGaysegulgezek
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A ThemeNicky Pink
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Jamie Oastler
 
Using Wikis In The Classroom 2009
Using Wikis In The Classroom 2009Using Wikis In The Classroom 2009
Using Wikis In The Classroom 2009Carl Keller
 

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 DevelopmentBrad 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 JALCMichele 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 WP99Noel Saw
 
Introduction to Jetpack- WordCamp Chicago 2014
Introduction to Jetpack- WordCamp Chicago 2014Introduction to Jetpack- WordCamp Chicago 2014
Introduction to Jetpack- WordCamp Chicago 2014Michele 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.comEileen 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 ClassEileen Lonergan
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentAizat 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 themeTim Brown
 
Creating a Website with WordPress.org
Creating a Website with WordPress.orgCreating a Website with WordPress.org
Creating a Website with WordPress.orgEileen 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 MeetupNoel Saw
 
Big List of Coolness Summer 2011
Big List of Coolness Summer 2011Big List of Coolness Summer 2011
Big List of Coolness Summer 2011Gaston 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 DrupalKyle 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 2012Al Davis
 
Seo stands for multimedia
Seo stands for multimediaSeo stands for multimedia
Seo stands for multimediaNick Kringas
 
WordPress 3.4 Preview
WordPress 3.4 PreviewWordPress 3.4 Preview
WordPress 3.4 PreviewNoel Saw
 
Joomla Day New York City 2010
Joomla Day New York City 2010Joomla Day New York City 2010
Joomla Day New York City 2010Helvecio 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 2015Joe 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 ZenJapo 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 pressRemkus de Vries
 
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 CorneliusWPJoburg
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themeshenri_makembe
 
Child themes
Child themesChild themes
Child themesbobwlsn
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesMichelle Ames
 
Levelling up your WordPress development workflow
Levelling up your WordPress development workflowLevelling up your WordPress development workflow
Levelling up your WordPress development workflowdaraskolnick
 
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, 2015topher1kenobe
 
Using Featured Images with WordPress
Using Featured Images with WordPressUsing Featured Images with WordPress
Using Featured Images with WordPressSara Rosso
 
Drupal Video Presentation
Drupal Video PresentationDrupal Video Presentation
Drupal Video PresentationEric Michalsen
 
WordPress and Child Themes
WordPress and Child ThemesWordPress and Child Themes
WordPress and Child Themesnairobiwordcamp
 
Adding flash animation to a website
Adding flash animation to a websiteAdding flash animation to a website
Adding flash animation to a websiteBubblefruit.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

UGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxUGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxRiteshsahu101
 
Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Damar Juniarto
 
Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...ssuser7b7f4e
 
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionalsthirdeyegen65
 
Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspacesttyk
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defensethirdeyegen65
 
Modern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetModern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetmatt806068
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter TuningVarun Garg
 
history of tau gamma architect.1968.....
history of tau gamma architect.1968.....history of tau gamma architect.1968.....
history of tau gamma architect.1968.....josephiigo
 
[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchainhackersuli
 
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPNIC
 

Recently uploaded (13)

UGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxUGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptx
 
Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023
 
Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...
 
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
 
Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspace
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defense
 
Modern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetModern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budget
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
 
Riesgos online
Riesgos onlineRiesgos online
Riesgos online
 
history of tau gamma architect.1968.....
history of tau gamma architect.1968.....history of tau gamma architect.1968.....
history of tau gamma architect.1968.....
 
[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain
 
B1 Evaluation.docx
B1 Evaluation.docxB1 Evaluation.docx
B1 Evaluation.docx
 
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
 

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
  • 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
  • 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