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.

Word press development for non developers

1,102 views

Published on

WordCamp Toronto 2015

Published in: Internet
  • Be the first to comment

Word press development for non developers

  1. 1. WordPress Development for Non-Developers: An Introductory Tour Under the Hood Jessica Gardner @jessicacgardner #WCTO WordCamp Toronto October 3, 2015
  2. 2. A little bit about me  @jessicacgardner #wcto 2015
  3. 3. A little bit about you….? @jessicacgardner #wcto 2015
  4. 4. @jessicacgardner #wcto 2015 view page source
  5. 5. @jessicacgardner #wcto 2015 <button id="menu-toggle" class="menu-toggle">Menu</button> <div id="site-header-menu" class="site-header-menu"> <div class="menu-main-container"> <ul id="menu-main" class="primary-menu"> <li id="menu-item-3930" class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-3930"> <a href="http://btwrx.com/sandy/wpsand/home-2/">Home</a></li> <li id="menu-item-3929" class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-3929"> <a href="http://btwrx.com/sandy/wpsand/about/">About</a></li> <li id="menu-item-3928" class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-3928"> <a href="http://btwrx.com/sandy/wpsand/blog/">Blog</a></li> </ul> </div><!-- .main-navigation --> close-up: code that renders nav menu
  6. 6. @jessicacgardner #wcto 2015 index.php
  7. 7. @jessicacgardner #wcto 2015
  8. 8. @jessicacgardner #wcto 2015
  9. 9. @jessicacgardner #wcto 2015 index.php
  10. 10. @jessicacgardner #wcto 2015 header.php sidebar.php “The Loop” index.php
  11. 11. @jessicacgardner #wcto 2015 wp-content wp-content/themes/twentysixteeninstallation root
  12. 12. @jessicacgardner #wcto 2015 wp-config.php
  13. 13. @jessicacgardner #wcto 2015
  14. 14. @jessicacgardner #wcto 2015 what do all some of these files do? functions.php: custom PHP that modifies core elements of the theme (i.e. ADDS FUNCTIONS ). • Controls things like widget areas, custom admin panel options, excerpt length • Behaves a little like a plugin style.css: main stylesheet for the theme. Also contains metadata about the theme.
  15. 15. @jessicacgardner #wcto 2015 functions.php registering widget areas
  16. 16. @jessicacgardner #wcto 2015 what do all some of these files do? readme.txt: with a well-documented theme, contains useful documentation. Read it! index.php: generic template file. Along with style.css, the only required file in a theme. • Displays when nothing more specific is requested/queried • Is the default home page unless another page is specified • Contains “The Loop” The Loop: PHP code that displays posts.
  17. 17. @jessicacgardner #wcto 2015 template-parts/content.php
  18. 18. @jessicacgardner #wcto 2015 treasure hunt: where does the nav menu come from?
  19. 19. @jessicacgardner #wcto 2015 header.php
  20. 20. @jessicacgardner #wcto 2015 style.css
  21. 21. @jessicacgardner #wcto 2015 style.css
  22. 22. @jessicacgardner #wcto 2015
  23. 23. @jessicacgardner #wcto 2015
  24. 24. @jessicacgardner #wcto 2015
  25. 25. @jessicacgardner #wcto 2015
  26. 26. @jessicacgardner #wcto 2015 wp_options
  27. 27. What can you do with this knowledge? • Add a widget area! (functions.php) • Mess around with styling! (style.css) • Change a user’s password! (phpMyAdmin) • Create some custom hooks and filters (maybe a little later) • Delete your entire site in one fell swoop!  (yikes!) @jessicacgardner #wcto 2015
  28. 28. @jessicacgardner #wcto 2015 Guidelines for Safe Exploration  Use a child theme  Duplicate your site and either  Run a local install on your desktop; or  Use a spare domain/subdomain to run a sandbox site
  29. 29. @jessicacgardner #wcto 2015 Child Themes • inherits functionality and styling of parent theme • changes are not overridden by parent theme updates • best practice for modifying existing theme! • style.css – contains any new styling declarations • functions.php – loads along with parent’s functions.php; links child + parent CSS • screenshot.png (optional) • any other template files you wish to alter – loads in place of parent theme’s files Child Theme Folder Contents
  30. 30. @jessicacgardner #wcto 2015
  31. 31. @jessicacgardner #wcto 2015 Making a WordPress Sandbox (Test) Site • MAMP/WAMP/XAMPP – creates website development environment on your local machine • Fresh install or duplicate live site • LOTS of plugins and free resources to make this easy • OR duplicate live site to a test account/subfolder (know, though, that the site will still be “out there” for someone to stumble upon or hack into)
  32. 32. @jessicacgardner #wcto 2015 Questions? Thank you!

×