WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, hooks, APIs, CLI, agile, bootstrap, SEO, slack… etc. We’ll discuss the language and various acronyms and buzzwords used by devs in this crash course introduction to the developer’s world. Overview of primary development processes and terms and what software is needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way.

1. So You Wanna Dev?
Join the Team!
WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs,
themes, child themes, the loop, hooks, APIs, CLI, agile, bootstrap, SEO, slack… etc.
WordCamp Raleigh 2017 - 23 April 2017

2. Introductions
Evan Mullins
Lead Web Developer at
Brown Bag Marketing in ATL
@circlecube
circlecube.com
WordPress user since 2006
Full-time web developer since 2007

3. I like the Internet
The Internet has links
I made these slides
These slides have links too
Throughout these slides almost everything is
linked to related content or sources.

4. Let’s start
at the
beginning
The
Internet

7. Tools

8. Birds eye view
Where to code? Editor, Local
What Code? HTML, CSS, SASS, PHP, JS
WordPress concepts: Plugins, Themes, child themes, template hierarchy, The Loop,
Hooks, Customizing WordPress
Version Control, Task Runners
API, CLI, SEO,
Tools: Slack, Local, Codekit, ACF, Migrate DB Pro
Share what you learn!

9. Text Editor / IDE (integrated development environment)

13. SFTP (secure)File Transfer Protocol
move/copy files to web server
Also SSH

15. Local
MAMP, WAMP, XAMP, AMPPS

16. VVV
Varying Vagrant
Vagrants
Local
Local by Flywheel
Docker

17. HTML
What is HTML?
Resources:
● W3
● HTML5 For Designers
● How to Code in HTML
● MDN: Learning Web Development
● Khan: HTML
● Codecademy: HTML
● HTML5 Cheatsheet

18. HTML - The Source

19. HTML - In Browser

20. <video> <canvas>
<article> <header>
<section> <main>
<footer> <audio>

22. CSS - Cascading Style Sheets
What is CSS and why do we use it?
Resources:
● W3
● CSS3 For Web Designers
● Learn To Code CSS
● CSS Tricks
● MDN: CSS
● Khan: CSS
● Codecademy: CSS
● CSS Specificity Calculator
● CSS3 Cheatsheet

23. A CSS rule

24. CSS Specificity

25. HTML - The Source
<div id="home">
<div class="content">
<article>
<h2 class="noBottom">Getting someone's attention is one thing.</h2>
<h3 class="noTop">Keeping it is what counts.</h3>
<p>A second may be all the time you've got in today's rapidly changing marketing landscape of diverse audiences,
channels and techniques. Simply put, your brand needs an integrated marketing partner. Brown Bag is fully integrated,
full-service and equipped for the digital and content age - creating experiences that keep your customers' attention while
delivering measurable results that keep yours.</p>
</article>
<div class="buttons">
<a href="https://www.brownbagmarketing.com/infographic/" class="btn btn-orange">Why Integrated Marketing</a>
<a href="https://www.brownbagmarketing.com/contact/" class="btn btn-orange">Work With Us</a>
</div>
</div>
</div>

26. HTML - In Browser

27. CSS

28. CSS

29. The Box Model
box-sizing: content-box (default) box-sizing: border-box;

30. CSS3
background-size:
border-radius: grid:
border-box:
flexbox: rgba();
transition:
perspective:
transform:

31. RWD - Responsive (Web) Design

32. Responsive Web Design is accomplished with CSS
statements called Media Queries in your stylesheets.css

33. CSS Grids

34. Bootstrap
http://getbootstrap.com/

35. Foundation
http://foundation.zurb.com/

39. PHP: PHP Hypertext Preprocessor
What is PHP and how?

40. PHP

41. PHP

42. PHP

44. SASS

45. CSS Preprocessors
SASS
LESS
Tedious tasks, let’s let the computer do it for us...

46. CodeKit

47. Grunt vs Gulp

48. javascript

50. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, animation, and Ajax much
simpler with an easy-to-use API that works across a multitude of browsers. With a
combination of versatility and extensibility, jQuery has changed the way that millions
of people write JavaScript.

52. Beyond jQuery

57. WordPress is used by
58.9% of websites
with a CMS.
This is 27.8% of all
websites.
-W3Techs
(as of April 17 2017)

61. WordPress Theme Editor

62. Child Theme

63. Child Theme
A child theme is a theme that inherits the functionality and styling of another theme,
called the parent theme. Child themes are the recommended way of modifying an
existing theme.
● If you modify a theme directly and it is updated, then your modifications may be
lost. By using a child theme you will ensure that your modifications are preserved.
● Using a child theme can speed up development time.
● Using a child theme is a great way to learn about WordPress theme development.
Read More at https://codex.wordpress.org/Child_Themes

64. Child Theme

65. The functions file. A file in a theme that doesn’t display
content but houses your php functions.
This is where you place that snippet of code you find
in a forum that will fix all your problems. You add your
own custom php functions or WordPress hooks and
customizations.
Note that this file is tied to the theme, if you’re
someone who switches themes often, you may be
better served creating a function plugin and placing
your code there.
functions.php

66. Child Theme - style.css

67. Child Theme - functions.php

68. Simple PHP Edits
Rearrange elements, remove elements, edit html tags…
If you want to change more than just the stylesheet, your child theme can override any
file in the parent theme: simply include a file of the same name in the child theme
directory, and it will override the equivalent file in the parent theme directory when
your site loads.
But maybe your php edits could be useful to more than just your site?

70. Template Hierarchy
The template hierarchy is the system WordPress uses to identify which template file to
use when displaying a given page on a site.
How does WordPress decides what template to use for each page?

71. Template Hierarchy

72. The Loop

73. The Loop
The Loop is the code
that queries the
database to get your
posts. It will grab them
all at once and loop
through them while
building the page.

74. The Loop
Note: there are php
methods or Template
Tags that we “must be
within The Loop” in
order to use them.

75. Hooks
Hooks are provided by
WordPress to allow you to
'hook into' the rest of
WordPress. That is, your
functions hook into
WordPress functions. Then
when the WordPress
functions are called at any
time, it sets your code in
motion.

76. Hooks
actions
Actions are the hooks that the WordPress core
launches at specific points during execution, or
when specific events occur. Your plugin can specify
that one or more of its PHP functions are executed
at these points, using the Action API.
filters
Filters are the hooks that WordPress launches to
modify text of various types before adding it to the
database or sending it to the browser screen. Your
plugin can specify that one or more of its PHP
functions is executed to modify specific types of
text at these times, using the Filter API.
Still Lost?

77. Customizing
The Customizer
Custom Post Types
Custom Fields

78. The Customizer

79. Custom Post Types
When a simple blog post
won’t work. You can create a
custom post type (CPT) for
anything you can think of,
and when you combine a
CPT with custom fields, you
begin to harness the true
CMS power of WordPress.

80. Custom Fields
When a big WYSIWYG editor won’t work.

81. Native Custom Fields Advanced Custom Fields

83. git & svn are version control systems (vcs)
Like the undo button or
history pane in photoshop.

85. WordPress core
development and
plugin repo uses
SVN.
There’s also a
WordPress mirror
on github.

86. github.com

88. github
app

89. sourcetree

90. API
An application programming
interface (API) is a set of subroutine definitions,
protocols, and tools for building software and
applications. A good API makes it easier to develop a
program by providing all the building blocks, which are
then put together by the programmer.

91. REST
REpresentational State Transfer
It describes how one system can communicate state with another. One example would
be the state of a product (its name, description etc) represented as JSON. The
generalised idea of state is termed a resource.

92. WP REST API

93. JSON
JavaScript Object Notation is a lightweight data-interchange format.
It is easy for humans to read and write. It is easy for machines to parse and generate. It
is a text format that is completely language independent but uses conventions that are
familiar to programmers. These properties make JSON an ideal data-interchange
language.
JSON is built on two structures:
● A collection of name/value pairs. (object).
● An ordered list of values. (array).

94. Multisite

95. WP-CLI

96. #navigate to directory
cd local.project.com
#download wp
wp core download
#set up db creds in config
wp core config --dbname=root --dbuser=root --dbpass=pass
#install wp
wp core install --url=http://local.project.com/ --title=Project Site
--admin_user=emullins --admin_password=********
--admin_email=emullins@brownbagmarketing.com
#create users
wp user create brownbag wordpress@brownbagmarketing.com --user_pass=********
--first_name='Brown Bag' --last_name=Marketing --role=admin
#install plugins
wp plugin activate
#install theme
wp theme install ../path/or/url/to/theme/zip.zip
#activate theme
wp theme activate my-theme

98. SEO
Search Engine Optimization being google-able
On Page: domain name, internal links/navigation, content, freshness, keyword density,
site speed, SSL, etc
Off Page: quantity and quality of inbound links, social media
Out of the box WordPress has many helpful features that make your site search engine
friendly on-page: clean code, content first, crawlability, pretty permalinks, etc.
Plugins can still add more: Yoast, All in One SEO Pack… and more

100. Waterfall Methodology

101. Slack
Sign up for the
WordPress slack team

102. Tools & Helpers
Local by Flywheel

103. Tools & Helpers
CodeKit

104. Tools & Helpers
Advanced
Custom
Fields
Pro

105. Tools & Helpers
Migrate DB Pro

106. Code 101

107. CODE 101 Success
Now that you know
Help others along the way!
Taylor is a graduate of
our internal Code101 course and
is now part of our dev team!

108. Want more?
https://premium.wpmudev.org/blog/wordpress-dictionary/
https://developer.mozilla.org/en-US/docs/Web/Guide/Introduction_to_Web_developm
ent
https://www.pluralsight.com/courses/web-development-intro
https://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1
http://www.htmldog.com/guides/
@GoodFirstBugs

109. Birds eye review
Where to code? Editor, Locally
What Code? HTML, CSS, SASS, PHP, JS
WordPress concepts: Plugins, Themes, child themes, template hierarchy, The Loop,
Hooks, Customizing WordPress
Version Control, Task Runners
API, CLI, SEO,
Tools: Slack, Local, Codekit, ACF, Migrate DB Pro
Share what you learn!

110. Thank You!
Any Questions?
Slides available at https://circlecube.com/does-wordpress/