WordCamp Orlando 2016 - So you wanna dev? Join the Team!

So You Wanna Dev?Join the Team!

WordCamp Orlando 2016 - 8 October 2016

IntroductionsEvan Mullins

Lead Web Developer

Brown Bag Marketing

@circlecube

circlecube.com

WordPress user since 2006

Full-time web developer since 2007

Internet

Throughout these slides almost everything is linked to related

content or sources.

Gotta click ‘em all!

The Internet

Tools

sFTP (secure)File Transfer Protocolmove/copy files to web server

Text Editor & IDE

HTMLWhat is HTML?

Resources:

● W3

● HTML5 For Designers

● How to Code in HTML

● MDN: Learning Web Development

● Khan: HTML

● Codecademy: HTML

● HTML5 Cheatsheet

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>

HTML - In Browser

<video> <canvas>

<article> <header>

<section> <main>

<footer> <audio>

CSSWhat 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

A CSS rule

CSS Specificity

The Box Model

CSSh1, h2, h3, h4, h5 {

font-size: 26px;

font-weight: 100;

text-transform: uppercase;

margin: 30px 0;

}

.noBottom {

margin-bottom: 0px;

}

.noTop {

margin-top: 0px;

}

h3 {

text-transform: none;

font-family: "somefont";

}

.content {

width: 1024px;

max-width: 100%;

margin: 0 auto;

text-align: center;

}

CSS

CSS3background-size:

border-radius:

border-box:

flexbox: rgba();

transition:

perspective:

transform:

PHPWhat is PHP and how?

PHP<div id="home">

<div class="content">

<article>

<h2 class="noBottom"><?php the_field('headline_1'); ?></h2>

<h3 class="noTop"><?php the_field('subheadline_1'); ?></h3>

<p><?php the_field('body_1'); ?></p>

</article>

<div class="buttons">

<a href="<?php the_field('button_1.1_link'); ?>" class="btn btn-orange"><?php

the_field('button_1.1_text'); ?></a>

<a href="<?php the_field('button_1.2_link'); ?>" class="btn btn-orange"><?php

the_field('button_1.2_text'); ?></a>

</div>

</div>

</div>

PHP<div id="home">

<div class="content">

<article>

<h2 class="noBottom"><?php the_field('headline_1'); ?></h2>

<h3 class="noTop"><?php the_field('subheadline_1'); ?></h3>

<p><?php the_field('body_1'); ?></p>

</article>

<div class="buttons">

<a href="<?php the_field('button_1.1_link'); ?>" class="btn btn-orange"><?php

the_field('button_1.1_text'); ?></a>

<a href="<?php the_field('button_1.2_link'); ?>" class="btn btn-orange"><?php

the_field('button_1.2_text'); ?></a>

</div>

</div>

</div>

PHP

$wisdom: 'wisdomscript';

$raleway: 'ralewayregular';

$white: #ffffff;

$orange: #f15b22;

$orangelight: #fd6c35;

h3 { font-family: $wisdom; }

.btn {

display: inline-block;

color: $white;

font-family: $raleway;

&:hover {

color: $white;

}

&.btn-orange {

background-color: $orange;

&:hover {

background-color: $orangelight;

}

}

}

javascript

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.

Beyond jQuery

WordPress Theme Editor

Child Theme

Child ThemeA 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

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

Child Theme

Child Theme - style.css

Child Theme - functions.php

Simple PHP EditsRearrange 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.

See the Template Hierarchy for details about how WordPress decides what template to use.

HooksHooks 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. Still Lost?

Hooksactions

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.

The Loop

The LoopThe 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.

The Loop

Note: there are php

methods or Template

Tags that we “must be

within The Loop” in

order to use them.

Template HierarchyThe template hierarchy is the system WordPress uses to identify which template file to

use when displaying a given page on a site.

Template Hierarchy

Custom FieldsWhen a big WYSIWYG editor won’t work.

Advanced Custom Fields Plugin: ACFWhen you want powerful options with your custom fields use ACF

Native Custom Fields Advanced Custom Fields

Custom Post TypesWhen 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

Version control

SVN - WordPress core and repositories

Git - everyone elss

git & svn are version control systems (vcs)

github.com

github app

sourcetree

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.

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.

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).

WP REST API

Multisite

WP-CLI

SEOSearch 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

Slack

Responsive Design

CSS Grids

Bootstrap

Waterfall Methodology

DRYDon’t repeat yourself!

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/

Questions

?

Thank You

!

Slides available at https://circlecube.com/does-wordpress/