Lesson 3 – Introduction to Customizing Genesis Using PHP

How to Learn PHP for WordPress & Genesis

• Traditional method
  • Set up a local server
  • Hello World
  • Start learning the fundamental building blocks
  • Can’t do anything significant
  • 2 sets of tools
    • PHP code
    • MySQL code
• Genesis method
  • Work on a live server
  • Start with a very sophisticated set of tools
  • Can do significant things
  • 3 sets of tools
    • PHP code
    • WordPress functions
    • Genesis functions
• Resources
  • Genesis Docs
  • WordPress Codex
  • PHP.net
  • W3Schools
• Work locally
  • A local file structure that mirrors the website files structure
  • Why not use the custom file editor?
• Tools of the Trade
  • Filezilla
  • Netbeans
  • Chrome
  • Why these tools?

How to Setup a Genesis Development Environment

• Setup Local Folder Structure
• Connect Filezilla
• Setup Project
• Understanding the File Structure
  • Genesis – Parent Theme
  • Child Theme
• What they tell you to do
  • Edit Style.css
  • Edit functions.php
• The Fix – My Plugin
  • Install
  • Configure
  • Download
• Why do it this way?

Introduction to Action Hooks in Genesis

• What is an action hook?
  • A WordPress function
  • A hook is a place where you can attach your own functions
  • This is an example of an advanced concept available to the Genesis method of learning PHP
• Where are the hooks?
  • Hook reference guide
    • http://codex.wordpress.org/Plugin_API/Action_Reference
    • http://my.studiopress.com/docs/hook-reference/
  • Visual reference guide
    • https://wordpress.org/plugins/genesis-visual-hook-guide/

Example #1 – The “Hello World” of Action Hooks

• Terminology
  • Statement
    • A single unit of instruction
    • ends with a semi-colon
  • Function
    • A collection of statements executed in sequence
    • has a name
    • must be called from somewhere
• Anatomy of a WordPress action hook
  • activated by using an “action statement”
  • function name – add_action(), remove_action()
  • parameters
    • hook name
    • function name
    • priority
    • (accepted arguments)
    • wrapped in single quotes
    • separated by commas
  • closing semi-colon
    • This lets PHP know that the statement is completed
• Add Hello World to below the header
  • Function
  • echo statement
  • add action

Example #2 – Change the Position of the Secondary Nav Menu

• Remove the Genesis Secondary Nav Menu from its default location
  • the action statement – remove_action()
  • the hook -genesis_after_header
  • the function name – genesis_do_subnav
  • add the function to byob_custom_functions.php
  • upload
  • test
• Add the Genesis Secondary Nav Menu to a new location (above the header)
  • the action statement – remove action, add_action()
  • the hook – genesis_after_header
  • the function name – genesis_do_subnav
  • add to custom_functions.php
  • upload
  • test

Example #3 – Change the Genesis Footer

• Understanding the default Genesis footer
  • It’s HTML structure
  • It’s PHP structure
• Remove the default footer attribution
  • the hook – genesis_footer
  • the function name – genesis_do_footer
  • the remove_action()
  • test
• Add our own custom footer attribution
  • Anatomy of a custom function
    • function name
    • one or more statements
    • brackets
    • trigger
  • Code conventions
    • unique, desciptive function names
    • function name case
    • underscores
    • open and closing bracket locations
    • indentation
  • Including HTML in a PHP function
    • Opening and closing php tags
    • mixing HTML & PHP
  • Add our copyright attribution
    • paragraph tags
    • text
    • HTML special characters
  • test

Example #4 – Refine our custom footer attribution with automatic copyright date and site title

• The WordPress bloginfo() function
  • http://codex.wordpress.org/Function_Reference/bloginfo
  • parameters
  • It’s automatic “print to screen” behavior
• Use bloginfo to create a link to the home page
  • anchor tag
  • href
  • title
  • anchor text
• Mixing single and double quotes
  • double quotes in HTML
  • single quotes in PHP
  • double quotes containing single quotes
  • single quotes containing double quotes
  • double quotes containing escaped double quotes
  • Genesis code
• PHP echo statement
  • http://www.php.net/manual/en/function.echo.php
  • What it does – prints to screen
    • a string
    • the value of a variable
    • the result of a function
  • Syntax
• PHP date function
  • http://www.php.net/manual/en/function.date.php
  • What it does
  • Parameters
    • format
    • time
• Put it all together
• Test

Example #5 – Make a Sticky Top Menu in Genesis

• Genesis tutorial – Add a Sticky Menu
  • http://my.studiopress.com/tutorials/sticky-menu/
  • process
    • move the menu
    • create js folder
    • create js file
    • enqueue script
    • add css
• The WordPress wp_enque_script() function
  • http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  • Syntax
  • Parameters
  • Appropriate WordPress Hook
  • Why do it this way?
• Our Way
  • Add script to footer
  • Add CSS
  • Why do it this way?
• Create the function
  • enqueue script
  • html
• Hook to page
  • hook – genesis_after
• Add CSS
  • Fix admin view
    • body class
    • admin-bar .nav-secondary
  • Fix some colors
    • nav-secondary .genesis-nav-menu a – text color
    • nav-secondary .genesis-nav-menu .sub-menu a – background color
  • Fix borders
    • nav-secondary .genesis-nav-menu .sub-menu a – border color
    • nav-secondary .genesis-nav-menu .sub-menu – border-top
  • Remove extra junk

Introduction to WordPress Conditional Statements

• Conditional Statements
  • if
  • if !
  • elseif
  • else
• Conditional tags

Example #6 – Remove the sticky nav menu on mobile devices

• is mobile

Question and Answer