Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Firstborn child theme word camp presentation - atlanta 2013


Published on

Learn how to mod themes the right way. Using child themes you won’t loose your edits when there’s a theme update. (101) We’ll go over the advantages and how to set up a child theme. (102) Plus we’ll cover some tricks to make the process a bit easier.

  • Be the first to comment

  • Be the first to like this

Firstborn child theme word camp presentation - atlanta 2013

  1. 1. Your firstborn child theme Child themes 101+2 WordCamp Atlanta 15 March 2013 Evan Mullins @circlecubeLearn how to mod themes the right way. Using child themesyou wont lose your edits when theres a theme update.(101) Well go over the advantages and how to set up a child theme.(102) Plus well cover some tricks to make the process a bit easier.
  2. 2. Who am I? Evan Mullins currently:2006 started in Web Design Interactive Director at Brand Fever, a Creative Marketing2007 started using WordPress for blogging Agency down the street. http://brandfeverinc.com2008 started theming
  3. 3. Firstborn Child theme101 102Themes Deeper into WPChild themes HelpersWhy Best PracticesHow
  4. 4. 101What is a WordPress theme?
  5. 5. Your Theme is your BrandYour theme is your design, identity & brand.
  6. 6. What is a WordPress theme?The WordPress themesystem is a way to skinyour site.Its a collection of files that worktogether to produce a graphicalinterface with an underlyingunifying design for a weblog. Thesefiles are called template files. ATheme modifies the way the site isdisplayed, without modifying theunderlying software.
  7. 7. What is a WordPress theme?A theme, template, skin, etc… is aready to use design and layout thatyou can pop right onto your existingWordPress site. WordPress handlesall of the content for you (posts,pages, comments), while the themetransforms that content into abeautiful and clean layout for yourvisitors to see.
  8. 8. What is a WordPress theme?Think of it like a house. WordPressprovides the foundation and framing,while your theme adds in the paint,flooring, curtains, etc. – everythingyou need to construct the “look” ofyour site.
  9. 9. What is a WordPress theme?The key takeaway about WordPress themes anybeginner must know is that at any moment aWordPress website’s theme may be changedwithout adversely affecting the actual content ofthe website.Graph Paper Press beginner’s guide:
  10. 10. What is a WordPress theme?All the files that Whats the point?determine the visualor front-end of the Themes separate a sitessite. A theme is what presentation from thethe site looks like and system files.potentially somefeatures of the site by Like a CMS separates the actual content.incorporating thingslike custom post types,custom fields, etc.
  11. 11. Good theme != SuccessAlthough helpful, agood theme does notautomatically makea site good orsuccessful.(Although a bad theme couldhinder success or even render yoursite useless)
  12. 12. Friendlyreminder:As always,CONTENTis King.
  13. 13. Types of themesCustomFreePremiumCustomizedStarterFrameworkParentChild
  14. 14. Free
  15. 15. Premium
  16. 16. Starter
  17. 17. FrameworkA "drop-in" code library framework is not a stand-alone Theme. Suchframeworks cannot be installed nor used as a stand-alone Theme.Rather, these libraries are included with the Theme, and"bootstrapped" to the Theme by being included in the Themesfunctions.php file.A "base/starter" Theme framework is stand-alone Theme designedto be a flexible foundation for quicker WordPress development,usually serving as a robust Parent Theme for Child Themes. SomeTheme frameworks can also make theme development moreaccessible, removing the need for programming or designknowledge with options pages.
  18. 18. Framework
  19. 19. Parent Any theme can be a parent. There are no sterile themes. (but some do make better parents & are built with child themes in mind)
  20. 20. Child Themes? The analogy stops there. InCleverly named WordPress child themes inherit frombecause, like real life the parent, but they dont drive the parent theme crazy.parent - childrelationships, they In fact the parent theme is not affected in the least by the childinherit characteristics theme. (and thats kinda the point)of the parent ... Plus there are no grand-parent themes.
  21. 21. If its confusing, justthink sub-theme. Itinherits all parts of theparent theme and letsyou customize it.
  22. 22. Not sold yet?I can hear it now:"I already customize theme easily,I just edit the files."
  23. 23. Why Use a Child Theme?A WordPress child theme is a theme that inherits the functionality ofanother theme, called the parent theme, and allows you to modify, oradd to, the functionality of that parent theme. when the parentMaking a child theme is very simple. Create a directory by using FTPor whatever file management application your host provides. Put aproperly formatted style.css file in it, and you have a child theme! theme is updated, yourThe child theme contains a "Template: parent-theme-dir" header todistinguish it from standalone themes. With a little understanding ofHTML and CSS, you can make that very basic child theme modify modifications arethe styling and layout of a parent theme to any extent without editingthe files of the parent theme itself. That way, when the parent themeis updated, your modifications are preserved. preserved.You can make the child theme extend virtually every aspect of aparent theme, and again, without actually changing the parent themefiles.Creating a theme as achild theme is a hugehead start.
  24. 24. Same Concept with WP CoreIts best practice toavoid editing core files.Because then you have forked core (which iscool if thats what you meant to do. Some coolprojects are started this way.) and any futureupdates to WordPress and your edits areoverwritten.
  25. 25. "Child themes and aframework are the only wayyou should build yourWordPress site" - Matt Mullenweg
  26. 26. So, what exactly is a theme?● Your theme is your site and brand● There are many kinds/types of themes● Not all equal ○ purpose ○ design ○ quality ○ documentation ○ price ○ support ○ features ○ license ○ security ○ SEO ○ ...
  27. 27. What files make a theme?Themes are acollection of fileslocated a folder inyour wordpressthemes directory onyour web server.
  28. 28. Anatomy of a themeWordPress Themes live in subdirectories residing in wp-content/themes/. The Themes subdirectory holds all of theThemes stylesheet files, template files, and optionalfunctions file (functions.php), JavaScript files, and images.For example, a Theme named "test" would reside in thedirectory wp-content/themes/test/WordPress Themes typically consist of three main types offiles, in addition to images and JavaScript files. 1. The stylesheet called style.css, which controls the presentation (visual design and layout) of the website pages. 2. WordPress template files which control the way the site pages generate the information from your WordPress database to be displayed on the site. 3. The optional functions file (functions.php) as part of the WordPress Theme files.
  29. 29. Anatomy of a Child ThemeThe simplest Theme possible is a childtheme which includes only a style.css file.This is possible because it is a child ofanother theme which acts as its parent.
  30. 30. What files make a childtheme?A child theme automatically includesor inherits all the parent themefunctionality. Styles are notautomatic, but can be pulled in easily.
  31. 31. style.css In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. The stylesheet must provide details about the Theme in the form of comments. No two Themes are allowed to have the same detailslisted in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.
  32. 32. Create a child theme1. Make a newfolder in yourthemes directory.Name it whatever, (probablyreflecting the name of thetheme).
  33. 33. Create a child theme2. Add a stylessheetfile, style.css
  34. 34. Create a child theme3. Add theme details(meta data) tostylesheet in form of acomment block.Standard provided byWordPress.
  35. 35. Create a child theme4. Add styles andcustomize.
  36. 36. Create a child themeOptional:● functions.php● Template files● additional images● scripts● etc
  37. 37. Override your ParentA child theme can override parenttheme files, functionality or codeA template with the same name in achild theme will be used rather than aparent theme template.A child theme functions.php file isloaded before the parent theme.
  38. 38. Questions?102
  39. 39. Reasons to child-themeAdd widget areasCustom post typesCustom taxonomiesResponsiveRebrand
  40. 40. Child Theme Support All themes required (?) to facilitate a child theme! This section is draft only. ● Themes are required to facilitate the use of Child Themes. A "basic" Child Theme (i.e. a style.css with Template header tag and @import() of the Template style.css), when activated, should function exactly as the Theme itself functions. ● Themes are required to include functional and resource files in a manner that facilitates the use of Child Themes: ○ Use get_template_directory_uri() to include functional files, or resources that are not intended to be included in/over-ridden the Child Theme. ○ Use get_stylesheet_directory_uri() to include resources that are intended to be included in/over- ridden by the Child Theme.
  41. 41. Some Popular Parent Themestwenty somethingsthematicgenesishybrid_s...
  42. 42. Theme Template HierarchyWhich template file(s) will WordPress usewhen it displays a certain type of page?The huge logic tree (diagram) that helpsWordPress decide which template to show forevery type of content. It shows the defaultsand fallbacks, notice how everything defaultsback to index as a fallback if that specific typeof content does not have a template.
  43. 43. pop quiz!
  44. 44. pop quiz!
  45. 45. pop quiz!
  46. 46. HooksHooks are provided by WordPress to allow you to hookinto the rest of WordPress. That is, your functions hookinto WordPress functions. Then when the WordPressfunctions are called at any time, it sets your code in motion.
  47. 47. Hooksactions filtersActions are the hooks that the WordPress Filters are the hooks that WordPresscore launches at specific points during launches to modify text of various typesexecution, or when specific events occur. Your before adding it to the database or sendingplugin can specify that one or more of its PHP it to the browser screen. Your plugin canfunctions are executed at these points, using specify that one or more of its PHPthe Action API. functions is executed to modify specific types of text at these times, using the Filter API.
  48. 48. HooksYou can sometimes accomplish the same goal with either an action or afilter. For example, if you want your plugin to change the text of a post,you might add an action function to publish_post (so the post ismodified as it is saved to the database), or a filter function tothe_content (so the post is modified as it is displayed in the browserscreen).Confused? Check the analogy comparing hooks to the line at the
  49. 49. The LoopLoops in programming do just that, they loop or repeatthemselves until a certain criteria is met.The WP loop is great because it grabs all the content fromthe database once and stores the results in memory, thenloops through the results and creates the page. Its muchfaster than grabbing content over and over one at a time.
  50. 50. Loop Example BasicIn English: In Code: 1. Define what content to display 2. Begin loop $the_query = new WP_Query( $args ); 3. Do stuff (print content found in the loop) if (have_posts()) : 4. End loop while (have_posts()) : the_post(); the_content(); endwhile; endif;
  51. 51. Loop Example MoreIn english 1. Define what content to display 2. Begin loop 3. Do stuff (print content found in the loop) 4. End loop
  52. 52. Loop - The QueryBefore starting your loop you can set arguments in yourquery to decide:● Which items to display● Which category/taxonomy to display● How to sort the results● Anything else from Template Tags
  53. 53. GenerateWPGenerateWP provides user-friendly tools for developers to create advanced systems built on WordPress.Writing your own code takes time, with plugins you never know if it stays in active development or not. GenerateWP reducedevelopment time and provides high quality code built using the latest WordPress standards.Usage ● Choose your generator. ● Fill out the user-friendly form. ● Click the "Update Code" button. ● Copy the code to your theme/plugin.Generators 1. wp-config.php Generator - Create custom code for wp-config.php file. 2. Taxonomy Generator - Create custom code for Taxonomies using register_taxonomy() function. 3. Post Type Generator - Create custom code for Post Types using register_post_type() function. 4. Post Status Generator - Create custom code for Post Status using register_post_status() function. 5. Sidebar Generator - Create custom code for Sidebars using register_sidebar() function. 6. Menu Generator - Create custom code for Navigation Menus using register_nav_menus() function. 7. Theme Support Generator - Create custom code for Theme Features using add_theme_support() function. 8. Shortcodes Generator - Create custom code for Shortcodes using add_shortcode() function.
  54. 54. “You cannot step twice into the same river; for other waters are ever flowing in”@Heraclitus
  55. 55. Thank You!Any Questions?Slides @ Evan Mullins