Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
So You Wanna Dev?
Join the Team!
WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs,
themes...
Introductions
Evan Mullins
Lead Web Developer at
Brown Bag Marketing in ATL
@circlecube
circlecube.com
WordPress user sinc...
WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes,
child themes, the loop, inspect...
Caution & Disclaimer
There are lots of slides here,
over 100.
I’m doing my best to be thorough,
but also fast.
I’ll share ...
Let’s start
at the
beginning
The
Internet
Tools
Bird’s eye view
Where to code? Editor, Local
What Code? HTML, CSS, SASS, PHP, JS
WordPress concepts: Plugins, Themes, chil...
Text Editor / IDE (integrated development environment)
SFTP (secure)File Transfer Protocol
move/copy files to web server
Also SSH
Local
MAMP, WAMP, XAMP, AMPPS
VVV
Varying Vagrant
Vagrants
Local
Local by Flywheel
Docker
HTML
What is HTML?
Resources:
● W3
● HTML5 For Designers
● How to Code in HTML
● MDN: Learning Web Development
● Khan: HTM...
HTML - The Source
HTML - In Browser
<video> <canvas>
<article> <header>
<section> <main>
<footer> <audio>
CSS - Cascading Style Sheets
What is CSS and why do we use it?
Resources:
● W3
● CSS3 For Web Designers
● Learn To Code CS...
A CSS rule
CSS Specificity
HTML - The Source
<div id="home">
<div class="content">
<article>
<h2 class="noBottom">Getting someone's attention is one ...
HTML - In Browser
CSS
CSS
The Box Model
box-sizing: content-box (default) box-sizing: border-box;
CSS3
background-size:
border-radius: grid:
border-box:
flexbox: rgba();
transition:
perspective:
transform:
RWD - Responsive (Web) Design
Responsive Web Design is accomplished with CSS
statements called Media Queries in your stylesheets.css
CSS Grids
Bootstrap
http://getbootstrap.com/
Foundation
http://foundation.zurb.com/
PHP: PHP Hypertext Preprocessor
What is PHP and how?
PHP
PHP
PHP
SASS
CSS Preprocessors
SASS
LESS
Tedious tasks, let’s let the computer do it for us...
CodeKit
Grunt vs Gulp
javascript
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulatio...
Beyond jQuery
WordPress is used by
58.9% of websites
with a CMS.
This is 28% of all
websites.
-W3Techs
(as of May 23 2017)
WordPress Theme Editor
Child Theme
Child Theme
A child theme is a theme that inherits the functionality and styling of another theme,
called the parent theme...
Child Theme
The functions file. A file in a theme that doesn’t display
content but houses your php functions.
This is where you place ...
Child Theme - style.css
Child Theme - functions.php
Simple PHP Edits
Rearrange elements, remove elements, edit html tags…
If you want to change more than just the stylesheet,...
Template Hierarchy
The template hierarchy is the system WordPress uses to identify which template file to
use when display...
Template Hierarchy
The Loop
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 ...
The Loop
Note: there are php
methods or Template
Tags that we “must be
within The Loop” in
order to use them.
Hooks
Hooks are provided by
WordPress to allow you to
'hook into' the rest of
WordPress. That is, your
functions hook into...
Hooks
actions
Actions are the hooks that the WordPress core
launches at specific points during execution, or
when specific...
Customizing
The Customizer
Custom Post Types
Custom Fields
The Customizer
Custom Post Types
When a simple blog post
won’t work. You can create a
custom post type (CPT) for
anything you can think o...
Custom Fields
When a big WYSIWYG editor won’t work.
Native Custom Fields Advanced Custom Fields
git & svn are version control systems (vcs)
Like the undo button or
history pane in photoshop.
WordPress core
development and
plugin repo uses
SVN.
There’s also a
WordPress mirror
on github.
github.com
github
app
sourcetree
API
An application programming
interface (API) is a set of subroutine definitions,
protocols, and tools for building softw...
REST
REpresentational State Transfer
It describes how one system can communicate state with another. One example would
be ...
WP REST API
JSON
JavaScript Object Notation is a lightweight data-interchange format.
It is easy for humans to read and write. It is e...
Multisite
WP-CLI
#navigate to directory
cd local.project.com
#download wp
wp core download
#set up db creds in config
wp core config --dbna...
SEO
Search Engine Optimization being google-able
On Page: domain name, internal links/navigation, content, freshness, keyw...
Waterfall Methodology
Slack
Sign up for the
WordPress slack team
Tools & Helpers
Local by Flywheel
Tools & Helpers
CodeKit
Tools & Helpers
Advanced
Custom
Fields
Pro
Tools & Helpers
Migrate DB Pro
Code 101
CODE 101 Success
Now that you know
Help others along the way!
Taylor is a graduate of
our internal Code101 course and
is n...
Want more?
https://premium.wpmudev.org/blog/wordpress-dictionary/
https://developer.mozilla.org/en-US/docs/Web/Guide/Intro...
Bird’s eye review
Where to code? Editor, Locally
What Code? HTML, CSS, SASS, PHP, JS
WordPress concepts: Plugins, Themes, ...
Thank You!
Any Questions?
Slides available at https://circlecube.com/does-wordpress/
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!

Download to read offline

WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, inspect element, 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.

Takeaways:

Learn to speak dev
Get familiar with concepts (and acronyms) you’ll need to dev
Learn about tools that will help you

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!

  1. 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 Asheville 2017 - 3 June 2017
  2. 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 Slides at https://circlecube.com/does-wordpress/
  3. 3. WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, inspect element, 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. Takeaways: ● Learn to speak dev ● Get familiar with concepts (and acronyms) you’ll need to dev ● Learn about tools that will help you
  4. 4. Caution & Disclaimer There are lots of slides here, over 100. I’m doing my best to be thorough, but also fast. I’ll share these slides, slides have many links.
  5. 5. Let’s start at the beginning The Internet
  6. 6. Tools
  7. 7. Bird’s 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!
  8. 8. Text Editor / IDE (integrated development environment)
  9. 9. SFTP (secure)File Transfer Protocol move/copy files to web server Also SSH
  10. 10. Local MAMP, WAMP, XAMP, AMPPS
  11. 11. VVV Varying Vagrant Vagrants Local Local by Flywheel Docker
  12. 12. HTML What is HTML? Resources: ● W3 ● HTML5 For Designers ● How to Code in HTML ● MDN: Learning Web Development ● Khan: HTML ● Codecademy: HTML ● HTML5 Cheatsheet
  13. 13. HTML - The Source
  14. 14. HTML - In Browser
  15. 15. <video> <canvas> <article> <header> <section> <main> <footer> <audio>
  16. 16. 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
  17. 17. A CSS rule
  18. 18. CSS Specificity
  19. 19. 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>
  20. 20. HTML - In Browser
  21. 21. CSS
  22. 22. CSS
  23. 23. The Box Model box-sizing: content-box (default) box-sizing: border-box;
  24. 24. CSS3 background-size: border-radius: grid: border-box: flexbox: rgba(); transition: perspective: transform:
  25. 25. RWD - Responsive (Web) Design
  26. 26. Responsive Web Design is accomplished with CSS statements called Media Queries in your stylesheets.css
  27. 27. CSS Grids
  28. 28. Bootstrap http://getbootstrap.com/
  29. 29. Foundation http://foundation.zurb.com/
  30. 30. PHP: PHP Hypertext Preprocessor What is PHP and how?
  31. 31. PHP
  32. 32. PHP
  33. 33. PHP
  34. 34. SASS
  35. 35. CSS Preprocessors SASS LESS Tedious tasks, let’s let the computer do it for us...
  36. 36. CodeKit
  37. 37. Grunt vs Gulp
  38. 38. javascript
  39. 39. 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.
  40. 40. Beyond jQuery
  41. 41. WordPress is used by 58.9% of websites with a CMS. This is 28% of all websites. -W3Techs (as of May 23 2017)
  42. 42. WordPress Theme Editor
  43. 43. Child Theme
  44. 44. 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
  45. 45. Child Theme
  46. 46. 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
  47. 47. Child Theme - style.css
  48. 48. Child Theme - functions.php
  49. 49. 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?
  50. 50. 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?
  51. 51. Template Hierarchy
  52. 52. The Loop
  53. 53. 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.
  54. 54. The Loop Note: there are php methods or Template Tags that we “must be within The Loop” in order to use them.
  55. 55. 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.
  56. 56. 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?
  57. 57. Customizing The Customizer Custom Post Types Custom Fields
  58. 58. The Customizer
  59. 59. 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.
  60. 60. Custom Fields When a big WYSIWYG editor won’t work.
  61. 61. Native Custom Fields Advanced Custom Fields
  62. 62. git & svn are version control systems (vcs) Like the undo button or history pane in photoshop.
  63. 63. WordPress core development and plugin repo uses SVN. There’s also a WordPress mirror on github.
  64. 64. github.com
  65. 65. github app
  66. 66. sourcetree
  67. 67. 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.
  68. 68. 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.
  69. 69. WP REST API
  70. 70. 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).
  71. 71. Multisite
  72. 72. WP-CLI
  73. 73. #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
  74. 74. 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
  75. 75. Waterfall Methodology
  76. 76. Slack Sign up for the WordPress slack team
  77. 77. Tools & Helpers Local by Flywheel
  78. 78. Tools & Helpers CodeKit
  79. 79. Tools & Helpers Advanced Custom Fields Pro
  80. 80. Tools & Helpers Migrate DB Pro
  81. 81. Code 101
  82. 82. 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!
  83. 83. 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
  84. 84. Bird’s 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!
  85. 85. Thank You! Any Questions? Slides available at https://circlecube.com/does-wordpress/
  • TracyGibson16

    Aug. 4, 2017
  • GaryBeasley

    Jun. 20, 2017
  • JoyannaHirst

    Jun. 5, 2017

WP Dev/tools for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the loop, inspect element, 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. Takeaways: Learn to speak dev Get familiar with concepts (and acronyms) you’ll need to dev Learn about tools that will help you

Views

Total views

1,159

On Slideshare

0

From embeds

0

Number of embeds

11

Actions

Downloads

4

Shares

0

Comments

0

Likes

3

×