Successfully reported this slideshow.
Your SlideShare is downloading. ×

WordPress Child Theme Workshop

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
WordPress Child Themes
WordPress Child Themes
Loading in …3
×

Check these out next

1 of 73 Ad

WordPress Child Theme Workshop

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to WordPress Child Theme Workshop (20)

Advertisement

WordPress Child Theme Workshop

  1. 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. 2. CHILD THEME HOW TO CREATE YOUR OWN
  3. 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. 4. A WEE INTRO
  5. 5. KNOW THE WORDPRESS FILE STRUCTURE HOW TO CREATE YOUR OWN CHILD THEME Detailed description at https://codex.wordpress.org/WordPress_Files
  6. 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. 7. THEME FILE STRUCTURE HOW TO CREATE YOUR OWN CHILD THEME
  8. 8. THE STYLESHEET HOW TO CREATE YOUR OWN CHILD THEME
  9. 9. LET’S GET STARTED!
  10. 10. 1. THE BRIEF
  11. 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. 12. 2. THE CONTENT
  13. 13. OUR CLIENT IS VERY EFFICIENT…Image by George Hodan, https://tinyurl.com/ya8orzl3
  14. 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. 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. 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. 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. 18. 3. THE THEME
  19. 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. 20. IS THERE A THEME ALREADY OUT THERE? Image author unknown, https://tinyurl.com/y9vvyt46
  21. 21. HOW TO CREATE YOUR OWN CHILD THEME BIG VIDEO HEADER IN THE HOMEPAGE Web Designer Could we use Twenty Seventeen ?
  22. 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. 23. Image author unknown, https://tinyurl.com/ycmebvwl DOES IT FIT?
  24. 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. 25. LET’S SEE IT!
  26. 26. IT’S OK BUT…
  27. 27. HOW TO CREATE YOUR OWN CHILD THEME The HEADER FONT is sort of BOOORIIINNG … How about we try something else? Web Designer
  28. 28. ENTER GOOGLE FONTS
  29. 29. CHOOSE THE NEW FONT… HOW TO CREATE YOUR OWN CHILD THEME … AND GET ITS EMBED CODE
  30. 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. 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. 32. READ THE SOURCE CODE (CONT.) HOW TO CREATE YOUR OWN CHILD THEME
  33. 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. 34. LET’S SEE IT!
  35. 35. BUT…
  36. 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. 37. LET’S SEE IT!
  38. 38. ENTER CHILD THEME
  39. 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. 40. 10 MINUTES REST Image by Diego Delso, https://tinyurl.com/ybgj8ecv
  41. 41. LET’S START
  42. 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. 43. 4. THE CHILD THEME
  44. 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. 45. YOU CAN NOW ACTIVATE IT ! HOW TO CREATE YOUR OWN CHILD THEME Dashboard > Appearance > Themes > Twentyseventeen Child > Activate
  46. 46. LET’S SEE IT!
  47. 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. 48. LET’S SEE IT!
  49. 49. WHAT IF THERE’S TWENTY SEVENTEEN UPDATE ??? HOW TO CREATE YOUR OWN CHILD THEME Image by Conmongt, https://tinyurl.com/yabtlb2r
  50. 50. SHALL WE TRY? Image by Jenny C, https://tinyurl.com/ya3hk2vs
  51. 51. LET’S SEE IT!
  52. 52. LET’S TAKE IT FURTHER
  53. 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. 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. 55. LET’S SEE IT!
  56. 56. FINISHING TOUCHES
  57. 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. 58. THE SCREENSHOT HOW TO CREATE YOUR OWN CHILD THEME https://codex.wordpress.org/Theme_Development#Screenshot
  59. 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. 60. ANYTHING ELSE?
  61. 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. 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. 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. 64. READY TO ROLL!
  65. 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. 66. Congrats! Image by AngMoKio, https://tinyurl.com/ybw36jog
  67. 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. 68. IF YOU WANT TO LEARN MORE…
  69. 69. HAVE FUN PLAYING! Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb
  70. 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. 71. GET IN TOUCH FOR ANY QUESTIONS info@carmemias.com @CarmeMiasStudio Image by Dawn Hudson, https://tinyurl.com/ybxs2cfb

×