Getting Started with WordPress Development

ryan welcher • @ryanwelcher • me@ryanwelcher.com
G E T T I N G S TA RT 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
RYA N W E L C H E R

A B O U T M E
• Ryan Welcher - me@ryanwelcher.com
• 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 TO 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 TO 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

TO 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

TO 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

TO 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 RV 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 )

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-conﬁg.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.

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

S TA RT 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

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 ﬁle 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 RT 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 RT 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 RY O P E R ATO 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

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

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 RY N O - C O N F L I C T
• WordPress loads it’s version of jQuery in no-conﬂict
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 RY 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.

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

T H A N K Y O U !

Getting Started with WordPress Development

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Getting Started with WordPress Development

Similar to Getting Started with WordPress Development (20)

Recently uploaded

Recently uploaded (20)

Getting Started with WordPress Development