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?

Wednesday, May 9, 12

HOSTING PROVIDER

APACHE

PHP

WordPress

Plugins

Theme

WP

REQU

EST

STAC

K

STAT

IC SI

TE

Wednesday, May 9, 12

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

Wednesday, May 9, 12

• 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!

Wednesday, May 9, 12

• 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

Wednesday, May 9, 12

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

Wednesday, May 9, 12

Sidebar

WP Loop

Meta Data

Wednesday, May 9, 12

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

Wednesday, May 9, 12

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

Wednesday, May 9, 12

Pages• Are implemented as a custom post type

• Explicit ordering

• Hierarchy

• Templates

12

Wednesday, May 9, 12

Empty Pages• Give it a name

• Select a template

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

13

Wednesday, May 9, 12

Wednesday, May 9, 12

Custom Menu

Part ofPageTemplate

Sidebarw/Widgets(Custom & Jetpack)

8 Custom Menus

Wednesday, May 9, 12

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

Wednesday, May 9, 12

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)

Wednesday, May 9, 12

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)

Wednesday, May 9, 12

Post Type Features

19

• Title

• Editor

• Author

• Thumbnail/Featured Image

• Excerpt

• Trackbacks

• Custom Fields

• Comments

• Revisions

• Page Attributes

• Post Formats

Wednesday, May 9, 12

Custom Taxonomies

• Categories & Tags are implemented as Custom Taxonomies

• Groupings and parents of your custom post types

20

Wednesday, May 9, 12

Custom Fields

• Custom data attached to posts or custom post types

• This data is available during the Loop

21

Wednesday, May 9, 12

Post Formats

Wednesday, May 9, 12

Wednesday, May 9, 12

No Child Left Behind

(themes, that is)

Wednesday, May 9, 12

25

(Rebuilding WordCamp

site)

Wednesday, May 9, 12

Text/HTML• Text & HTML widget

• Simple widget, lots of flexibility

26

Wednesday, May 9, 12

Extra Credit• BuddyPress

• bbPress

• Sharing Plugins

• Drag & Drop

• GPL!

27

Wednesday, May 9, 12