Professional Documents
Culture Documents
02
September 30, 2008
Contents:
Introduction
Navigation
Header
Dashboard
Add New Post
Edit Posts
Comments
Media Library
Tags
Categories
Collapsed Navigation Menu
Introduction
WordPress 2.7 is a work in progress. These
wireframes attempt to document the current state of
or plans for the application. In some cases, elements
may change as development proceeds, either
because of technical issues or to address usability Header: Access to dashboard(s), breadcrumb, search, favorites. Also, greeting/logout.
issues. In addition, elements may change during the
visual design stage. These wireframes are a guide
Status, Options, Filters, Alerts
for development that will be updated as necessary,
and are not set in stone.
General Structure
The overall structure in 2.7 has changed to place the
primary navigation on the left side. This allows for
more vertical above-the-fold working space,
Primary
especially important when users access their admin
panel from laptops with screens wider than they are Navigation
Main Work Area
tall. Ultimately, this column will be collapsible for
users wishing to maximize their working area.
A Longish Blog Name Dashboard > Posts > Edit [Screen] Options Add New Post
Columns include post title, author, categories, tags, media,
comments, stats, and date. Comments and stats will display
DD Dashboard
Dashboard All (348) | Drafts (4) | Published (301) | Private (34) | Password-Protected (9) Search Posts as icons, as in 2.6. In list view, the Media column will list 1-3
Actions Apply Show All Dates Show All Categories Show All Authors Filter Displaying 1-10 of 48 1 2 3 4 5 file names depending on space, followed by ellipses if there
PP Posts
Posts
Select All Post Author Categories Tags Media Comments Stats Date
are more media files attached to the post. In expanded view,
Add
AddNewNew
Edit
Edit [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] the Media column will display mini-thumbnails, the same
Tags
Tags
Categories
Edit | Quick Edit | Delete | Change Status | View Published
size as in the Media module on the Add New Post screen. In
Categories
[This is a post title]
Edit | Quick Edit | Delete | Change Status | View
[Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Published
expanded view, the Post column will display an excerpt of
M Media
M Media [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
the post below the title. In the Date column, date format
L Links
L Links
Edit | Quick Edit | Delete | Change Status | View Published should follow that chosen by user in Settings. Below the
PG Pages [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] date, 'Published' or 'Last Modified' indicates what the date/
PG Pages Edit | Quick Edit | Delete | Change Status | View Published
C Comments time refers to, since in 2.7, Drafts are included in the All
C Comments [This is a post title] - Draft [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | Preview Last modified Posts list chronologically rather than appearing at the very
A
A
Appearance
Appearance [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] end of the list. In expanded mode, the Date column displays
Edit | Quick Edit | Delete | Change Status | View Published
S
S
Settings
Settings the time of the post below the date and above the status.
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
T
T
Tools
Tools Edit | Quick Edit | Delete | Change Status | View Published
Background colors provide additional visual cues to post
U
U
Plugins
Plugins [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
status for Drafts and Private posts.
Edit | Quick Edit | Delete | Change Status | View Published
?
?
Help
Help
[This is a post title] - Private
Edit | Quick Edit | Delete | Change Status | View
[Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Published
All screens in list/column format now repeat column
headers, bulk action controls and pagination at the bottom of
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published the screen to prevent unnecessary scrolling. In addition,
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] actions links in these screens have been moved to the left
Edit | Quick Edit | Delete | Change Status | View Published
column, directly beneath the primary item title or excerpt.
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published Action Links:
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy] Edit- loads the post editor for that item.
Edit | Quick Edit | Delete | Change Status | View Published
QuickEdit- opens a layer allowing in line editing of all fields
[This is a post title]
Edit | Quick Edit | Delete | Change Status | View
[Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Published
currently displayed in columns.
Delete- deletes post after asking for confirmation of action.
Select All Post Author Categories Tags Comments Stats Date
Change Status- allows user to change post from Published
Actions Displaying 1-10 of 48 1 2 3 4 5
Apply
to Draft, Public to Private, etc.
View/Preview- opens the post on the live blog, or in preview
mode if a Draft.
G Howdy, username! Logout Action links are again moved to the left column. Approve/
A Longish Blog Name Dashboard > Comments > Moderate [Screen] Options
Add New Post
Unapprove, Edit, Spam and Delete function as in 2.6. Reply
opens a layer allowing the user to reply directly to the
Show All Types All (348) | Pending (4) | Approved (330) | Spam (14)
DD Dashboard
Dashboard Search Comments comment. This reply will appear immediately following the
PP Posts
Actions Apply Show All Dates Filter Displaying 1-10 of 48 1 2 3 4 5 original comment on the public blog.
Posts
Add New Select All Comment Author Submitted In Response to This Post
M Media
Edit [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon] In 2.6, text filters for this screen included All, Awaiting
L Tags
Links Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
Categories Moderation, Approved. In the Crazyhorse prototype, Spam
PG Pages [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm] was added, so that users would not need to use additional
M
C
Media
Comments
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon] navigation to see comments they had marked as spam. This
L Links
Moderate
Akismet Spam
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
text filter is included in 2.7. In addition, a dropdown menu to
PG Pages
My Comments [This is sample comment text. This is sample comment text. ]
Approve | Reply | Edit | Spam | Delete
[Gravatar] [Author Name]
[author@email.com] [IP.IPI.PIP.IP]
[mm/dd/yyyy]
at [hh:rr xm]
[This is a post title] [# comments icon]
Published [mm/dd/yyyy] at [hh:rr xm]
the left of these text filters will offer users the ability to show
C Comments
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
all types, comments only, or trackbacks only. Text filters will
A Appearance Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm] be applied to the selection in the dropdown menu.
A Appearance
S Settings [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon] Background color will indicate comments in need of
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
S Settings
Tools moderation.
T
T Tools [This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
U Plugins Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
U Plugins
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
? Help Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
? Help
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
[This is sample comment text. This is sample comment text. ] [Gravatar] [Author Name] [mm/dd/yyyy] [This is a post title] [# comments icon]
Approve | Reply | Edit | Spam | Delete [author@email.com] [IP.IPI.PIP.IP] at [hh:rr xm] Published [mm/dd/yyyy] at [hh:rr xm]
[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
img [dimensions], [file size]
Edit | Attach to Post | Delete | View
[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
img [dimensions], [file size]
Edit | Attach to Post | Delete | View
[This is a media filename.ext] [Author] [Category] [tag1, tag2, tag3] [Post title] [(#)] [mm/dd/yyyy]
img [dimensions], [file size]
Edit | Attach to Post | Delete | View
G Howdy, username! Logout The 'Popular Tags' cloud in the lower left displays tags in
A Longish Blog Name Dashboard > Tags [Screen] Options Add New Post
non-columnar format, with font size indicating frequency of
use. Clicking on a tag here will open the editing screen for
DD Dashboard
Dashboard Search Tags
that tag.
Actions
PP Posts
Posts
Add a New Tag Apply Displaying 1-10 of 48 1 2 3 4 5
Add New Select All Tag Name Tag Slug Posts The traditional column containing tags for management
Write Tag Name
Edit
Drafts [tag name] [tag slug] [#] includes the tag name, tag slug (.org only), and the number
Tags
View All Edit | Delete
Categories
Tags of posts to which the tag is attached. Clicking on the number
The name is how the tag appears on your site. [tag name] [tag slug] [#]
Categories
Edit | Delete in the Posts column will open a layer that lists the titles of
M Media
M Media [tag name] [tag slug] [#] the posts with this tag. Post titles will link to their own editing
L Links Tag Slug
L Links
Edit | Delete
screens.
PG Pages [tag name] [tag slug] [#]
PG Pages The “slug” is the URL-friendly version of the name. It is Edit | Delete
C Comments
C Comments usually all lowercase and contains only letters, numbers,
[tag name] [tag slug] [#]
In the left navigation column, users are reminded of the
and hyphens. Edit | Delete category to tag converter tool, with a link to that screen in
AA Appearance
Appearance Submit [tag name] [tag slug] [#] the Tools section.
Edit | Delete
SS Settings
Settings
TT Tools [tag name] [tag slug] [#]
Tools Edit | Delete
UU Plugins
Plugins Popular Tags [tag name] [tag slug] [#]
tagname Tag tag33 alongertag
Edit | Delete
?? Help
Help
[tag name] [tag slug] [#]
ADifferentTagName atag Tag23 Edit | Delete
randomtag Tags tagname Tag tag33 [tag name] [tag slug] [#]
Edit | Delete
Note:
alongertag tagname Tag tagname Tag
[tag name] [tag slug] [#]
Tags can be converted
to tags using the
tag33 alongertag tag33 alongertag Edit | Delete
category to tag
converter in the Tools
tagname Tag tagname Tag tagname [tag name]
Edit | Delete
[tag slug] [#]
section.
Tag tag33 alongertag tag33 [tag name] [tag slug] [#]
Edit | Delete
alongertag tag33 alongertag tagname
[tag name] [tag slug] [#]
Tag tag33 alongertag tagname Tag Edit | Delete
A Longish Blog Name Dashboard > Categories [Screen] Options Add New Post
management includes the category name, category slug
(.org only), the description, and the number of posts to
DD Dashboard
Dashboard Search Categories which the category is attached. The Description column will
Add a New Category Actions Apply Displaying 1-10 of 48 1 2 3 4 5 be hidden by default. Clicking on the number in the Posts
PP Posts
Posts
Select All Category Name Category Slug Description Posts
column will open a layer that lists the titles of the posts with
Add New
Write
Edit
Drafts
Category Name
[Category name] [Category slug] [Category description]... [#]
this category. Post titles will link to their own editing screens.
Tags
View All Edit | Delete
Categories
Tags The name is used to identify the category almost everywhere,
Categories such as under the post or in the category widget. [Category name]
Edit | Delete
[Category slug] [Category description]... [#] In the left navigation column, users are reminded of the tag
M Media to category converter tool, with a link to that screen in the
M Media Category Slug [Category name] [Category slug] [Category description]... [#]
L Links Edit | Delete Tools section.
L Links
PG Pages The “slug” is the URL-friendly version of the name. It is usually [Category name] [Category slug] [Category description]... [#]
PG Pages all lowercase and contains only letters, numbers, and hyphens. Edit | Delete
C Comments
C Comments [Category name] [Category slug] [Category description]... [#]
Parent Category Edit | Delete
AA Appearance
Appearance
None [Category name] [Category slug] [Category description]... [#]
Edit | Delete
SS Settings
Settings The “slug” is the URL-friendly version of the name. It is usually all
lowercase and contains only letters, numbers, and hyphens. [Category name] [Category slug] [Category description]... [#]
TT Tools
Tools Categories, unlike tags, can have a hierarchy. You might have a Edit | Delete
UU Plugins
Plugins Jazz category, and under that have children categories for Bebop
and Big Band. Totally optional. [Category name] [Category slug] [Category description]... [#]
Edit | Delete
?? Help
Help
Category Description [Category name] [Category slug] [Category description]... [#]
Edit | Delete
A Longish Blog Name Dashboard > View All Posts [Screen] Options Add New Post
DD Dashboard
Actions 1 2 3 4 5
S
C Comments [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
U
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
A Appearance Edit | Quick Edit | Delete | Change Status | View Published
?S Settings [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
T Tools
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
U Plugins Edit | Quick Edit | Delete | Change Status | View Published
>? Help [This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
[This is a post title] [Post author] [Category 1, category2] [tag1, tag2, tag3] [filename.jpg, file.mp3] [(#)] [(i)] [mm/dd/yyyy]
Edit | Quick Edit | Delete | Change Status | View Published
Actions 1 2 3 4 5