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
71
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
Git Lint
bkuhlmann
4
750
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
120
雑に思考を整理する技術と効能
konifar
58
29k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
120
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
260
Elm 0.19.0 Changes
bkuhlmann
0
490
Git Rebase
bkuhlmann
11
1.6k
2 週間で Twitter Bot を作ってみた
contour_gara
0
330
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Ruby Pattern Matching
bkuhlmann
0
920
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Visualization
eitanlees
136
14k
Clear Off the Table
cherdarchuk
84
310k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
The Invisible Customer
myddelton
114
12k
Raft: Consensus for Rubyists
vanstee
132
6.3k
We Have a Design System, Now What?
morganepeng
43
6.7k
Practical Orchestrator
shlominoach
182
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
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