Find a great theme and adapt it as a child theme

This is the extended slides version of my short talk @wordcampch #wcch

Transcript

1. Find a great theme and adapt it as a child theme Christian Zumbrunnen switchplus ag @chzumbrunnen @switchie
2. What we cover •  Finding and installing a pleasant WordPress theme •  Modifying the theme •  Creating a (Why and how)
3. 1 Finding and installing a pleasant theme
4. paid or free? paid •  sustainable •  support •  well worth free •  might not be sustainable or not be able to give support Find a nice theme at the WordPress.org themes repository or a trustworthy commercial provider but never google for free WordPress themes and download from unknown sources.
5. Hints on choosing a theme Many free WordPress.org themes are excellent quality. (All themes within the directory are closely reviewed and must meet rigorous theme review guidelines to ensure quality and security)
6. Hints on choosing a theme •  the price tag doesn't necessary always mean better worth. (although I highly recommend to pay for premium whenever your happy with a theme)
7. time is better invested then money / invest time not (just) money Hints on choosing a theme
8. Hints on choosing a theme read reviews, support questions and discussion in the forums etc. - it's worth it
9. Hints on choosing a theme more bells and whistles is not better – clean WordPress best practices code is nobody sells a theme with: "horrible code, many beginners mistakes in code”
10. finished step 1 Finding and installing a pleasant theme I chose the free theme «sorbet»
11. It looks like this
12. 2 Customize a theme (or child theme)
13. places to modify a theme •  In the backend UI – Theme customizer – Theme options – Widgets – CSS •  In the file system – CSS / images – Template files
14. In the backend UI The theme customizer and theme options often offer enough options for basic adjustments and customization: •  changing a logo / header image / background •  fonts / colors •  layout variants
15. Example Changing the Background Image, the Header Image, and some Colors in Sorbet.
16. Changing the Background Image, the Header Image, and some Colors in Sorbet.
17. BUT... I can’t change all from the backend, eg. font-family, color, size
18. Hint There is (almost) no difference in handling a theme in the backend, parent or child. But the customizer saves theme-specific: Changes in the parent don’t influence the child.
19. In the backend UI CSS As style sheets are «cascading» you can overwrite styles of the theme. It’s not always needed to edit .css files as some themes offer an entry field to add custom css or have an extensive theme options panel.
20. theme option panels
21. in the file system If you need to edit files do it in a child theme!
22. 3 Creating a child theme! Why and how?
23. Why? •  To keep you from having to choose one of those three options if an update of your chosen theme is available…
24. Option one •  Update and loose most of your customizations
25. Option two •  Not update and risk – a security flaw – not profiting from the new and improved [whatever] – feeling bad
26. Option three •  manually compare the changes from version X to version Y and update them file by file line by line and factor in all your customizations •  Not an option
27. Why – positively said •  To give you a proven, solid way to create a customized theme without danger to damage the original theme. •  The child theme mechanism enables you to override theme templates and stylesheets with your own customizations in a safe way without the need to manipulate the original theme. •  You profit from all the glory of the parent theme (including the experience of it’s developer) and still can create additions, change design and functions…
28. Does your chosen theme work as a parent theme? •  in most cases YES, if the theme is coded properly
29. Does your chosen theme work as a parent theme? •  No, if there are major flaws in the original themes (like hardcoded paths and the like) •  No, if the theme is a child theme already (e.g. Genesis) – No grandchildren – But one parent theme can have many children ! create a sibling (copy the child theme)
30. How to create a (child) theme? •  Themes are a series of files in the wp- content/themes folder of your WordPress installation •  You need either access to the file system on your server (FTP, SFTP, SSH) or you can create the (child) theme locally and upload it via backend (zipped). •  There are also some plugins to do it from the WordPress backend
34. A (parent) theme needs •  style.css •  index.php and most likely has a lot of additional files: •  functions.php •  header.php / footer.php •  sidebar.php •  single.php / content.php / content-page.php / archive.php / comments.php / 404.php…
36. The template hierarchy This files follow the template hierarchy. Which means: WordPress looks for the most specific file first and uses it, if found, otherwise uses a more generic file until it finally uses index.php
37. The template hierarchy explained •  http://codex.wordpress.org/ Template_Hierarchy •  http://wphierarchy.com/ (interactive) •  http://marktimemedia.com/redesigning-the- template-hierarchy/ (wallpaper) •  http://2013.minneapolis.wordcamp.org/ 2013/04/27/wordpress-theme-template- poster/ •  http://www.texto.de/das-geheimnis-der-wp- template-hierarchie-template-sheet-zum- ausdrucken-600/ (deutsch)
41. Template hierarchy - example •  If you click a Category, Tag or Author you normally switch to an archive template. •  To see on which template file your on, you can use a Plugin like Query Monitor
42. A child theme needs •  style.css All other files it takes from the parent theme except there is one in the child theme folder. Therefore you only copy the files you want to adapt into the child theme folder.
43. Style.css
45. Now it looks like this
46. More Meta Information It’s possible to add more than just the Theme Name, Description and Template name in the comment section of the style.css (see next slide example for a Twenty Fourteen Child theme), but it’s not needed.
48. In our example: sorbet
49. Example •  style.css – ! drop-shadow for Site Title •  Changes in template files for: – ! different ©info in footer – !Only excerpts for archives – !Mail in author archives
50. changing the footer.php - parent
51. changing the footer.php - child
52. Result
53. only excerpts for archives Explanation: Instead of having a separate file for each template, we use conditional statements like if ( is_search()) ) in content.php. This has in essence the same effect as using a search.php template, but helps do less repetition. if ( is_search()) || is_archive() ) ask if either (OR) condition is true.
54. mail in author archives Explanation: just adding code to the is_author() part of archive.php
55. Result child parent
56. functions.php •  Doesn't need any special comments, just <?php ?> •  will add / not replace functions if ( !function_exists( ’any_function' ) ){ function any_function() { // Do something. } }
57. Child themes allow you to stand (or sit) on the shoulder of giants. So start creating your very own child theme!
58. Questions?
59. Contact •  christian.zumbrunnen@switchplus.ch •  @chzumbrunnen •  @switchie •  www.switchie.ch / www.switchplus.ch