Getting Started with WordPress Development

ryan welcher • @ryanwelcher • [email protected]

G E T T I N G S TA R T E D W I T H W O R D P R E S S D E V E L O P M E N T

R YA N W E L C H E R

mailto:[email protected]


A B O U T M E

• Ryan Welcher - [email protected]

• Web Developer for over 10 years

• Been working with WordPress since 2009

• Web Engineer at 10up



T H I S P R E S E N TAT I O N

• Sharing gotcha’s with the noobs :) - where to start and what not to do.

• Aimed at developers or designers just getting into WordPress development.

• Not an introduction to programming concepts.

• Lots of topics, not a lot of depth for each.

• Assuming that you can install WordPress and are comfortable looking at PHP.

• Open to suggestions.



P O S S I B L E T O P I C S

• local development server

• Vagrant

• Varying Vagrant Vagrants

• Development plugins

• WP_DEBUG

• Error handling

• Browser tools

• Software tools

• Getting WordPress core

• Coding standards

• Documentation

• PHPDocs

• PHP gotcha’s

• Single vs double quotes

• The White Screen of Death

• Defensive development

• Shorthand control structures

• Ternary operators

• Hacking core

• Data sanitization

• Nonces and security

• Actions

• Filters

• WP_Query

• custom post types

• custom taxonomies

• custom fields

• query_posts()

• get_posts()

• $wpdb

• shortcodes

• Widgets

• Writing a plugin

• Plugin headers

• Object-oriented programming

• Design patterns

• Creating a theme

• Creating a child theme

• Theme template hierarchy

• Enqueueing JS/CSS correctly

• AJAX

• JSON

• The Command line

• WP_CLI

• Bash scripting

• Grunt

• my head just exploded…



A C T U A L T O P I C S

• Setting up

• Tools

• Local Development Server

• Getting WordPress Core

• WordPress file structure

• Setting up WP_DEBUG

• Development Plugins

• PHP

• General PHP

• The White Screen of Death

• Defensive Development

• Single vs Double Quotes

• Shorthand Control Structures

• Ternary Operators

• WordPress

• Where does my code go?

• Hacking Core

• Hooks

• Path Helper Methods

• Adding Javascript and CSS correctly

• jQuery no-conflict mode

• The Loop

• Creating secondary loops

• Resource Links



S E T T I N G U P



T O O L S

• Code Editor / IDE ( Integrated Development Environment )

• Theme/Plugin editor in WordPress is too volatile!

• No word processing software.

• Software:

• Sublime Text - www.sublimetext.com

• Dreamweaver - www.adobe.com

• TextMate - macromates.com

• Phpstorm - www.jetbrains.com


http://www.sublimetext.com/

http://www.adobe.com

http://macromates.com/

https://www.jetbrains.com/phpstorm/


T O O L S

• FTP (File Transfer Protocol) software.

• Copy files to and from a remote server.

• Software:

• Transmit - panic.com/transmit

• FileZilla - filezilla-project.org

• Fetch - fetchsoftworks.com

• Beyond Compare - www.scootersoftware.com


http://panic.com/transmit/

https://filezilla-project.org/

http://fetchsoftworks.com/

http://www.scootersoftware.com/


T O O L S

• Web Browser Tools

• Will help with debugging in the browser - i.e Javascript errors.

• Most modern browsers have tools either built-in or easily installed.

• Usually right clicking and choosing “inspect element” will open the tools.

• Internet Explorer - press F12

• FireFox - Install FireBug add-on first.



L O C A L D E V E L O P M E N T S E R V E R

• Why set one up?

• Gives you a safe “sandbox” to make mistakes with your code.

• Proper debugging configuration.

• Saves time vs FTP upload*

• How do I set one up?

• MAMP - www.mamp.info

• WAMP - www.wampserver.com

• Vagrant and VVV ( Varying Vagrant Vagrants )


http://www.mamp.info

http://www.wampserver.com


G E T T I N G W O R D P R E S S C O R E


F I L E S T R U C T U R E• wp-config.php -

contains your website’s base configuration details such as database connection info.

• wp-content - contains all of the plugins, themes and uploaded content.

• Everything else is WordPress core and should be left alone.


W P _ D E B U G

Open wp-config.php and change this…



W P _ D E B U G

E D I T I N G W P - C O N F I G : H T T P : / / C O D E X . W O R D P R E S S . O R G / E D I T I N G _ W P - C O N F I G . P H P

To this.


http://codex.wordpress.org/Editing_wp-config.php


P L U G I N S

• Developer - https://wordpress.org/plugins/developer/

• Helps you optimize your development environment by making sure that you have all the essential tools and plugins installed.

• Log Deprecated Notices - https://wordpress.org/plugins/log-deprecated-notices/

• Logs the usage of deprecated files, functions, and function arguments, and identifies where the deprecated functionality is being used.

• Debug Bar - https://wordpress.org/plugins/debug-bar/

• Adds a debug menu to the admin bar that shows query, cache, and other helpful debugging information.

• Lots of add-on plugins available


https://wordpress.org/plugins/developer/

https://wordpress.org/plugins/log-deprecated-notices/

https://wordpress.org/plugins/debug-bar/


S TA R T D E V E L O P I N G



G E N E R A L P H P

• PHP variables must start with a $ followed by a letter or underscore

• Valid: $foo, $_foo

• Invalid: _foo, $123_foo, $!foo

• Don’t use shorthand PHP tags

• Good: <?php … ?>

• Bad : <?= … ?> or <? … ?>

• Your php.ini file may not allow shorthand tags and will cause a world of hurt.

• PHP lines must always end with a semi-colon.

• You’ll know if you forgot one … duh duh duhhhhhh.



W H I T E S C R E E N O F D E AT H




• Check your syntax

• Missing a $ or invalid variable name.

• Missing semi-colon.

• Missing a curly brace.

• Too many or not enough parens.

• Check your debug.log file in wp-content folder.

• The last line will give you a file name and line number.

• PHP {ERROR _TYPE}: { ERROR_DESC } in { FILENAME } on line { # }

• PHP Parse error : syntax error, unexpected ‘=‘ in / … /functions.php on line 62



D E F E N S I V E D E V E L O P M E N T

• Planning for and handling failure.

• Checking all the things BEFORE using them.

• Example functions:

• isset()

• gettype()

• empty()

• function_exists()

• defined()

• is_wp_error()

• WordPress functions can return on failure:

• False

• WP_Error object



D E F E N S I V E D E V E L O P M E N T



S I N G L E V S D O U B L E Q U O T E S

• Double quotes parse variables as their value.

• Use single quotes unless you have something to parse.


S H O R T H A N D C O N T R O L S T R U C T U R E S

• if, while, foreach, etc statements without the curly braces.

• Nice for switching between PHP and HTML cleanly.

• Gotcha - IDE’s will not catch errors.


S H O R T H A N D C O N T R O L S T R U C T U R E S



T E R N A R Y O P E R AT O R S

• Single line if/else statement

• Handy for variable assignment

• Format: ( if statement is true ) ? do this : else, do this;



W O R D P R E S S



W H E R E D O E S M Y C O D E G O ?• Plugins

• wp-content

• plugins

• your-plugin

• your-plugin.php

• Themes

• wp-content

• themes

• your-theme

• functions.php



H A C K I N G C O R E



H A C K I N G C O R E

• What?

• Make code changes to files outside of the wp-content folder.

• Also applies to downloaded themes/plugins.

• Why not?

• Site is no longer future-proof.

• Compatibility issues with other plugins/themes.

• May introduce security holes.

• When core/theme/plugin updates, your changes are gone!

• Your hacking what plugins are meant to do - use hooks instead.



H O O K S

• Provided by WordPress to allow us to 'hook' our code into the rest of WordPress Core.

• A hook is a function that invokes an event that triggers all other functions hooked into that event.

• 2 Kinds of hooks:

• Actions - Points in the code where WordPress gives us the ability to add tasks.

• Filters - Allow us to edit content/data before it’s output.



A C T I O N S

• has_action()

• add_action()

• do_action()

• do_action_ref_array()

• did_action()

• remove_action()

• remove_all_actions()

• doing_action()

A C T I O N S : H T T P : / / C O D E X . W O R D P R E S S . O R G / P L U G I N _ A P I /A C T I O N _ R E F E R E N C E


http://codex.wordpress.org/Plugin_API/Action_Reference


A C T I O N S

• do_action( $tag, $arg … )

• Invokes an action.

• Use to invoke your own actions.

• add_action( $tag, $function_to_add, $priority = 10, $accepted_args = 1 )

• Hooks into an action invoked by do_action().

• remove_action( $tag, $function_to_remove, $priority )

• removes a function from an invoked action.

• arguments must match the add_action call exactly.



A C T I O N S



F I LT E R S : H T T P : / / C O D E X . W O R D P R E S S . O R G / P L U G I N _ A P I /F I LT E R _ R E F E R E N C E

• has_filter()

• add_filter()

• apply_filters()

• apply_filters_ref_array()

• current_filter()

• remove_filter()

• remove_all_filters()

• doing_filter()

F I LT E R S


http://codex.wordpress.org/Plugin_API/Filter_Reference


F I LT E R S• apply_filters( $tag, $value, $var … )

• Invokes a filter.

• Returns the result of $value after all hooked functions are applied to it.

• Use to invoke your own filters.

• add_filter( $tag, $function_to_add, $priority = 10, $accepted_args = 1 )

• Hooks into a filter invoked by apply_filter().

• $function_to_add always takes a parameter and must return data.

• remove_filter( $tag, $function_to_remove, $priority )

• removes a function from an invoked filter.

• arguments must match the add_filter call exactly.



F I LT E R S



PAT H H E L P E R M E T H O D S

Let WordPress do the work for you!



PAT H H E L P E R M E T H O D S• Plugins

• plugins_url()

• plugin_dir_url()

• plugin_dir_path()

• plugin_basename()

• Themes

• get_template_directory_uri()

• get_stylesheet_directory_uri()

• get_stylesheet_uri()

• get_theme_root_uri()

• get_theme_root()

• get_theme_roots()

• get_stylesheet_directory()

• get_template_directory()

• Site Home

• home_url()

• get_home_path()

• WordPress

• admin_url()

• site_url()

• content_url()

• includes_url()

• wp_upload_dir()

• get_bloginfo()



A D D I N G J S A N D C S S C O R R E C T LY

• wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

• Handles dependencies, load order and duplication of files.

• wp_enqueue_style( $handle, $src, $deps, $ver, $media )

• Both are used with the wp_enqueue_scripts action for the front-end.

• Other hooks

• admin_enqueue_scripts

• login_enqueue_scripts



A D D I N G J S A N D C S S C O R R E C T LY



J Q U E R Y N O - C O N F L I C T

• WordPress loads it’s version of jQuery in no-conflict mode to play nicely with other libraries.

• $ shorthand is replaced with jQuery



T H E L O O P

• “The Loop” is the main process of WordPress.

• You use The Loop in your template files to show content to visitors.

• Any HTML or PHP code in The Loop will be processed on each post.

• There are special functions or Template Tags that are meant to be used inside The Loop.

• The Loop uses global variables called $wp_query and $post behind the scenes.



T H E L O O P



T E M P L AT E TA G S

• the_category()

• the_title()

• the_title_attribute()

• the_meta()

• the_content()

• the_excerpt()

• the_permalink()

• the_ID()

• the_tags()

• the_date()

• the_time()

• the_shortlink()



C R E AT I N G S E C O N D A R Y L O O P S

• As a developer you will be creating secondary loops all the time.

• 3 options to create secondary loop:

• query_posts()

• get_posts()

• WP_Query Class

• We have to be careful not to interfere with “The Loop”.




• query_posts()

• Don’t use this, even the Codex says you shouldn’t.

• Inefficient.

• Alters The Loop.

• If that’s your goal, use the pre_get_posts hook instead.

• If you have to use it, always call wp_reset_query() afterwards to reset The Loop.




• get_posts( $args )

• Safe to use anywhere.

• $args can be a string or an associative array.

• Returns an array of WP_Post objects.

• Need to use setup_postdata() in order to have access to Template Tags like the_title() and the_content()

• You must pass $post to setup_postdata() no other variable name will work.

• It will change the global $post variable used by The Loop.

• Must be followed by a call to wp_reset_postdata() to reset the global $post variable.



C R E AT I N G S E C O N D A R Y L O O P S• WP_Query Class

• Powers both query_posts() and get_posts() behind the scenes.

• You can create your own instances and use them safely anywhere.

• Less restrictive but more complicated.

• Methods:

• have_posts()

• the_post()

• will change the global $post variable used by The Loop.

• Must be followed by a call to wp_reset_postdata() to reset the global $post variable.



L E A R N I N G R E S O U R C E S

• The Codex - codex.wordpress.org

• WordPress Stack Exchange - wordpress.stackexchange.com

• WordPress Support Forums - wordpress.org/support

• WordPress Core

• WordPress coding standards - make.wordpress.org/core/handbook/coding-standards/

• PHP Documentation - php.net/manual/en

• lynda.com

• Tuts+ - http://tutsplus.com/


http://codex.wordpress.org/

http://wordpress.stackexchange.com/

https://wordpress.org/support/

https://make.wordpress.org/core/handbook/coding-standards/

http://php.net/manual/en/

http://lynda.com

http://tutsplus.com/


T H A N K Y O U !


Getting Started with WordPress Development

Internet

Transcript of Getting Started with WordPress Development