designing for wordpress

Designing for WordPress@alternatekev | alternate.org | alternatkev.me

Wednesday, May 9, 12

What is WordPress?

How is it different from a static site?


HOSTING PROVIDER

APACHE

PHP

WordPress

Plugins

Theme

WP

REQU

EST

STAC

K

STAT

IC SI

TE


Admin ThemeWednesday, May 9, 12

• Content Blocks

• Design for WP user AND reader

• Customization vs. Control

• Many types of content

• Sidebars, sidebars, sidebars

• Custom Menus


• What will this navigation look like with 12 items? Should we support nested items?

• Which plugins are most likely to be installed? What will they look like when in sidebar A, sidebar B, etc?

• What about this layout is fluid? What is fixed?

• What is part of the template and non-editable? What will the user want to change?

• You are the designer. It’s your job to ask these questions and to provide guidance to on how to answer them.

6

Questions!


• Home Page

• Blog River / Posts Page

• Single Blog Page

• Category Listing

• Author Bio Page

• Post Format Templates

7

A Basic Theme’s Structure

• Search Results

• Search Form

• Sidebar(s)

• Posts Archive

• 404 Page

• Basic Page Template


Ok... and?You are not the one in control.


Sidebar

WP Loop

Meta Data


Posts• Customizable into post types (products, books, etc.)

• Grouped and ordered by date posted (blog river)

• Appear in RSS feed

• Multiple formats

• Categories

• Tags

• Excerpt

10


Featured Images• Attach an image to

any post, page or custom post type.

• Use this image and WordPress’s many image features to call the post out visually anywhere.

11


Pages• Are implemented as a custom post type

• Explicit ordering

• Hierarchy

• Templates

12


Empty Pages• Give it a name

• Select a template

• Content/structure/etc. is defined in template, not page content

13


Custom Menu

Part ofPageTemplate

Sidebarw/Widgets(Custom & Jetpack)

8 Custom Menus


Custom Post Types• Not simply different “kinds of blog posts” (image,

quote, video, music, etc.), used to describe different kind of thing (books, products, plants, etc.)

• Can be based on intrinsic post or page type

• Addition of custom meta fields make them very powerful

16


Post Type Labels• Name

• Singular Name

• Add New Text (“Add New Speaker”)

• All Items Label (“All Speakers”)

• Edit Item Label (“Edit Speaker”)

• New Item Label (“New Speaker”)

• View Item Label (“View Speaker”)

• Search Items (“Search for Speakers”)

17

• Not Found Text (“No Speakers found that match your search”)

• Not Found in Trash Text (“No Speakers found in trash”)

• Parent Item Name (Speakers belong to a “Company”)

• Menu Name (if different from Name)


Post Type Options• Label (“Speakers”)

• Labels (all on the last page)

• Visible to Public Users (y/n)

• Exclude from Search (y/n)

• Show Admin UI (y/n)

• Show in Menus (y/n)

• Search Items (“Search for Speakers”)

18

• Show in Admin Bar (y/n)

• Menu Position (#)

• Menu Icon

• Capabilities (read, edit, delete, publish, read private)

• Hierarchical (categories, etc)


Post Type Features

19

• Title

• Editor

• Author

• Thumbnail/Featured Image

• Excerpt

• Trackbacks

• Custom Fields

• Comments

• Revisions

• Page Attributes

• Post Formats


Custom Taxonomies

• Categories & Tags are implemented as Custom Taxonomies

• Groupings and parents of your custom post types

20


Custom Fields

• Custom data attached to posts or custom post types

• This data is available during the Loop

21


Post Formats


No Child Left Behind

(themes, that is)


25

(Rebuilding WordCamp

site)


Text/HTML• Text & HTML widget

• Simple widget, lots of flexibility

26


Extra Credit• BuddyPress

• bbPress

• Sharing Plugins

• Drag & Drop

• GPL!

27


designing for wordpress

Technology

search items

post

page

show

template

speaker

search

sidebar