Hallå Norrköping!
slides.com/lanche86/wcnkpg
slides.com/lanche86/wcnkpg/live
Title Text
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
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!
WordCamp Norrkoping 2015
By Milan Ivanović
WordCamp Norrkoping 2015
My talk will be on developing WordPress themes using Sage WordPress starter theme based on HTML5 Boilerplate, gulp, Bower, and Bootstrap. I will go through the theme development process, then I will be guiding the audience through starter themes and reach Roots Sage project and present how to develop / test / finish theme development process.
