SlideShare a Scribd company logo
Thoughtful theming A talk on design, and efficient theme development for WordPress
Who am I?	 Just a guy Started on blogger, adopted b2, moved to WP Built a successful side-business doing custom design http://onefinejay.com
How did this talk start? Talking with a friend with common interests about aspects of design Started as a 5-min presentation at a local WP-related meetup Discussed conditional logic for faster theme development This talk is more about design than anything else.
Today’s Questions What is design? What is good design? What are the areas of design in WordPress? What is a theme? Why roll your own theme? How can you make your theme development experience better? When should you use what?
What is design? Design is a tool; it is a means to an end Design is thoughtful and thorough development of a solution to a problem We experience design everywhere Poor design leads to bad experiences Great design can be invisible. “It just works.”
Poor design You feel its effects, immediately or otherwise Consequences can lead to lost business or worse, lost lives Inability to forecast unintended possibilities Inability to step into the shoes of target market Lack of passion due to undercutting oneself
Quality Triangle: “Pick two.” Product dev’t: cheap, fast, high quality Spouse: intelligent, good looking, sane Design is what you do when you refuse to accept that you can only pick two.
What is “good design?” Industrial design  tangible area of design Dieter Rams and the 10 principles of good design Studied architecture and carpentry Worked in architecture then for Braun as chief of design Weniger, aberbesser. Less, but better. Jonathan Ive Inspired by Rams VP of design at Apple, Inc.
Rams & Ive, side by side Gizmodo, et.al. compared products
Rams’ Ten Principles of Good Design Innovative Makes a product useful Aesthetic Makes a product understandable Unobtrusive Honest Long-lasting Thorough down to the last detail Environmentally friendly As little design as possible
Areas of Design in WP Database design Changes with every major release Drive for efficiency Admin UI design Well-designed plugin user interfaces are consistent with WP’s own admin UI Theme design/development Most common area High visibility Most competitive marketplace
What makes a theme? Short history of WP themes Style.css + my-hacks.php Theme directories  Index.php Style.css Rise of premium, freemium, or do-it-all frameworks Entire applications built on top of WordPress
Great expectations The highly competitive market of themes has raised expectations Clients look for deliverables that are built into themes or require plugins (paid/freemium) Frameworks make for rapid deployment  IF you know how
Are drop-in themes crutches? Matter of opinion Subject of a SxSW Panel, in terms of WordPress itself Depends on whether you treat it that way Do you find yourself shoehorning your work into a theme framework? Do you find yourself repeating a wireframe for rapid deployment? That’s okay. I’m guilty of that, too, but remember: you may not grow as a designer if you keep doing this.
Why roll your own theme? You gain an understanding of the medium You know it like the back of your hand No drop-in, freemium, premium, superdupermegacomplete framework can predict a need you might encounter Sometimes you need a scalpel and all you have is a Swiss knife without one, or worse, a chainsaw. The potential for discovery has not been exhausted.
When not to roll a theme Client won’t pay the right price for custom work Don’t waste your time with unpaid work Needs are met with a drop-in theme “Just want to write.” Twenty-Ten might just work for this, just as Default/Kubrick worked as well
Persistence of design Some blogs have never changed design since 2003, yet they have plenty of traffic A known and familiar interface for readers Primitive by today’s standards “Still works for them” The goal is to be read, and that goal is met
Balancing futureproofing and creativity A growing trend is to produce child themes Applies to all paid frameworks Encouraged for the new theme Majority of themes between then and now are modified versions of Kubrick/Default Evidenced in conditional output when viewing archive and single pages Material benefit: you get all the goodies and features while keeping your customizations after a core update
Drawbacks to child-theming Child themes tend to be palette and image swaps Same song, different day Working with someone else’s code, keeping up with a growing list of CSS classes/IDs, and custom functions (Yes, I understand you have to start from somewhere)
Having a good time theming Learn WordPress like the back of your hand Understand the core functions and play, play, play! If you learn something when playing during “idle time,” you did not waste any of that time at all Read up on resources that discuss principles of design (color, proportion, line, space, etc) Follow a 101-level theme development tutorial Choose a framework, or make your own You don’t have to share if you don’t want to.
Enough “ranting” let me teach you something Conditional logic is the coolest thing in the world and it will make your life easier if you exercise discretion. Practice makes good. Sometimes the only difference between index.php and page.php are a few lines.  So just use a few conditionals specific to page.php and save yourself yet another file to edit or sift through You can combine conditionals!
Know your car; know your theme When you ride with someone and they take a parking spot in one turn, or surprise you with a remarkably tight parallel park, how do you feel? Your friend driving that car knows his car. Using conditional logic, you can cut down on the number of theme files you have to worry about.  It’s like driving a smaller car. Not really.
A few examples Some screenshots from the code editor on the theme I privately developed.
I’m lacking files! No: Page.php Archive.php Author.php Category.php And then some Fewer files to edit
Modular CSS loading Why load CSS rules for comments on every page?  Also has some CSS for a custom page
Prevent a page fromlinking to itself Mostly overlooked, but it’s a nice thing to do Yes, people are used to this happening, so when they come across something that reminds them you thought about them, they might just feel a little better.
A word about content Designing for the web requires content. Play with wireframe sketches, layout and Lipsum all you want; your design won’t come to life without content. Identify the aims to every project: why does someone even want an online presence? To have a voice? To win an election? To sell ads and make money?
Quick recap Design is a tool, a means to an end Ten principles of good design by Dieter Rams No one theme or framework works for all possible projects Rolling your own theme is not a bad idea Use conditionals to cut down on inefficiencies and maintenance efforts Learn to see your project from your client and their target audience’s eyes Content might not be king, but it’s not dead

More Related Content

What's hot

Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
Kathy Gill
 
Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018
Matt Algie
 
OrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & TricksOrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & Tricks
Valarie Martin Stuart
 
Setting up and maintaining a website
Setting up and maintaining a websiteSetting up and maintaining a website
Setting up and maintaining a website
John Espirian
 
Create Great User Documents for Word Press
Create Great User Documents for Word PressCreate Great User Documents for Word Press
Create Great User Documents for Word Press
Gloria Antonelli
 
Successful Website Design
Successful Website DesignSuccessful Website Design
Successful Website Design
Becky Davis
 
Improving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationImproving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support Documentation
Gloria Antonelli
 
Road Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPressRoad Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPress
Gloria Antonelli
 
Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website? Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website?
Jennifer Novak
 
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
Chris Young
 
Something from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is ShortSomething from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is Short
kenwtw
 
Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021
Graham Armfield
 
Take Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPressTake Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPressBecky Davis
 
So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...
Graham Armfield
 
Visual resourcing guide
Visual resourcing guideVisual resourcing guide
Visual resourcing guide
NetSquared Vancouver
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
Bootstrap Creative
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT Foundation
Tonya Thomas
 
Writing for-web-update
Writing for-web-updateWriting for-web-update
Writing for-web-update
Lisa DuBois Low
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designers
Erlend Debast
 

What's hot (20)

Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 
Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018Design Portfolio Bootcamp - Summer of Tech 2018
Design Portfolio Bootcamp - Summer of Tech 2018
 
OrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & TricksOrgSync Connect 2014: Design Tips & Tricks
OrgSync Connect 2014: Design Tips & Tricks
 
Setting up and maintaining a website
Setting up and maintaining a websiteSetting up and maintaining a website
Setting up and maintaining a website
 
Create Great User Documents for Word Press
Create Great User Documents for Word PressCreate Great User Documents for Word Press
Create Great User Documents for Word Press
 
Successful Website Design
Successful Website DesignSuccessful Website Design
Successful Website Design
 
Improving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support DocumentationImproving WordPress Themes & Plugins Support Documentation
Improving WordPress Themes & Plugins Support Documentation
 
Road Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPressRoad Map to great User Documentation for WordPress
Road Map to great User Documentation for WordPress
 
Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website? Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website?
 
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
DIY 'No-Coding' Theme Building - WordCamp Auckland 2014
 
Something from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is ShortSomething from Nothing: Simple Ways to Look Sharp When Time is Short
Something from Nothing: Simple Ways to Look Sharp When Time is Short
 
Q6
Q6Q6
Q6
 
Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021Useful Accessibility Tools Version 3 - Jul 2021
Useful Accessibility Tools Version 3 - Jul 2021
 
Take Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPressTake Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPress
 
So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...So how do i know if my wordpress website is accessible - WordPress Accessibil...
So how do i know if my wordpress website is accessible - WordPress Accessibil...
 
Visual resourcing guide
Visual resourcing guideVisual resourcing guide
Visual resourcing guide
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT Foundation
 
Writing for-web-update
Writing for-web-updateWriting for-web-update
Writing for-web-update
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designers
 

Viewers also liked

Odc setup
Odc setupOdc setup
Sichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMMSichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMM
OPTIMAbit GmbH
 
The Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through OffshoringThe Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through Offshoring
coMakeIT
 
Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831Daniel Palm
 
Offshoring in morocco
Offshoring in moroccoOffshoring in morocco
Offshoring in moroccoSara FARJANI
 
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring AgileAgile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Tunisia Scrum User Group
 
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software OutsourcingGIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme GmbH
 
Offshoring
Offshoring Offshoring
Offshoring
Abhinav Singh
 
Outsourcing & Offshoring
Outsourcing & OffshoringOutsourcing & Offshoring
Outsourcing & Offshoring
Arun Khedwal
 

Viewers also liked (9)

Odc setup
Odc setupOdc setup
Odc setup
 
Sichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMMSichere Webanwendungen mit OpenSAMM
Sichere Webanwendungen mit OpenSAMM
 
The Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through OffshoringThe Ultimate Guide to Quality Software Through Offshoring
The Ultimate Guide to Quality Software Through Offshoring
 
Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831Offshoring frukostseminarium 20110831
Offshoring frukostseminarium 20110831
 
Offshoring in morocco
Offshoring in moroccoOffshoring in morocco
Offshoring in morocco
 
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring AgileAgile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
Agile Day Tunisia - ScrumShore 2.0 For Playful Offshoring Agile
 
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software OutsourcingGIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
GIMIK Systeme - App Entwicklung, Softwareentwicklung, Software Outsourcing
 
Offshoring
Offshoring Offshoring
Offshoring
 
Outsourcing & Offshoring
Outsourcing & OffshoringOutsourcing & Offshoring
Outsourcing & Offshoring
 

Similar to Thoughtful theming

Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design
Cammy Bean
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative
 
Designing for WordPress
Designing for WordPressDesigning for WordPress
Designing for WordPress
Tammy Hart
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
Neil Perlin
 
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)
Thinkful
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A Theme
Nicky Pink
 
Single sourcing to the max
Single sourcing to the maxSingle sourcing to the max
Single sourcing to the max
Neil Perlin
 
Design for the Web
Design for the WebDesign for the Web
Design for the Web
Astek Consulting
 
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress ThemesUltimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
SKT Themes
 
7 crazy tips that will help you
7 crazy tips that will help you7 crazy tips that will help you
7 crazy tips that will help youJessica Wilson
 
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Brett Bumeter
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themesChris Olbekson
 
Designing (Deciding) in the Browser
Designing (Deciding) in the BrowserDesigning (Deciding) in the Browser
Designing (Deciding) in the Browser
Sang-Min Yoon
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
Russ Weakley
 
Css tools and methodologies
Css tools and methodologiesCss tools and methodologies
Css tools and methodologies
Isatu Conteh
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Holger Bartel
 
Top 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdfTop 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdf
mukeshjoshi245144
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
elmorandall
 
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzidenu Dzakuma
 

Similar to Thoughtful theming (20)

Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design
 
Best web design
Best web designBest web design
Best web design
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
Designing for WordPress
Designing for WordPressDesigning for WordPress
Designing for WordPress
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A Theme
 
Single sourcing to the max
Single sourcing to the maxSingle sourcing to the max
Single sourcing to the max
 
Design for the Web
Design for the WebDesign for the Web
Design for the Web
 
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress ThemesUltimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
 
7 crazy tips that will help you
7 crazy tips that will help you7 crazy tips that will help you
7 crazy tips that will help you
 
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
Designing (Deciding) in the Browser
Designing (Deciding) in the BrowserDesigning (Deciding) in the Browser
Designing (Deciding) in the Browser
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Css tools and methodologies
Css tools and methodologiesCss tools and methodologies
Css tools and methodologies
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 
Top 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdfTop 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdf
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
 
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
 

More from onefinejay

Wc miami 2013 designing for development
Wc miami 2013 designing for developmentWc miami 2013 designing for development
Wc miami 2013 designing for developmentonefinejay
 
Wc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshopWc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshoponefinejay
 
Building a career with WordPress
Building a career with WordPressBuilding a career with WordPress
Building a career with WordPressonefinejay
 
Wc philly 2012 presentation
Wc philly 2012 presentationWc philly 2012 presentation
Wc philly 2012 presentation
onefinejay
 
Converting a Layout to a WordPress theme
Converting a Layout to a WordPress themeConverting a Layout to a WordPress theme
Converting a Layout to a WordPress theme
onefinejay
 
Bridging the designer devloper gap
Bridging the designer devloper gapBridging the designer devloper gap
Bridging the designer devloper gap
onefinejay
 

More from onefinejay (6)

Wc miami 2013 designing for development
Wc miami 2013 designing for developmentWc miami 2013 designing for development
Wc miami 2013 designing for development
 
Wc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshopWc miami 2013 beginner's workshop
Wc miami 2013 beginner's workshop
 
Building a career with WordPress
Building a career with WordPressBuilding a career with WordPress
Building a career with WordPress
 
Wc philly 2012 presentation
Wc philly 2012 presentationWc philly 2012 presentation
Wc philly 2012 presentation
 
Converting a Layout to a WordPress theme
Converting a Layout to a WordPress themeConverting a Layout to a WordPress theme
Converting a Layout to a WordPress theme
 
Bridging the designer devloper gap
Bridging the designer devloper gapBridging the designer devloper gap
Bridging the designer devloper gap
 

Recently uploaded

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 

Thoughtful theming

  • 1. Thoughtful theming A talk on design, and efficient theme development for WordPress
  • 2. Who am I? Just a guy Started on blogger, adopted b2, moved to WP Built a successful side-business doing custom design http://onefinejay.com
  • 3. How did this talk start? Talking with a friend with common interests about aspects of design Started as a 5-min presentation at a local WP-related meetup Discussed conditional logic for faster theme development This talk is more about design than anything else.
  • 4. Today’s Questions What is design? What is good design? What are the areas of design in WordPress? What is a theme? Why roll your own theme? How can you make your theme development experience better? When should you use what?
  • 5. What is design? Design is a tool; it is a means to an end Design is thoughtful and thorough development of a solution to a problem We experience design everywhere Poor design leads to bad experiences Great design can be invisible. “It just works.”
  • 6. Poor design You feel its effects, immediately or otherwise Consequences can lead to lost business or worse, lost lives Inability to forecast unintended possibilities Inability to step into the shoes of target market Lack of passion due to undercutting oneself
  • 7. Quality Triangle: “Pick two.” Product dev’t: cheap, fast, high quality Spouse: intelligent, good looking, sane Design is what you do when you refuse to accept that you can only pick two.
  • 8. What is “good design?” Industrial design  tangible area of design Dieter Rams and the 10 principles of good design Studied architecture and carpentry Worked in architecture then for Braun as chief of design Weniger, aberbesser. Less, but better. Jonathan Ive Inspired by Rams VP of design at Apple, Inc.
  • 9. Rams & Ive, side by side Gizmodo, et.al. compared products
  • 10. Rams’ Ten Principles of Good Design Innovative Makes a product useful Aesthetic Makes a product understandable Unobtrusive Honest Long-lasting Thorough down to the last detail Environmentally friendly As little design as possible
  • 11. Areas of Design in WP Database design Changes with every major release Drive for efficiency Admin UI design Well-designed plugin user interfaces are consistent with WP’s own admin UI Theme design/development Most common area High visibility Most competitive marketplace
  • 12. What makes a theme? Short history of WP themes Style.css + my-hacks.php Theme directories Index.php Style.css Rise of premium, freemium, or do-it-all frameworks Entire applications built on top of WordPress
  • 13. Great expectations The highly competitive market of themes has raised expectations Clients look for deliverables that are built into themes or require plugins (paid/freemium) Frameworks make for rapid deployment  IF you know how
  • 14. Are drop-in themes crutches? Matter of opinion Subject of a SxSW Panel, in terms of WordPress itself Depends on whether you treat it that way Do you find yourself shoehorning your work into a theme framework? Do you find yourself repeating a wireframe for rapid deployment? That’s okay. I’m guilty of that, too, but remember: you may not grow as a designer if you keep doing this.
  • 15. Why roll your own theme? You gain an understanding of the medium You know it like the back of your hand No drop-in, freemium, premium, superdupermegacomplete framework can predict a need you might encounter Sometimes you need a scalpel and all you have is a Swiss knife without one, or worse, a chainsaw. The potential for discovery has not been exhausted.
  • 16. When not to roll a theme Client won’t pay the right price for custom work Don’t waste your time with unpaid work Needs are met with a drop-in theme “Just want to write.” Twenty-Ten might just work for this, just as Default/Kubrick worked as well
  • 17. Persistence of design Some blogs have never changed design since 2003, yet they have plenty of traffic A known and familiar interface for readers Primitive by today’s standards “Still works for them” The goal is to be read, and that goal is met
  • 18. Balancing futureproofing and creativity A growing trend is to produce child themes Applies to all paid frameworks Encouraged for the new theme Majority of themes between then and now are modified versions of Kubrick/Default Evidenced in conditional output when viewing archive and single pages Material benefit: you get all the goodies and features while keeping your customizations after a core update
  • 19. Drawbacks to child-theming Child themes tend to be palette and image swaps Same song, different day Working with someone else’s code, keeping up with a growing list of CSS classes/IDs, and custom functions (Yes, I understand you have to start from somewhere)
  • 20. Having a good time theming Learn WordPress like the back of your hand Understand the core functions and play, play, play! If you learn something when playing during “idle time,” you did not waste any of that time at all Read up on resources that discuss principles of design (color, proportion, line, space, etc) Follow a 101-level theme development tutorial Choose a framework, or make your own You don’t have to share if you don’t want to.
  • 21. Enough “ranting” let me teach you something Conditional logic is the coolest thing in the world and it will make your life easier if you exercise discretion. Practice makes good. Sometimes the only difference between index.php and page.php are a few lines. So just use a few conditionals specific to page.php and save yourself yet another file to edit or sift through You can combine conditionals!
  • 22. Know your car; know your theme When you ride with someone and they take a parking spot in one turn, or surprise you with a remarkably tight parallel park, how do you feel? Your friend driving that car knows his car. Using conditional logic, you can cut down on the number of theme files you have to worry about. It’s like driving a smaller car. Not really.
  • 23. A few examples Some screenshots from the code editor on the theme I privately developed.
  • 24. I’m lacking files! No: Page.php Archive.php Author.php Category.php And then some Fewer files to edit
  • 25. Modular CSS loading Why load CSS rules for comments on every page? Also has some CSS for a custom page
  • 26. Prevent a page fromlinking to itself Mostly overlooked, but it’s a nice thing to do Yes, people are used to this happening, so when they come across something that reminds them you thought about them, they might just feel a little better.
  • 27. A word about content Designing for the web requires content. Play with wireframe sketches, layout and Lipsum all you want; your design won’t come to life without content. Identify the aims to every project: why does someone even want an online presence? To have a voice? To win an election? To sell ads and make money?
  • 28. Quick recap Design is a tool, a means to an end Ten principles of good design by Dieter Rams No one theme or framework works for all possible projects Rolling your own theme is not a bad idea Use conditionals to cut down on inefficiencies and maintenance efforts Learn to see your project from your client and their target audience’s eyes Content might not be king, but it’s not dead