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
100
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
TDD 実践ミニトーク
contour_gara
1
290
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
Namespace and Its Future
tagomoris
6
700
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
21
5.6k
AIコーディングAgentとの向き合い方
eycjur
0
270
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
830
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
22
11k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
140
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Navigating Team Friction
lara
189
15k
YesSQL, Process and Tooling at Scale
rocio
173
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
55k
A better future with KSS
kneath
239
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
How to train your dragon (web standard)
notwaldorf
96
6.2k
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