Intro to Custom
Theming with _s
Heather Acton
@heatheracton
Slide 2
Slide 2 text
Obligatory Intro to Me
• WP dev since 2008
• Organized WCCHI in 2011 and 2012
• Founded the WPLC meetup
• Love my kiddos, craft beer, and live
music
Slide 3
Slide 3 text
What is _s?
• Starter theme for WordPress
• By Automattic’s WordPress.com
theme team
Slide 4
Slide 4 text
Why Start with _s?
Code should be:
• Small
• Fast
• Secure
• Maintainable
Slide 5
Slide 5 text
Why Start with _s?
Because most commercial themes
and frameworks suck.
And you can do better. You really can.
Slide 6
Slide 6 text
Now That You’re a Believer
Prereqs
• Decent understanding of WP theme structure
• Decent understanding of WordPress as a CMS
• Solid HTML & CSS knowledge (inc Inspector usage)
• Can “read” PHP and know syntax
• Local development experience highly preferred
• Basic Photoshop skills
• Be a really really good Googler
Slide 7
Slide 7 text
Let’s Roll
Go to _s and generate your theme
Slide 8
Slide 8 text
What’s In the Box
• Stylesheet with resets and other basic rules
• Header/footer templates
• Standard page template
• Blog-related templates
• Search & 404 templates
• Little JS
• inc directory
Further reading: Theme Anatomy Visual
Slide 9
Slide 9 text
Let’s Have Some Fun
With Styles
Slide 10
Slide 10 text
Contain & Center
Add to style.css
!
#page {
max-width: 960px;
margin: 0 auto;
}
Slide 11
Slide 11 text
Content/sidebar layout
Enqueue the provided stylesheet in
functions.php within function
yourthemename_scripts()
wp_enqueue_style (
'wcchi-cs-style',
get_template_directory_uri() . ‘/layouts/content-sidebar.css’
);
Slide 12
Slide 12 text
Custom Background
• Theme enabled
• Appearance—>Background
• Choose color or image
• Set a #page background in
style.css
Slide 13
Slide 13 text
PSD as Your Guide
• Use ruler to measure and set widths
• Use color picker to get hex or rgb codes
• Use text tool to get font sizes, families,
colors, weights, and styles
• Crop out & trim imagery. Add canvas size
as needed. Turn off unnecessary layers to
make this cleaner.
Slide 14
Slide 14 text
Kick It Up a Notch
With Advanced
Techniques
Slide 15
Slide 15 text
Page Templates
• Duplicate page.php and rename to home.php
• Change first line to include template name
• Change content template it pulls from
• Duplicate content.php & rename to content-home.php
• Set appropriate page to use Home template now
available in template dropdown
• Settings—>Reading set front page displays to your
desired static page
Slide 16
Slide 16 text
Custom Post Types,
Taxonomies, and Queries
Read more:
http://codex.wordpress.org/Post_Types
http://codex.wordpress.org/Taxonomies
http://codex.wordpress.org/Class_Reference/
WP_Query
Slide 17
Slide 17 text
Including Add’l Styles
Keep your head clean.
Use:
wp_enqueue_style
Slide 18
Slide 18 text
Including JS / jQuery
Keep your head clean.
Use:
wp_enqueue_script
Slide 19
Slide 19 text
Following Standards &
Avoiding Pitfalls
Slide 20
Slide 20 text
Don’t Be a Noob
• Style all typography
• h1, h2, h3, p, ul, ol, li, etc.
• Structure and style all template
types
• search.php & 404.php
Further Reading / Exercise: Theme Unit Testing
Slide 21
Slide 21 text
Other Tips
• Enable post thumbnails in functions.php
(uncomment)
• Move basic styles to a css directory and
enqueue in functions.php
• Create an img directory
• Include modernizr.js
• Disable post formats (delete in functions.php)
Slide 22
Slide 22 text
Required Reading
Codex: Theme Development
!
WordPress Theme Tutorial by
ThemeShaper
Slide 23
Slide 23 text
Helpful Plugins
• Developer
• Quick installation of many helpful
developer plugins
• What the File