Download - Word press development for non developers
![Page 1: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/1.jpg)
WordPress Development for Non-Developers:An Introductory Tour Under the Hood
Jessica Gardner@jessicacgardner
#WCTO WordCamp Toronto October 3, 2015
![Page 2: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/2.jpg)
@jessicacgardner #wcto 2015
A little bit about me
![Page 3: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/3.jpg)
@jessicacgardner #wcto 2015
A little bit about you….?
![Page 4: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/4.jpg)
![Page 5: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/5.jpg)
@jessicacgardner #wcto 2015
view page source
![Page 6: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/6.jpg)
@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
![Page 7: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/7.jpg)
@jessicacgardner #wcto 2015
index.php
![Page 8: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/8.jpg)
@jessicacgardner #wcto 2015
![Page 9: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/9.jpg)
@jessicacgardner #wcto 2015
![Page 10: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/10.jpg)
![Page 11: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/11.jpg)
@jessicacgardner #wcto 2015
index.php
![Page 12: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/12.jpg)
@jessicacgardner #wcto 2015
header.php
sidebar.php
“The Loop”
index.php
![Page 13: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/13.jpg)
@jessicacgardner #wcto 2015
wp-content wp-content/themes/twentysixteeninstallation root
![Page 14: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/14.jpg)
@jessicacgardner #wcto 2015
wp-config.php
![Page 15: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/15.jpg)
@jessicacgardner #wcto 2015
![Page 16: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/16.jpg)
@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 pluginstyle.css: main stylesheet for the theme. Also contains metadata about the theme.
![Page 17: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/17.jpg)
@jessicacgardner #wcto 2015
functions.phpregistering widget areas
![Page 18: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/18.jpg)
@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.
![Page 19: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/19.jpg)
@jessicacgardner #wcto 2015
template-parts/content.php
![Page 20: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/20.jpg)
@jessicacgardner #wcto 2015
treasure hunt: where does the nav menu come from?
![Page 21: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/21.jpg)
@jessicacgardner #wcto 2015
header.php
![Page 22: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/22.jpg)
@jessicacgardner #wcto 2015
style.css
![Page 23: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/23.jpg)
@jessicacgardner #wcto 2015
style.css
![Page 24: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/24.jpg)
@jessicacgardner #wcto 2015
![Page 25: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/25.jpg)
@jessicacgardner #wcto 2015
![Page 26: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/26.jpg)
@jessicacgardner #wcto 2015
![Page 27: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/27.jpg)
@jessicacgardner #wcto 2015
![Page 28: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/28.jpg)
@jessicacgardner #wcto 2015
wp_options
![Page 29: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/29.jpg)
@jessicacgardner #wcto 2015
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!)
![Page 30: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/30.jpg)
@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
![Page 31: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/31.jpg)
@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
![Page 32: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/32.jpg)
@jessicacgardner #wcto 2015
![Page 33: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/33.jpg)
@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)
![Page 34: Word press development for non developers](https://reader035.vdocuments.site/reader035/viewer/2022070512/589dc7e51a28abf45d8b49fd/html5/thumbnails/34.jpg)
@jessicacgardner #wcto 2015
Questions?Thank you!