Designing for      WordPress       Understanding templates + content types within WordPressWordCamp Philly 2012: Designing...
About Halloween Me   •    Fictional literary character   •    Retired Army surgeon who lived in London   •    Shared a fla...
John H. Watson, M.D.   Sherlock   Holmes’ friend,   colleague and   biographerWordCamp Philly 2012: Designing for WordPres...
About the Real Me   • Liam Dempsey   • Work in web + print:     a designer who codes   • Started my own company in the UK,...
What We’ll Cover Today   • What are templates + why they matter   • How WordPress uses templates   • Content Types in Word...
What We Won’t Cover   • Any sort of design principles or best     design styles   • We won’t write any code   • Forensic S...
My intended audience is …   • New to designing database-driven     websites   • New to WordPressWordCamp Philly 2012: Desi...
I’m presenting from a   simple WordPress setup   standpoint – nothing too   advanced or fancyWordCamp Philly 2012: Designi...
Using WordPress as a CMS   • We use WordPress to build small,     medium and large business websites   • WordPress is how ...
What is a template?Templates are howWordPress controlswhere + how content isdisplayed on the frontend of a website.
A key concept to take away   from this presentation:   WordPress relies on   templates to deliver   web page designs and  ...
If you can understand      templates, then you can …                       Design                         for             ...
Why Do Templates                   Matter to                       Designers?WordCamp Philly2012: Designing for WordPress ...
Designs for content must fit the   structure – content can only go where   the WordPress template allows it to go   The gr...
Two big issues Print Designers   have with web templates?                     FLUIDITY                           of web pr...
Fluidity of Web Presentation   • Limited display control:     different browsers present     typography and margins in    ...
http://thetruckingaccidentlawyers.info
http://thetruckingaccidentlawyers.info
Rigidity of Web Templates   • Content management systems do     EXACTLY what we tell them to do – they     can’t guess our...
Key Points about Templates   • Header and footer files are     shared across WordPress   • Unique page layouts require    ...
The template files in                                                WordPress 2011 theme                         On this ...
WP’s THREE Content Types   These three content types are your building blocks!     1. Posts     2. Pages     3. Custom Pos...
Posts in WordPress   • Used for blog, news, updates, etc.   • Posts get pushed around the site in     sidebars, footers an...
How to Design Posts for WP   • Consider the look of the title, publication     date and author display   • Use excerpts or...
Pages in WordPress   • Obviously, for individual pages   • Can also be used to embed in other     pages (e.g., for article...
How to Design Pages for WP   • What content needs to go a specific     page?   • Will the different pages across a site   ...
Custom Post Type (CPT)   • Used for any content with a need for repeated     instances of that content type   • Think more...
How to Design CPT for WP   • Clearly set out the fields to be included   • Define the parameters of those fields   • Decid...
CPT in Page Templates                                                                   Page Template Logo                ...
Exploring the CPT   Featured Image                   Fields in the                                    Custom Post         ...
Exploring the CPT                                                                 Fields in the Logo                      ...
Pulling it all together  Logo                                                                        A pithy little taglin...
How to Learn More   • Play around with your own development site   • A good overview of CPT:     http://keithdevon.com/cus...
In Review …   • Understanding templates is key to     designing for database-driven websites   • WordPress uses templates ...
Questions?                                    Liam Dempsey                                    Director | Communications De...
Upcoming SlideShare
Loading in...5
×

Designing for WordPress

1,780

Published on

As web designers and print designers encounter WordPress for the first time, it can be a challenge to understand how WordPress works. Yet, it is so important for designers to know the system for which they are designing. This presentation will address key points for helping designers understand the basic functionality and structure of WordPress — so that they can design truly beautiful and functional sites that run well on WordPress. This presentation will aim to help designers understand what developers do to get their designs live on a WordPress site.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,780
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing for WordPress

  1. 1. Designing for WordPress Understanding templates + content types within WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
  2. 2. About Halloween Me • Fictional literary character • Retired Army surgeon who lived in London • Shared a flat with an eccentric intellectual • Often told “Elementary!”WordCamp Philly 2012: Designing for WordPress @liamdempsey
  3. 3. John H. Watson, M.D. Sherlock Holmes’ friend, colleague and biographerWordCamp Philly 2012: Designing for WordPress @liamdempsey
  4. 4. About the Real Me • Liam Dempsey • Work in web + print: a designer who codes • Started my own company in the UK, since expanded to the US • Working with WordPress since 2007 • Co-founded Philly ‘burbs WordPress Meetup earlier this yearWordCamp Philly 2012: Designing for WordPress @liamdempsey
  5. 5. What We’ll Cover Today • What are templates + why they matter • How WordPress uses templates • Content Types in WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
  6. 6. What We Won’t Cover • Any sort of design principles or best design styles • We won’t write any code • Forensic Science methodology of the late 19th centuryWordCamp Philly 2012: Designing for WordPress @liamdempsey
  7. 7. My intended audience is … • New to designing database-driven websites • New to WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
  8. 8. I’m presenting from a simple WordPress setup standpoint – nothing too advanced or fancyWordCamp Philly 2012: Designing for WordPress @liamdempsey
  9. 9. Using WordPress as a CMS • We use WordPress to build small, medium and large business websites • WordPress is how we get content to the front end of the website • We need to know how WP thinks so we can create designs that will work wellWordCamp Philly 2012: Designing for WordPress @liamdempsey
  10. 10. What is a template?Templates are howWordPress controlswhere + how content isdisplayed on the frontend of a website.
  11. 11. A key concept to take away from this presentation: WordPress relies on templates to deliver web page designs and layouts to browsersWordCamp Philly 2012: Designing for WordPress @liamdempsey
  12. 12. If you can understand templates, then you can … Design for WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
  13. 13. Why Do Templates Matter to Designers?WordCamp Philly2012: Designing for WordPress @liamdempsey
  14. 14. Designs for content must fit the structure – content can only go where the WordPress template allows it to go The greater the number of templates = the greater the cost Web templates are very different from print designWordCamp Philly 2012: Designing for WordPress @liamdempsey
  15. 15. Two big issues Print Designers have with web templates? FLUIDITY of web presentation RIGIDITY of web templates HUMILITY I know I struggled with them.WordCamp Philly 2012: Designing for WordPress @liamdempsey
  16. 16. Fluidity of Web Presentation • Limited display control: different browsers present typography and margins in slightly different ways • Responsive design: moving/resizing to fit the screen + purposeWordCamp Philly 2012: Designing for WordPress @liamdempsey
  17. 17. http://thetruckingaccidentlawyers.info
  18. 18. http://thetruckingaccidentlawyers.info
  19. 19. Rigidity of Web Templates • Content management systems do EXACTLY what we tell them to do – they can’t guess our intentions • Templates can be used for more than a single page – e.g, the About Us and Our Services pages can use the same template.WordCamp Philly 2012: Designing for WordPress @liamdempsey
  20. 20. Key Points about Templates • Header and footer files are shared across WordPress • Unique page layouts require their own templates • Sidebars have templates • Additional templates can be added to themesWordCamp Philly 2012: Designing for WordPress @liamdempsey
  21. 21. The template files in WordPress 2011 theme On this pageWordCamp Philly 2012: Designing for WordPress @liamdempsey
  22. 22. WP’s THREE Content Types These three content types are your building blocks! 1. Posts 2. Pages 3. Custom Post TypesWordCamp Philly 2012: Designing for WordPress @liamdempsey
  23. 23. Posts in WordPress • Used for blog, news, updates, etc. • Posts get pushed around the site in sidebars, footers and elsewhere as Latest News, Popular Posts, etc. • Comes with lots of fields: titles, excerpt, slug, category, author, tags and more • Can add custom fields as wellWordCampPhilly 2012: Designing for WordPress @liamdempsey
  24. 24. How to Design Posts for WP • Consider the look of the title, publication date and author display • Use excerpts or read more? • Will posts have a featured image? Need a default image too? • Remember: All the posts will be formatted the same! (Unless they are not!)WordCamp Philly 2012: Designing for WordPress @liamdempsey
  25. 25. Pages in WordPress • Obviously, for individual pages • Can also be used to embed in other pages (e.g., for articles on a home page) • Can be used to embed posts or custom post types • Come with set fields + can include custom fieldsWordCamp Philly 2012: Designing for WordPress @liamdempsey
  26. 26. How to Design Pages for WP • What content needs to go a specific page? • Will the different pages across a site require separate layouts? • Will a page display its own content, posts or custom post type?WordCamp Philly 2012: Designing for WordPress @liamdempsey
  27. 27. Custom Post Type (CPT) • Used for any content with a need for repeated instances of that content type • Think more of as a Custom Content Type • Can act like posts – e.g., a CPT of houses displayed on a housing listings page • The fields are customized • Content can be displayed across the site in sidebars + footer – Recipes, Staff, Products, etc.WordCamp Philly 2012: Designing for WordPress @liamdempsey
  28. 28. How to Design CPT for WP • Clearly set out the fields to be included • Define the parameters of those fields • Decide how those fields will be organized and displayed on the page • Consider how certain fields of the CPT will be displayed across the siteWordCamp Philly 2012: Designing for WordPress @liamdempsey
  29. 29. CPT in Page Templates Page Template Logo A pithy little tagline Home Our Services Our Team Recent Cases Contact UsOur Detective Team Sherlock Holmes Consulting Detective sholmes@consultingdetectives.co.uk Custom Post Type of Team John H. Watson, M.D. Retired Surgeon, Asst. Consulting Detective jwatson@consultingdetectives.co.uk Mrs. Hudson Landlady mrshudson@consultingdetectives.co.uk
  30. 30. Exploring the CPT Featured Image Fields in the Custom Post Type of Team Sherlock Holmes Consulting Detective sholmes@consultingdetectives.co.uk
  31. 31. Exploring the CPT Fields in the Logo A pithy little tagline Custom Post Home Our Services Our Team Recent Cases Contact Us Type of TeamSherlock HolmesConsulting Detective Featuredsholmes@consultingdetectives.co.uk ImageLorem ipsum dolor sit amet, consec-tetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra necconsectetur ante hendrerit. Donec et mollis dolor.Praesent et diam eget libero egestas mattis sit ametvitae augue. Nam tincidunt congue enim, ut porta Mainlorem lacinia consectetur. content
  32. 32. Pulling it all together Logo A pithy little tagline Home Our Services Our Team Recent Cases Contact Us At Baker Street Detective Services, we provide Contact Us Now! answers when no one else can. We find evidence 020 7723 2312 that others overlook. We make connections that escape the average investigative team. Recent Cases Why choose us? Our Top Detective • A Study in Scarlet Frankly, the reason is Sherlock Holmes • The Sign of the Four elementary! We’re the Consulting Detective • The Hound of the best in the world when it Baskervilles comes to solving crime. • The Valley of Fear Content from page template Custom Post Type Posts Embedded Page Template Content
  33. 33. How to Learn More • Play around with your own development site • A good overview of CPT: http://keithdevon.com/custom-post-types/ • The Codex: http://codex.wordpress.org • Google stuff • Attend WordCamps • Go to local WordPress MeetupsWordCamp Philly 2012: Designing for WordPress @liamdempsey
  34. 34. In Review … • Understanding templates is key to designing for database-driven websites • WordPress uses templates to display content on the front-end of the site • Three content types in WordPress: post, page and custom post type • Engage with the WordPress CommunityWordCamp Philly 2012: Designing for WordPress @liamdempsey
  35. 35. Questions? Liam Dempsey Director | Communications Designer @liamdempsey liam@lbdesign.tv 610-390-9076 liamdempsey.com lbdesign.tv chickenmonkeydog.comWordCamp Philly 2012: Designing for WordPress @liamdempsey

×