Word press development for non developers

WordPress Development for Non-Developers:An Introductory Tour Under the Hood

Jessica Gardner@jessicacgardner

#WCTO WordCamp Toronto October 3, 2015

@jessicacgardner #wcto 2015

A little bit about me


A little bit about you….?


view page source


<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>

close-up: code that renders nav menu


index.php




index.php


header.php

sidebar.php

“The Loop”

index.php


wp-content wp-content/themes/twentysixteeninstallation root


wp-config.php



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.


functions.phpregistering widget areas


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.


template-parts/content.php


treasure hunt: where does the nav menu come from?


header.php


style.css


style.css






wp_options


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!)


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


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



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)


Questions?Thank you!

Word press development for non developers

Internet