The Secret to 20% of the top 10 million websites


(It's not a big secret, you know what this presentation is about)


It's Wordpress!






But why?


I'm Kalen


  • Web designer/developer since ~2010
  • Using Wordpress the whole time
  • Works at Jacob Tyler

  • Site: http://kalenjohnson.com
  • Twitter: @Kalenjohnson
  • IRC: kalenj
  • Email: info@kalenjohnson.com

Wordpress

Really? Why?

"Wordpress is horrible, dude" - CAMDesigns

"Wordpress is full of spaghetti code" - Anonymous

"Wordpress is only for blogs" - most developers

"Don't use Worpress" - even more developers

Are the complaints legit?

Well, yes, many complaints are legitimate.

Proof:

  • Old codebase - come a long way, but a long way to go
      • Some OO, but not originally
  • Not MVC by design, not much chance of that
  • So popular, and relatively easy to use
      • Attracts new developers - and bad code
  • Public plugins and themes pass QC (meaning: don't spam)
      • Need to test, and read comments
      • Incompatibility with new versions of WP
  • Originally built as a blog platform

So why is it so popular?

Because most people aren't dev's (just being honest).
But Wordpress has come a long way.
Can you use it for more than a blog?

Wordpress as a CMS


Custom Post Types

Create new sections other than blog posts.
Portfolio projects, Testimonials, Reviews, etc.

Custom Taxonomies

Dumb word, but has a lot of meaning.
Categories, tags, or... Countries, Types, Ideas....
Really, anything used to sort or categorize post types.

Custom Fields

Possibly the most powerful feature.
Create custom anything, used in any way. Really.

Custom post types and taxonomies only need to be

declared with one function and some arrays.


Custom fields can be configured from within Wordpress,
but need to be set up in the theme to be displayed correctly.
I to use a plugin called "Advanced Custom Fields".

What can Custom Fields do?


Developing for Wordpress with
Modern Web Development techniques


How can we modernize Wordpress development?

Implement modern skills (Model and View like themes)
Keep logic separate from HTML

Grunt.js and Node.js to run tasks like:
CSS Preprocessors, Linting, concatenation, minification,
cache busting, img sprites, img optimization, live reload, more.

Composer, Capistrano, CLI, it's all possible.

SASS or Less

CSS Pre-processors are awesum!
Save time - keep files organized - be a cool kid

Grunt and Node

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.
NPM - node package manager used by Grunt

Grunt - The Javascript task runner

SASS or LESS - CSS Pre-processor. No need to install separately
JS Linting - check code so that there are no errors
Concatenation, Minification, Uglifying - CSS and JS that load fast
LiveReload + File Watching - Edit a file, save it, see results in browser
CSS Sprites - even in LESS

Gruntfile.js

Grunt Watch


Roots Theme

Wordpress starter theme:
Twitter Bootstrap by default.
Incorporates Grunt + LESS, LiveReload, JSHinting, CSS Sourcemaps,
JS and CSS Minification + Concatenation

Modern dev techniques: Git, theme wrapper,
PHP Classes, and Grunt.js

I owe a lot to these individuals:

Ben Word (@retlehs) - Creator of Roots Theme
Scott Walkinshaw (@swalkinshaw) - Contributor to Roots
Screencasts: Use Grunt, and Composer with Wordpress

Composer

Composer can be used to set up Wordpress, plugins, and your theme.
Default Wordpress folders can be changed, to be more "app" like.

wp-config can be moved above root www folder
(This only works if Wordpress is intalled in root,
or else wp-config.php content like DB name, user,
and PW must link to another file in folder above www root)

Most things can be loaded by Git:
https://github.com/wordpress/wordpress (updated every 15 mins)
http://wpackagist.org/ (Composer mirror of WP plugins)

Help using WP and Composer: http://composer.rarst.net/

Wordpress + Composer

Just like this:

wpackagist.org

It's magic

Vagrant


Forget about WAMP, MAMP, XAMPP, everything but LAMP (or LEMP)

Nearly automatic virtualization of server environment.

WAMP/MAMP can have issues particular to the app
Virtual machine can match nearly exactly server environment


WP-CLI




Capistrano


Here are some links:


Video Walkthrough:




There's more!


Not really.

Questions?

Sdphp-Wp

By Kalen Johnson