A Designers Approach to Customizing Themes

We are WordPress Customizers
Saturday, April 27, 13

A WordPress Customization Shop
Hi, we’re Travis and Nick and we run

A shop dedicated 100% to WordPress design
and development customizations
@werkpress

Customizing WordPress
1. Diﬀerentiate Yourself
2. Breaking into Customization: Designer to Dev
3. Common Mistakes
4. Resources

Diﬀerentiate Yourself

Research
...to see what everybody else has seen, and think
what nobody else has thought

Find the One Theme

Google is your friend...

Search WordPress Themes...

Search Organic Themes... WooThemes...

Search for something speciﬁc...

Based on your vision for the site, the content
of the site and the discussions you have had
with your client — select your theme.

awesomescreenshot.com
plus

Transformation
(you know, like Transformers)

Get Organized.

Header

Header
Navigation

Header
Navigation
Slider

Header
Navigation
Slider
Body

Header
Navigation
Slider
Body Sidebar

Header
Navigation
Slider
Body Sidebar
Widgets

Header
Navigation
Slider
Body Sidebar
Widgets
Footer

Original Theme
organicthemes.com/theme/non-proﬁt-theme/

Customized Theme

Don’t forget about customizing your other
page templates

Organize for speed.

• Set your guides and grid in Photoshop
• Design all of your graphics and organize your layers
into a folder structure
• Create a consistent approach for all of your work
• Make sure you’re not designing something that you
(or someone else) can not develop

Breaking into Customization:
From Designer to Developer
(the secret to code is...)

Assumptions:
•You are a designer
•You’ve done some minimal HTML and CSS and
have used WordPress
•You want to...

Finding stuﬀ you want to change
...where the heck is that.

Get familiar with the WP template hierarchy.
codex.wordpress.org/Template_Hierarchy

• header.php - Contains everything you want to appear at the top of your site.
• index.php - The core file that loads your theme, also acts as the homepage
(unless you set your blog to display a static page).
• sidebar.php - Contains everything you want to appear in a sidebar.
• footer.php - Contains everything you want to appear at the bottom of your site.
• archive.php - The template file used when viewing categories, dates, posts by
author, etc.
• single.php - The template file that's used when viewing an individual post.

• comments.php - Called at the bottom of the single.php file to enable the
comments section.
• page.php - Similar to single.php, but used for WordPress pages.
• search.php - The template file used to display search results.
• 404.php - The template file that displays when a 404 error occurs.
• functions.php - A file that can be used to configure the WordPress core,
without editing core files.
• style.css - All the styling for your theme goes here.

You wanna change something but have no idea where the
code is coming from. With experience it will come quickly.
Process of elimination:
- Obvious place? header, footer, sidebar
- WordPress Template Hierarchy
- Web inspector

DEMO!!!

Code non-destructively
...if possible.

Try not to edit the original Theme.
“Where should my code go” ﬂow chart:
1.Can the Theme Already do it?
2.Can a plugin do it?
•Forms, sliders, adding functionality
3.Can I use a child theme?
•Template change, CSS, theme actions/ﬁlters.
4. Can’t do either? Modify theme.

Editing CSS and HTML
...visually.

Large hurdle for designers starting with theme
customization, <CODE>.
Connect-the-dots from code to result.

Dev Tools Demo

Visual CSS demo

Test
Browsers, devices, & screen sizes.

Testing Wordpress Themes:
•WordPress Unit Test XML Import
•Monster Widget Plugin
•Translations support? Pig Latin plugin, RTL Tester
Plugin
•Theme Check Plugin
- WP_DEBUG(“true”);

Recommended Browser testing as of March 2013
Based on WC3 statistics (w3schools.com/browsers)
Browser
- Chrome 51.7%
- Firefox 28.5%
- IE 13%
- Safari 4.1%
- Opera 1.8%
OS
- Windows 7+ ~61% (XP 17.6%)
- Mac 9.5%
- Linux 4.7%
- Mobile 2.3%

Testing tools
Screenshots
VNC and Remote Desktop
Virtual Machines
- VirtualBox (free), Parallels, VMware Fusion
- FREE images at modern.ie
Physical Test Machines

Common Mistakes
(but I am like the bestest designer evarrrrr)

Overdoing It
...unless you want it to look like something
circa 1980!

You picked a theme for a reason, use it!

Don’t forget responsive/mobile!

Take into account how your responsive theme
changes when viewed on other devices

Let the limitations of the responsive theme
inform how you design your site from the start
(this gets easier the more you practice)

Missing CSS styles:
- Installed plugins
- Widgets
- User Generated Content

Forgetting this is the Web.
Think “in-browser”:
- Hover, active, and visited states.
- Drop-downs ( level1,level2,level3,etc)
- Number of actions to accomplish tasks.
- Will this work on Mobile?
- What is the airspeed velocity of an unladen swallow?
- Am I breaking WordPress conventions?

Designing without data. We often get questions from
clients like “Will adding more buy-now buttons
increase sales?”

You’re goal as a designer is to increase brand
awareness, ascetics, usability, and solve the design
problem.

Tools
(well real tools...)

PSD to HTML
Starting at $29

No PSD ﬁle? No Problem.
pagelayers.com
HTML

developers.google.com/chrome-developer-tools/

getﬁrebug.com

Resources

premiumpixels.com

dribbble.com

designspiration.net
Designspiration

organicthemes.com
themezilla.com
okaythemes.com
graphpaperpress.com
woothemes.com
Theme Authors

wpdaily.co
dontfeartheinternet.com
css-tricks.com
smashingmagazine.com
noeltock.com
Resources

Travis Totz - @apollo133
Nick Pelton - @nickpelton
WerkPress - @werkpress
Us

A Designers Approach to Customizing Themes

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to A Designers Approach to Customizing Themes (20)

Recently uploaded (20)

A Designers Approach to Customizing Themes