What Developers Need Designers to Know about WordPress

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

November 17, 2013

EastBayWP.com

Our Meetup.com Page

http://www.meetup.com/Eastbay-WordPress-Meetup/

Ongoing Sponsor: Page.ly

http://page.ly/

INTRODUCTIONS
1.
2.
3.
4.

Name
Company (if appropriate)
WordPress background
What you’re hoping to learn

GENERAL Q & A
Ask a question provide a tip about WordPress

What Developers
Need Designers
to Know
about WordPress
Sallie Goetsch

Parts of a Theme

http://yoast.com/wordpress-theme-anatomy/

Why This Matters
• The templates operate independently of
one another.
• Sizes and positions of these elements are
not fix...

Example

Desktop Layout

Mobile Layout

WordPress Template Hierarchy

http://marktimemedia.com/redesigning-the-template-hierarchy/

Why This Matters
• You need a separate design for every
template that the theme uses.
• At minimum, this means designing a...

Most Developers Use Frameworks

Why This Matters
• The developer will be mapping your
design onto his or her preferred
framework.
• Frameworks often inclu...

Example

Style Blog Post Formats
•
•
•
•
•
•
•
•
•

Aside
Gallery
Link
Image
Quote
Status
Video
Audio
Chat
http://codex.wordpress.o...

Why This Matters
• If your client plans to include lots of media
(video, audio, galleries, photos), you can
display each k...

Example
Twenty Thirteen is the
classic example of post
format styling. Each post
format has a different
background color.

Remember to Style Comments

And Comment Forms

Why This Matters
• Comments are an important WordPress
function.
• They can look really dreadful if you don’t
style them.
...

Understand Featured Images

https://codex.wordpress.org/Post_Thumbnails

What You Need to Decide
• Featured image size for blog index
(index.php)
• Whether to show featured images on
single.php a...

Examples: Featured Images

http://en.support.wordpress.com/featured-images/

Create Multiple Headers

http://wpti.ps/functions/mobile-optimized-twenty-thirteen-header-image/

Why This Matters
• Depending on the framework or parent
theme, full-width headers either get
cropped or shrunken
• Creatin...

Design a Mobile Menu

Why This Matters
• The desktop drop-down menu won’t look
good on a mobile device, even if it’s
responsive.
• Mega-menus ar...

Not All Fonts Are Created Equal

http://www.google.com/fonts

Why This Matters
• Just because you have a desktop license
for a font doesn’t mean you can use it on
the web.
• Google’s 6...

Style Hidden Elements
•
•
•
•
•
•
•

Drop-down menus
Headings level 1-6
List bullets
Blockquotes
Forms
Tables
Image captio...

Document Intended Functions
•
•
•
•
•
•

Hover color/effect for buttons
Hover and visited color for links
Pop-up windows
L...

Why This Matters
If you don’t show it or describe it, the
developer will do one of two things:
– Make it up, with a possib...

Example

Provide Icon Libraries

Why This Matters
• The icons you show in your design may
not be the only ones the client needs.
• It saves time if the dev...

The Codex Is Your Friend

http://codex.wordpress.org/Site_Design_and_Layout

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

WordPress 3.0 Feature Tour by East Bay WordPres... 1729 views
Drag-and-drop WordPress Themes, fea... by East Bay WordPres... 3072 views
Unitech Mt Albert 28 april 2010 by Realestate.co.nz ... 202 views
Wellington may 10 by Realestate.co.nz ... 481 views
Table by Ma.Danna Inigo 291 views
Queenstown Nov 2010 by Realestate.co.nz ... 234 views

View on Slideshare

1 of 38 Ad

View on Slideshare

1 of 38 Ad