Hallå Norrköping!

slides.com/lanche86/wcnkpg

slides.com/lanche86/wcnkpg/live

Title Text

roots.io / @rootswp

Roots helps you build better WordPress sites faster.

Creating New WP Theme

- the old fashioned way - 

  • navigate to wp-content/themes folder
  • create a new folder
  • create index.php
  • create style.css
  • .
  • .
  • .
  • start developing

_s

underscores.me

WP-SCSS

wp.org/plugins/wp-scss

Sage

WordPress starter theme

gulp, Bower, Bootstrap

Bedrock

WordPress project boilerpale

Composer, dotenv

Trellis

WordPress LEMP stack

Vagrant, Ansible, Nginx, PHP 5.6, HHVM

Why use starter theme?

...because Zlatan does.

What is Sage?

It's starter theme not a theme framework

Why Sage?

Professionally maintained. 6k+ Github stars.

Why Sage?

Perfect amount of boilerplate.

Don't want Bootstrap? Quickly remove it.

Why Sage?

A modern build process, one of them image optimisation.

Starting a project

Requirements

  • WordPress (latest version)
  • PHP >= 5.4.x
  • Git
  • Node.js 0.12.x

wp-config.php

define('WP_ENV', 'development');

git clone https://github.com/roots/sage.git theme-name
npm install

 installs all modules that are listed on package.json file and their dependencies

bower install

 installs all packages that are listed on bower.json file and their dependencies

gulp

Compile and optimize the files in your assets directory

gulp --production

Compile assets for production (no source maps)

gulp watch

 Compile assets when file changes are made

gulp watch and BrowserSync

assets/manifest.json

"config": {
  "devUrl": "http://project-name.dev"
}

"config": {
  "devUrl": "http://localhost:8888/project-name/"
}

Theme files

assets/

    fonts/

    images/

    scripts/

    styles/

    manifest.json

lang/

    sage.pot

lib/

    assets.php

    conditional-tag-check.php

    config.php

    extras.php

    init.php

    titles.php

    utils.php

    wrapper.php

templates/

    content.php

    head.php

    header.php

    footer.php

    sidebar.php

    .

    .

    .

DRY

Don't Repeat Yourself

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

WET

Write Everything Twice

Most WordPress themes are WET

CRY

Continously Repeating Yourself

Hope you are smarter than that.

Theme Templates

base.php

Doesn't escape WordPress Template Hierarchy. Keeping everything DRY

base-*.php

This still works. 

base-<template name>.php

Extending templates

Static front page?

Copy page.php to front-page.php

About page?

Copy page.php to page-about.php

Gallery CPT?

Copy index.php to single-gallery.php

Keep functionality outside of the theme 

Sage docs

Sage Ebook

Roots Podcast

roots.io / @rootswp

Devana Technologies

ManageWP

WordPress Serbia

One of the founders

WordCamp Belgrade

Organiser

WordPress Academy

Lecturer

Theme Review Team

Proud member

WordPress

Enthusiast

Sweden

  • Zlatan Ibrahimović

  • ABBA

  • Good movies

Milan Ivanović

hi@mi.rs

@lanche86

Milan Ivanović

hi@mi.rs

@lanche86

Questions?

Tack så mycket Norrköping!

Made with Slides.com