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
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.6k
PicoRuby on Rails
makicamel
2
130
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Hack Claude Code with Claude Code
choplin
4
2.1k
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Is Xcode slowly dying out in 2025?
uetyo
1
280
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Embracing the Ebb and Flow
colly
86
4.7k
Producing Creativity
orderedlist
PRO
346
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Code Review Best Practice
trishagee
69
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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