Download - A Designers Approach to Customizing Themes
Saturday, April 27, 13
We are WordPress Customizers
Saturday, April 27, 13
A WordPress Customization Shop
Hi, we’re Travis and Nick and we run
Saturday, April 27, 13
A shop dedicated 100% to WordPress design and development customizations
A WordPress Customization Shop
@werkpress
Saturday, April 27, 13
A WordPress Customization Shop
Customizing WordPress
1. Differentiate Yourself
2. Breaking into Customization: Designer to Dev
3. Common Mistakes
4. Resources
Saturday, April 27, 13
Differentiate Yourself
Saturday, April 27, 13
A WordPress Customization Shop
Research...to see what everybody else has seen, and think
what nobody else has thought
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
Find the One Theme
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Google is your friend...
Saturday, April 27, 13
A WordPress Customization Shop
Search WordPress Themes...
Saturday, April 27, 13
A WordPress Customization Shop
Search Organic Themes... WooThemes...
Saturday, April 27, 13
A WordPress Customization Shop
Search for something specific...
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Based on your vision for the site, the content
of the site and the discussions you have had
with your client — select your theme.
Saturday, April 27, 13
A WordPress Customization Shop
Based on your vision for the site, the content
of the site and the discussions you have had
with your client — select your theme.
Saturday, April 27, 13
A WordPress Customization Shop
Based on your vision for the site, the content
of the site and the discussions you have had
with your client — select your theme.
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
awesomescreenshot.com
plus
Saturday, April 27, 13
Transformation(you know, like Transformers)
Saturday, April 27, 13
A WordPress Customization Shop
Get Organized.
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Header
Saturday, April 27, 13
A WordPress Customization Shop
Header Navigation
Saturday, April 27, 13
A WordPress Customization Shop
Header Navigation
Slider
Saturday, April 27, 13
A WordPress Customization Shop
Header Navigation
Slider
Body
Saturday, April 27, 13
A WordPress Customization Shop
Header Navigation
Slider
Body Sidebar
Saturday, April 27, 13
A WordPress Customization Shop
Header Navigation
Slider
Body Sidebar
Widgets
Saturday, April 27, 13
A WordPress Customization Shop
Header Navigation
Slider
Body Sidebar
Widgets
Footer
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
Original Themeorganicthemes.com/theme/non-profit-theme/
Saturday, April 27, 13
Customized Theme
Saturday, April 27, 13
Don’t forget about customizing your other page templates
Saturday, April 27, 13
A WordPress Customization Shop
Organize for speed.
Saturday, April 27, 13
A WordPress Customization Shop
• 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
Saturday, April 27, 13
Breaking into Customization:From Designer to Developer
(the secret to code is...)
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Assumptions:
•You are a designer•You’ve done some minimal HTML and CSS and have used WordPress
•You want to...
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Finding stuff you want to change...where the heck is that.
Saturday, April 27, 13
A WordPress Customization Shop
Get familiar with the WP template hierarchy.
codex.wordpress.org/Template_Hierarchy
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
• 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.
Saturday, April 27, 13
A WordPress Customization Shop
• 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.
Saturday, April 27, 13
A WordPress Customization Shop
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
Saturday, April 27, 13
A WordPress Customization Shop
DEMO!!!
Saturday, April 27, 13
A WordPress Customization Shop
Code non-destructively...if possible.
Saturday, April 27, 13
A WordPress Customization Shop
Try not to edit the original Theme.“Where should my code go” flow 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/filters.
4. Can’t do either? Modify theme.
Saturday, April 27, 13
A WordPress Customization Shop
Editing CSS and HTML...visually.
Saturday, April 27, 13
A WordPress Customization Shop
Large hurdle for designers starting with theme
customization, <CODE>.
Connect-the-dots from code to result.
Saturday, April 27, 13
A WordPress Customization Shop
Dev Tools Demo
Saturday, April 27, 13
A WordPress Customization Shop
Visual CSS demo
Saturday, April 27, 13
A WordPress Customization Shop
TestBrowsers, devices, & screen sizes.
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
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”);
Saturday, April 27, 13
A WordPress Customization Shop
Recommended Browser testing as of March 2013Based 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%
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
Testing toolsScreenshots
VNC and Remote Desktop
Virtual Machines
- VirtualBox (free), Parallels, VMware Fusion
- FREE images at modern.ie
Physical Test Machines
Saturday, April 27, 13
Common Mistakes(but I am like the bestest designer evarrrrr)
Saturday, April 27, 13
A WordPress Customization Shop
Overdoing It...unless you want it to look like something
circa 1980!
Saturday, April 27, 13
A WordPress Customization Shop
You picked a theme for a reason, use it!
Saturday, April 27, 13
A WordPress Customization Shop
Don’t forget responsive/mobile!
Saturday, April 27, 13
A WordPress Customization Shop
Take into account how your responsive theme
changes when viewed on other devices
Saturday, April 27, 13
A WordPress Customization Shop
Let the limitations of the responsive theme
inform how you design your site from the start (this gets easier the more you practice)
Saturday, April 27, 13
A WordPress Customization Shop
Missing CSS styles:
- Installed plugins
- Widgets
- User Generated Content
Saturday, April 27, 13
A WordPress Customization Shop
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?
Saturday, April 27, 13
A WordPress Customization Shop
Designing without data. We often get questions from clients like “Will adding more buy-now buttons increase sales?”
Saturday, April 27, 13
A WordPress Customization Shop
You’re goal as a designer is to increase brand awareness, ascetics, usability, and solve the design problem.
Saturday, April 27, 13
Tools(well real tools...)
Saturday, April 27, 13
A WordPress Customization Shop
PSD to HTML
Starting at $29
Saturday, April 27, 13
A WordPress Customization Shop
No PSD file? No Problem.
pagelayers.com
HTML
Saturday, April 27, 13
A WordPress Customization Shop
Saturday, April 27, 13
A WordPress Customization Shop
developers.google.com/chrome-developer-tools/
Saturday, April 27, 13
A WordPress Customization Shop
getfirebug.com
Saturday, April 27, 13
Resources
Saturday, April 27, 13
A WordPress Customization Shop
premiumpixels.com
Saturday, April 27, 13
A WordPress Customization Shop
dribbble.com
Saturday, April 27, 13
A WordPress Customization Shop
designspiration.net
Designspiration
Saturday, April 27, 13
A WordPress Customization Shop
organicthemes.com
themezilla.com
okaythemes.com
graphpaperpress.com
woothemes.com
Theme Authors
Saturday, April 27, 13
A WordPress Customization Shop
wpdaily.co
dontfeartheinternet.com
css-tricks.com
smashingmagazine.com
noeltock.com
Resources
Saturday, April 27, 13
A WordPress Customization Shop
Travis Totz - @apollo133
Nick Pelton - @nickpelton
WerkPress - @werkpress
Us
Saturday, April 27, 13