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.

1. Designing for
WordPress
Understanding templates + content types within WordPress
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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. John H. Watson, M.D.
Sherlock
Holmes’ friend,
colleague and
biographer
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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 year
WordCamp Philly 2012: Designing for WordPress @liamdempsey

5. What We’ll Cover Today
• What are templates + why they matter
• How WordPress uses templates
• Content Types in WordPress
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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 century
WordCamp Philly 2012: Designing for WordPress @liamdempsey

7. My intended audience is …
• New to designing database-driven
websites
• New to WordPress
WordCamp Philly 2012: Designing for WordPress @liamdempsey

8. I’m presenting from a
simple WordPress setup
standpoint – nothing too
advanced or fancy
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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 well
WordCamp Philly 2012: Designing for WordPress @liamdempsey

10. What is a template?
Templates are how
WordPress controls
where + how content is
displayed on the front
end of a website.

11. A key concept to take away
from this presentation:
WordPress relies on
templates to deliver
web page designs and
layouts to browsers
WordCamp Philly 2012: Designing for WordPress @liamdempsey

12. If you can understand
templates, then you can …
Design
for
WordPress
WordCamp Philly 2012: Designing for WordPress @liamdempsey

13. Why Do Templates
Matter to
Designers?
WordCamp Philly2012: Designing for WordPress @liamdempsey

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 design
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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. 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 + purpose
WordCamp Philly 2012: Designing for WordPress @liamdempsey

17. http://thetruckingaccidentlawyers.info

18. http://thetruckingaccidentlawyers.info

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. 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 themes
WordCamp Philly 2012: Designing for WordPress @liamdempsey

21. The template files in
WordPress 2011 theme
On this page
WordCamp Philly 2012: Designing for WordPress @liamdempsey

22. WP’s THREE Content Types
These three content types are your building blocks!
1. Posts
2. Pages
3. Custom Post Types
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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 well
WordCampPhilly 2012: Designing for WordPress @liamdempsey

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. 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 fields
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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. 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. 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 site
WordCamp Philly 2012: Designing for WordPress @liamdempsey

29. CPT in Page Templates
Page Template
Logo A pithy little tagline
Home Our Services Our Team Recent Cases Contact Us
Our 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. Exploring the CPT
Featured Image Fields in the
Custom Post
Type of Team
Sherlock Holmes
Consulting Detective
sholmes@consultingdetectives.co.uk

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 Team
Sherlock Holmes
Consulting Detective Featured
sholmes@consultingdetectives.co.uk
Image
Lorem ipsum dolor sit amet, consec-
tetur adipiscing elit. Donec a diam
lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec
consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet
vitae augue. Nam tincidunt congue enim, ut porta Main
lorem lacinia consectetur. content

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. 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 Meetups
WordCamp Philly 2012: Designing for WordPress @liamdempsey

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 Community
WordCamp Philly 2012: Designing for WordPress @liamdempsey

35. Questions?
Liam Dempsey
Director | Communications Designer
@liamdempsey
liam@lbdesign.tv
610-390-9076
liamdempsey.com lbdesign.tv chickenmonkeydog.com
WordCamp Philly 2012: Designing for WordPress @liamdempsey