A Designers Approach to Customizing Themes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

A Designers Approach to Customizing Themes

on

  • 2,102 views

All designers approach problems, visual presentation and design, and usability differently. As designers, we understand that brand and image are important for a site. A theme or site is an opportunity ...

All designers approach problems, visual presentation and design, and usability differently. As designers, we understand that brand and image are important for a site. A theme or site is an opportunity to extend your reach to an audience who is unfamiliar with you or your client. A unique theme design is a way to put a business, a message and brand, front and center as well as effectively communicate the value of the product or service. Most likely, there are other sites using the same (or similar) theme that you’re using, and you need to distinguish yourself from your competitors as much as possible.

In this session, you will learn a few key ideas on how to differentiate yourself and your work when customizing WordPress themes. We’ll discuss some rookie mistakes and how to avoid them, as well as how to approach theme customizations to make yours distinct and applicable to today’s design trends.

Statistics

Views

Total Views
2,102
Views on SlideShare
2,101
Embed Views
1

Actions

Likes
1
Downloads
10
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

A Designers Approach to Customizing Themes Presentation Transcript

  • 1. Saturday, April 27, 13
  • 2. We are WordPress CustomizersSaturday, April 27, 13
  • 3. A WordPress Customization ShopHi, we’re Travis and Nick and we runSaturday, April 27, 13
  • 4. A shop dedicated 100% to WordPress designand development customizationsA WordPress Customization Shop@werkpressSaturday, April 27, 13
  • 5. A WordPress Customization ShopCustomizing WordPress1. Differentiate Yourself2. Breaking into Customization: Designer to Dev3. Common Mistakes4. ResourcesSaturday, April 27, 13
  • 6. Differentiate YourselfSaturday, April 27, 13
  • 7. A WordPress Customization ShopResearch...to see what everybody else has seen, and thinkwhat nobody else has thoughtSaturday, April 27, 13
  • 8. A WordPress Customization ShopSaturday, April 27, 13
  • 9. Find the One ThemeSaturday, April 27, 13
  • 10. A WordPress Customization ShopSaturday, April 27, 13
  • 11. A WordPress Customization ShopGoogle is your friend...Saturday, April 27, 13
  • 12. A WordPress Customization ShopSearch WordPress Themes...Saturday, April 27, 13
  • 13. A WordPress Customization ShopSearch Organic Themes... WooThemes...Saturday, April 27, 13
  • 14. A WordPress Customization ShopSearch for something specific...Saturday, April 27, 13
  • 15. A WordPress Customization ShopSaturday, April 27, 13
  • 16. A WordPress Customization ShopSaturday, April 27, 13
  • 17. A WordPress Customization ShopBased on your vision for the site, the contentof the site and the discussions you have hadwith your client — select your theme.Saturday, April 27, 13
  • 18. A WordPress Customization ShopBased on your vision for the site, the contentof the site and the discussions you have hadwith your client — select your theme.Saturday, April 27, 13
  • 19. A WordPress Customization ShopBased on your vision for the site, the contentof the site and the discussions you have hadwith your client — select your theme.Saturday, April 27, 13
  • 20. A WordPress Customization ShopSaturday, April 27, 13
  • 21. A WordPress Customization Shopawesomescreenshot.complusSaturday, April 27, 13
  • 22. Transformation(you know, like Transformers)Saturday, April 27, 13
  • 23. A WordPress Customization ShopGet Organized.Saturday, April 27, 13
  • 24. A WordPress Customization ShopSaturday, April 27, 13
  • 25. A WordPress Customization ShopHeaderSaturday, April 27, 13
  • 26. A WordPress Customization ShopHeaderNavigationSaturday, April 27, 13
  • 27. A WordPress Customization ShopHeaderNavigationSliderSaturday, April 27, 13
  • 28. A WordPress Customization ShopHeaderNavigationSliderBodySaturday, April 27, 13
  • 29. A WordPress Customization ShopHeaderNavigationSliderBody SidebarSaturday, April 27, 13
  • 30. A WordPress Customization ShopHeaderNavigationSliderBody SidebarWidgetsSaturday, April 27, 13
  • 31. A WordPress Customization ShopHeaderNavigationSliderBody SidebarWidgetsFooterSaturday, April 27, 13
  • 32. A WordPress Customization ShopSaturday, April 27, 13
  • 33. A WordPress Customization ShopSaturday, April 27, 13
  • 34. Original Themeorganicthemes.com/theme/non-profit-theme/Saturday, April 27, 13
  • 35. Customized ThemeSaturday, April 27, 13
  • 36. Don’t forget about customizing your otherpage templatesSaturday, April 27, 13
  • 37. A WordPress Customization ShopOrganize for speed.Saturday, April 27, 13
  • 38. A WordPress Customization Shop• Set your guides and grid in Photoshop• Design all of your graphics and organize your layersinto 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 developSaturday, April 27, 13
  • 39. Breaking into Customization:From Designer to Developer(the secret to code is...)Saturday, April 27, 13
  • 40. A WordPress Customization ShopSaturday, April 27, 13
  • 41. A WordPress Customization ShopSaturday, April 27, 13
  • 42. A WordPress Customization ShopSaturday, April 27, 13
  • 43. A WordPress Customization ShopAssumptions:•You are a designer•You’ve done some minimal HTML and CSS andhave used WordPress•You want to...Saturday, April 27, 13
  • 44. A WordPress Customization ShopSaturday, April 27, 13
  • 45. A WordPress Customization ShopFinding stuff you want to change...where the heck is that.Saturday, April 27, 13
  • 46. A WordPress Customization ShopGet familiar with the WP template hierarchy.codex.wordpress.org/Template_HierarchySaturday, April 27, 13
  • 47. A WordPress Customization ShopSaturday, April 27, 13
  • 48. 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 byauthor, etc.• single.php - The template file thats used when viewing an individual post.Saturday, April 27, 13
  • 49. A WordPress Customization Shop• comments.php - Called at the bottom of the single.php file to enable thecomments 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
  • 50. A WordPress Customization ShopYou wanna change something but have no idea where thecode is coming from. With experience it will come quickly.Process of elimination:- Obvious place? header, footer, sidebar- WordPress Template Hierarchy- Web inspectorSaturday, April 27, 13
  • 51. A WordPress Customization ShopDEMO!!!Saturday, April 27, 13
  • 52. A WordPress Customization ShopCode non-destructively...if possible.Saturday, April 27, 13
  • 53. A WordPress Customization ShopTry 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 functionality3.Can I use a child theme?•Template change, CSS, theme actions/filters.4. Can’t do either? Modify theme.Saturday, April 27, 13
  • 54. A WordPress Customization ShopEditing CSS and HTML...visually.Saturday, April 27, 13
  • 55. A WordPress Customization ShopLarge hurdle for designers starting with themecustomization, <CODE>.Connect-the-dots from code to result.Saturday, April 27, 13
  • 56. A WordPress Customization ShopDev Tools DemoSaturday, April 27, 13
  • 57. A WordPress Customization ShopVisual CSS demoSaturday, April 27, 13
  • 58. A WordPress Customization ShopTestBrowsers, devices, & screen sizes.Saturday, April 27, 13
  • 59. A WordPress Customization ShopSaturday, April 27, 13
  • 60. A WordPress Customization ShopTesting Wordpress Themes:•WordPress Unit Test XML Import•Monster Widget Plugin•Translations support? Pig Latin plugin, RTL TesterPlugin•Theme Check Plugin- WP_DEBUG(“true”);Saturday, April 27, 13
  • 61. A WordPress Customization ShopRecommended 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
  • 62. A WordPress Customization ShopSaturday, April 27, 13
  • 63. A WordPress Customization ShopTesting toolsScreenshotsVNC and Remote DesktopVirtual Machines- VirtualBox (free), Parallels, VMware Fusion- FREE images at modern.iePhysical Test MachinesSaturday, April 27, 13
  • 64. Common Mistakes(but I am like the bestest designer evarrrrr)Saturday, April 27, 13
  • 65. A WordPress Customization ShopOverdoing It...unless you want it to look like somethingcirca 1980!Saturday, April 27, 13
  • 66. A WordPress Customization ShopYou picked a theme for a reason, use it!Saturday, April 27, 13
  • 67. A WordPress Customization ShopDon’t forget responsive/mobile!Saturday, April 27, 13
  • 68. A WordPress Customization ShopTake into account how your responsive themechanges when viewed on other devicesSaturday, April 27, 13
  • 69. A WordPress Customization ShopLet the limitations of the responsive themeinform how you design your site from the start(this gets easier the more you practice)Saturday, April 27, 13
  • 70. A WordPress Customization ShopMissing CSS styles:- Installed plugins- Widgets- User Generated ContentSaturday, April 27, 13
  • 71. A WordPress Customization ShopForgetting 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
  • 72. A WordPress Customization ShopDesigning without data. We often get questions fromclients like “Will adding more buy-now buttonsincrease sales?”Saturday, April 27, 13
  • 73. A WordPress Customization ShopYou’re goal as a designer is to increase brandawareness, ascetics, usability, and solve the designproblem.Saturday, April 27, 13
  • 74. Tools(well real tools...)Saturday, April 27, 13
  • 75. A WordPress Customization ShopPSD to HTMLStarting at $29Saturday, April 27, 13
  • 76. A WordPress Customization ShopNo PSD file? No Problem.pagelayers.comHTMLSaturday, April 27, 13
  • 77. A WordPress Customization ShopSaturday, April 27, 13
  • 78. A WordPress Customization Shopdevelopers.google.com/chrome-developer-tools/Saturday, April 27, 13
  • 79. A WordPress Customization Shopgetfirebug.comSaturday, April 27, 13
  • 80. ResourcesSaturday, April 27, 13
  • 81. A WordPress Customization Shoppremiumpixels.comSaturday, April 27, 13
  • 82. A WordPress Customization Shopdribbble.comSaturday, April 27, 13
  • 83. A WordPress Customization Shopdesignspiration.netDesignspirationSaturday, April 27, 13
  • 84. A WordPress Customization Shoporganicthemes.comthemezilla.comokaythemes.comgraphpaperpress.comwoothemes.comTheme AuthorsSaturday, April 27, 13
  • 85. A WordPress Customization Shopwpdaily.codontfeartheinternet.comcss-tricks.comsmashingmagazine.comnoeltock.comResourcesSaturday, April 27, 13
  • 86. A WordPress Customization ShopTravis Totz - @apollo133Nick Pelton - @nickpeltonWerkPress - @werkpressUsSaturday, April 27, 13