Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shaping Your Themes with Style
Search
David Sutoyo
March 29, 2015
Programming
0
99
Shaping Your Themes with Style
Presentation at WordCamp San Diego 2015
David Sutoyo
March 29, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
97
34k
PipeCDのプラグイン化で目指すところ
warashi
1
290
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.2k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
型で語るカタ
irof
0
540
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
330
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
790
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
140
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.3k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How GitHub (no longer) Works
holman
314
140k
Designing for Performance
lara
610
69k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
Shaping Your Theme with Style David Sutoyo WordCamp San Diego
2015
None
None
None
None
None
Going Beyond the Options Panel
What’s ahead • How to add your own CSS •
Using Chrome Developer Tools • Twenty Fifteen —> WordCamp Maine website • Resources
Adding Your Own CSS
Edit Theme Styles Directly Good idea for • custom themes
Bad idea for • regularly updated themes (not by you!) • If parent theme, can use a child theme
Plugins Jetpack Slim Jetpack Simple Custom CSS
Adding the Right CSS (what styles go with this element?)
Chrome Developer Tools • Safari and Firefox have their tools
too (IE, sort of). • Open with View > Developer > Developer Tools • Or just use ⌥⌘I, Control-Shift-I on Windows (learn this well)
Browser Testing Online Testing • browserstack.com • Every combination you
can think of • Chrome Extension • Paid • Can be slow at times
Browser Testing Virtual Machine • Modern.ie • Every version of
Internet Explorer • Free • Downloads can be huge • Needs virtualization software (Virtual Box or similar) • Expires
Browser Testing Mobile Testing • Remote debugging with Safari/Chrome •
Inspect elements just like desktop • Can be a pain to set up
Learning CSS
Learn the Basics First Online • Code School, Treehouse, lynda.com
Books • O’Reilly, Sitepoint, A Book Apart Blogs • CSS Tricks, Smashing Magazine
All those Frameworks • Bootstrap • Foundation • Susy •
Pure • Skeleton • The list goes on…
Why Use Frameworks • Up and running quickly • Don’t
need to reinvent the wheel • Tested for different browsers
Why Not Frameworks? • Bloated code • Less control over
your HTML/CSS • Doesn’t necessarily work well with WordPress
Bottom line… • Learn the basics first! • Frameworks aren’t
always the answer • If starting out, just choose one that has good documentation and support
Start Hacking Away • Install WordPress locally • Start playing
with TwentyFifteen or Underscores • Genesis • BootstrapWP, FoundationPress, Hybrid Foundation
Asking Questions • Google • Stack Overflow/Stack Exchange • Local
WordPress meetups
None
http://davidsutoyo.com/wcsd2015 @dsutoyo