a designers approach to customizing themes

Saturday, April 27, 13

We are WordPress Customizers


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. Differentiate Yourself

2. Breaking into Customization: Designer to Dev

3. Common Mistakes

4. Resources


Differentiate Yourself



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

what nobody else has thought


http://www.searchquotes.com/quotation/Research_is_to_see_what_everybody_else_has_seen%2C_and_to_think_what_nobody_else_has_thought/238985/




Find the One Theme



Google is your friend...



Search WordPress Themes...



Search Organic Themes... WooThemes...



Search for something specific...



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 Themeorganicthemes.com/theme/non-profit-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 stuff 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” 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.



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



TestBrowsers, 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 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%



Testing toolsScreenshots

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 file? No Problem.

pagelayers.com

HTML



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



getfirebug.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
