Build Your Own Business Website header image

Lesson 3 – Introduction to Customizing Genesis Using PHP

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This is the first of several lessons on how to customize the Genesis 2 Theme Using PHP. In this lesson you will learn about the sets of tools used when learning PHP, the resources that will help you understand it and the specifics of how to setup a Genesis Development Environment.We show you six specific examples of how to use PHP to make changes to your website. And finally, we introduce you to WordPress Conditional Statements. In following lessons you will learn about custom templates, custom widget areas and custom secondary loops.

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

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment