FlaKeys Website Guide - Monroe County Public Library

WordPress for FlaKeys Folks
A WordPress Guide for the
Monroe County Library Website Contribution Team
Prepared by Shelly Drumm
www.601solutions.info
[email protected]
WordPress for FlaKeys Folks .................................................................................... 1
What is WordPress? ................................................................................................... 3
Posting Content ..................................................................................................... 3
A Quick Look at Your Site .......................................................................................... 3
Categories ................................................................................................................. 3
Events........................................................................................................................ 5
Comments.............................................................................................................. 5
Library Location Pages .............................................................................................. 5
The WordPress Admin Panel ..................................................................................... 7
Logging In .................................................................................................................. 7
Adding Events for Your Location ............................................................................... 8
Pasting from Word: Don't Do It! ............................................................................. 9
Duplicate Post ...................................................................................................... 10
Adding Images to the Media Library ........................................................................ 11
Finding Great Images .......................................................................................... 11
Descriptive Image Titles....................................................................................... 11
What Gets Displayed Where..................................................................................... 12
Category Mapping ................................................................................................... 12
Changing Dates on Posts ........................................................................................ 12
Adding Headline category at a later date ............................................................. 13
Appendix 1: Job Aids................................................................................................ 13
Appendix 2: For the Site Administrator .................................................................. 13
Comment Moderation .............................................................................................. 13
Editing Theme Files ................................................................................................. 14
Changes to the Navbar ........................................................................................ 14
Removing Hours Script on Holidays .................................................................... 14
Editing Location Templates.................................................................................. 15
Database Backups .................................................................................................. 15
Upgrading WordPress ............................................................................................. 15
Upgrading Plugins ................................................................................................... 15
What is WordPress?
WordPress is an open source, state of the art content management system (CMS). Using WordPress
to handle adding content to your website allows a wide range of contributors to add content directly to
the website, with no need to go through IT departments or an appointed web designer. As a
contributor to the website, you've been given a username and password, and using that login
information, you can log in to the backend of your website, add content, and publish it — all without
any special technical skills. It's just about as easy as sending an email with a web-based email
service like Yahoo! or Gmail.
Posting Content
Vocab
When you're adding content, you'll be "adding a new post" or "posting" to
the site.
A Quick Look at Your Site
Categories
Most of the Monroe County Library staff contributors will be adding content only to a select part of the
library website. Most commonly, that will be upcoming events for a specific library branch. When
you're adding content via the WordPress administrative panel, you'll be asked to describe your
content by assigning it to certain categories.
Categories
WordPress knows how to treat different kinds of new posts
Vocab
based on what what category or categories they're assigned
to. Categories are broad descriptors such as Events, Kids, or Staff
Favorites. There are more specific categories, too, such as Big Pine Event
or Key Largo Event.
The category to which a post is assigned tells WordPress where to display that information on the
site, so it's always important to choose the right category or categories.
Take a look at the image below to learn a little bit about how the home page comes together. Notice
that it is mostly a collection of posts from various categories.
As you explore your site, you'll notice that different pages pull in posts from different categories. When
looking at the Big Pine branch page, for example, you'll see that the main headline area shows the
most recent post in the Big Pine Headline category. This set up is echoed for all 5 branch locations.
Events
Your libraries draw in visitors because of your great programming, and
the new website is designed to highlight those events.
Events in WordPress are just a special kind of post. When adding an
event, you'll need to choose the appropriate categories, as well as add a
few additional pieces of information so that WordPress knows that they
need to be treated a little differently. Specifically, they need date, time,
and location information added.
On every page in the site, there's a section of the sidebar that shows the
next 7 or so events happening at all Keys Libraries. In the sidebar, the
name of the event, the time and date information, as well as the location
is automatically pulled from the post that describes that event.
In addition, there's a "read more" link that will allow users to get more
information about that event, and even to leave a comment if they
choose to! It's important for site contributors to monitor comments as
they come in. Often times, visitors may comment to ask for more
information before making a decision to attend an event.
Comments
Vocab
WordPress was originally built as a blogging platform, and as such focuses
on user interaction with the site contributors. When you're looking at a single
post on the site (which you would see when you click on "read more," for
example), there is a space where visitors can ask questions and leave
comments on recent posts. Most web users are experienced with comments
functionality on websites, and many have even come to expect it!
Library Location Pages
Each of the 5 Monroe County Libraries has its own page on the site. On this page, events and posts
relevant to just that library can be highlighted. The Key West Branch page, shown below, showcases
an item from the category "Key West Headline" as well as events for just the Key West Location. It's
important to note that because posts can be in multiple categories, the headline can also be an event,
which would allow you to showcase an upcoming event in a prominent spot! Notice that the sidebar
heading "Key West Events" is a link to a complete list of all scheduled events at the Key West
location.
On each location page, there are a few other important components. Much of this is not accessible for
editing through the WordPress administrative panel. The Contact information that appears above the
upcoming events list, as well as the map and other branch specific items "below the fold" are not
accessible by most contributors for editing. The administrator of the site does have access to edit
these pieces.
The WordPress Admin Panel
Almost all of the work you'll do on the site will be done in the WordPress Admin Panel, which you get
to simply by logging in to the website.
Logging In
1. Go to http://www.keyslibraries.org
2. Click on the Login link below the dark green footer
3. Enter your username and pwd (default username is firstname and last initial - e.g. shellyd,
and password is lastname777, e.g. drumm777) and login. When you first login, you should
change your password.
4. This will take you to the your "Dashboard"
The Dashboard is the jumping off point for your exploration of WordPress. The most important
component here is the menu in the left sidebar. This is where you'll find links to edit your profile, add
new posts and edit existing ones, access the media library, and review incoming comments.
With the exception of the site administrator, when you log in, you can only access content you have
created and there's no way to "break" the site. You should feel free to explore at will.
Adding Events for Your Location
Adding events for your location is something that you want to get in the habit of doing regularly. You
should always try to have at least two weeks' worth of upcoming events listed - possibly even a whole
month's worth.
Adding events for your location is simple. Don't be alarmed by the length of the instructions below!
This is deliberately a very detailed explanation of the process. Consult the Job Aids section below for
the quick-and-dirty instructions.
If you're more visually inclined, watch this video on how to add an event:
http://screencast.com/t/OTUzMDE3ZW
1. Login to the site
2. Add the basic event information
◦ Under Posts in the sidebar, click on Add New
◦ Add the event title in the title area, and an exciting description in the main body
field (the big text box). Use the formatting toolbar to bold, underline, etc as
needed. It's a good idea to give some indication of how long the event lasts in
the description.
Pasting from Word: Don't Do
It!
Handy Tip
Contributors should shy away from pasting content created
and copied from MS Word or any other word processor.
WordPress requires good, solid HTML to work, and
pasting from Word often can break a theme. (It can be
easily fixed, but should be avoided from the get go!)
You're encouraged to compose IN WordPress itself, using
the formatting toolbar to bold, italicize, etc. If That's not
comfortable for you, you have 2 options:
Compose in Notepad, and copy and paste this text into
WordPress
— OR —
Compose in Word, but paste into the HTML view as
opposed to the Visual Editor. This will strip all formatting,
and allow you to format your post in clean HTML using the
formatting toolbar.
3. Select appropriate Categories for the event
◦ Always select the Event category in the category field to the right of the post
◦ ALSO select the appropriate Branch Event category (e.g. Big Pine Event or
Key Largo Event)
◦ IF the event should be the current headline on your branch page,
then ALSO select the appropriate Location Headline category (e.g. Big Pine
Headline). The most recent post in the Location Event Category for your
branch will always display in the highlight section of your branch page.
4. Tell WP that this is an event by adding time, date, and location information in the RS
Event Multiday module
◦ Scan below the post area to find the RS Event Multiday Module
◦ Enter day, month, and time information (note that this uses a 24 hr clock, so a
3pm event starts at 15:00)
◦ Type in just the name of your Location in the location field - e.g. enter "Big
Pine", NOT "Big Pine Branch" or "Big Pine Library"
5. Add an image to the event using an image already in the Media Library
◦ Put your cursor at the beginning of your post
◦ Click on the "add an image" icon directly to the right of "Upload/Insert" above
the formatting toolbar
◦ Click on the Media Library tab at the top of the popup
◦ Click on the "Show" link to the right of the image you want to use (note that
there are several pages of images; use the arrow button to move through other
pages)
◦ Select and copy the image file location from the Link URL field starting with
"wp-content/uploads..." So, if the link URL is http://www.keyslibraries.org/wpcontent/uploads/2010/04/literacyglobe.jpg copy just wp-content/uploads/2010/
04/literacyglobe.jpg. You'll need it in a minute.
◦ Align the image to the left or the right. This will allow the text to wrap around
the image.
◦ Make sure that you're inserting an image no bigger than about 300px wide.
Much more than that and it will overwhelm the post!
◦ Adjust the other values as you see fit, but you can usually leave them at the
defaults
◦ Click "Insert image into post"
◦ The image should now appear in the text edit area.
◦ Look below the post for the Custom Field module. Select "Image" from the
dropdown and paste the location information you copied above into the Value
field. Remember this should start with wp-content/uploads.
6. Publish and review!
◦ Click the big blue publish button in the top right, and review your post once it's
published!
Duplicate Post
Handy Tip
A lot of your events are recurring events, and the ability to duplicate a post
can be a great time saver. To use this feature, simply go to Posts⇒Edit
Posts and find the post you wish to duplicate. When you mouse over the
title, the option to
duplicate the post
will appear.
Clicking on that will take you to a screen where you can make changes to
the post before publishing.
When you duplicate an event, you will need to manually add the new date,
time and location information.
Adding Images to the Media Library
In the steps above, we added an image already in your site's media gallery. In a lot of situations, you'll
want to add an image that's not already uploaded to your site. There are 2 ways to do this. The
simplest is to add the new image while you're writing the post itself.
Finding Great Images
Handy Tip
If you're posting about a particular book, use your library catalog to find
great book cover shots. Remember to click on the book cover thumbnail
image in the item record to get a full size image. The thumbnails won't
work!
For other kinds of posts, consider using Stock Xchng (http://www.sxc.hu/) or
Flickr's Creative Commons Collection (http://www.flickr.com/
creativecommons/) to find royalty free images that are available for use on
the web.
Remember to grab images that are no more than 500px wide, or to resize
the image prior to uploading it to the website.
If you're not sure how to resize an image file, you can use
http://www.resize.it or a similar tool to shrink the image.
1.
2.
3.
4.
Save the file you want to use to your harddrive.
Follow steps 1-4 above.
Put your cursor at the beginning of your post
Click on the "add an image" icon directly to the right of "Upload/Insert" above the formatting
toolbar
5. Choose Select Files
6. Navigate to the image on your harddrive and upload
7. Once you've done this, the process is the same as that outlined above, starting with "Select
and copy the image file location..."
Descriptive Image Titles
Good Idea
When you're adding new images to the media library, make sure the image
title is descriptive. Remember that you and your colleagues may end up
searching through here to find great images for your posts in the future. An
image title like "img_000203009.jpg" is a lot less helpful than one like
"Smiling woman reading to young girl."
If you want to upload images when not writing a post, simply click on the "Media" link in the left menu
of the Admin Panel. Through that, you can upload multiple images at once.
What Gets Displayed Where
Category Mapping
As explained above, each post you make can be displayed in certain pages of your site depending on
what categories you assign to the post. Here's a rundown on what appears where:
Page
Content Displayed
Home Page
Headline Space: Hot Across the Keys (1 most recent post only)
News Across the Keys: 3 most recent posts in News Across the Keys
Below the fold: 5 most recent posts in Tom's Blog, Hot Across the
Keys, From the Director's Chair, and News Across the Keys
Location Pages
Headline Space: Most recent post only in Location Headline (e.g. Big
Pine Headline, Key Largo Headline)
Below the fold: 4 most recent posts in Location Headline
Teen Page
Headline Space: Most recent post in Teen Headline
Kids Page
Headline Space: Most recent post in Kids Headline
Using the Library
All posts in FAQs (10 per page)
Staff Favorites
Posts in Staff Favorites (10 per page)
Keys History/Tom's Blog
Changing Dates on Posts
When you write a post, it automatically will date that post for you with the current time. That's helpful,
but since many of the pages show only the most recent post in certain categories, occasionally you
may want to manipulate the dates on posts in
order to promote a particular post to the top of
some page.
1. Head to Posts ⇒ Edit
2. Find the post for which you want to
change the date and click on the post title
3. To the right of the post content area, find
the "Publish" module and click on Edit
next to the publication date
4. Enter the new date and click OK, then
Update
This also allows you to future date posts. This will
suppress posts until the publication date rolls around. That's a great tool for keeping the site fresh
even when some contributors are on vacation!
Adding Headline category at a later date
Good Idea
Another way to promote items to the Headline space at the right time is to
wait to add the "Headline" category until you want the post to display. So, for
example, if the Marathon Library contributor writes up all the Marathon
events for a month, he should assign them to Events and Marathon Events
categories (and teens, kids as necessary), and he should, when possible,
publish them in the order in which they will occur. Then, when he's ready to
promote one of them to the Headline position on the Marathon page, he can
log in, and edit the post and add the Marathon Headline category to it.
Appendix 1: Job Aids
The job aids linked below are half page PDFs that can be printed out and kept by your workstation for
a quick reminder of how to complete the two most common tasks you'll need to perform to keep your
website current and engaging.
• Adding Events to Your Website
• Adding Posts to Your Website
Appendix 2: For the Site Administrator
Comment Moderation
The site admin will receive an email with
every incoming trackback or comment.
Akismet, your spam blocking software,
should catch most spam posts before
you're even bothered with them, but it's
a good idea to review incoming
comments anyway. The current settings
allow for comments to be posted
immediately without moderation by the
site admin. This is great for encouraging
discussion, but means you need to be
diligent about reviewing incoming
comments for inappropriate language,
etc.
In addition to email notifications, when
you log in to the site, your dashboard
will display recent comments for your review. I'd recommend checking these once a day when you're
in the office. Click on the comments link will allow you to view all comments and unapprove or report
as spam any comments that should not be displayed on your site.
Editing Theme Files
Your customized WordPress theme consists of more than a dozen individual php files that come
together to form a cohesive site. Editing them can be done using Dreamweaver (or another HTML
editor) to edit files stored on your computer which you can then upload to the site, or it can be done
directly on the server through the WordPress Admin Panel.
If you choose to edit on the server (it can be more convenient for small changes), make sure that you
do regularly download the site files to your harddrive to maintain a current backup.
Changes to the Navbar
The navbar is an 2-level unordered list (<ul>), and is contained in the theme file navbar.php. Editing
that one file will affect the navbar on all pages across the site, so you only have to make the change
once for it to appear sitewide.
1. Login to the site
2. Head to Appearance ⇒ Editor
3. Select navbar.php from the list of theme files on the right
4. Edit the list directly in the edit view, or copy and paste into Dreamweaver or another editor to
make changes, then paste back into the edit view
5. Click update and review the site for your changes
6. You can also download, edit, and re-upload if you choose not to edit directly on the server
Removing Hours Script on Holidays
The hours for all locations display on the home page by means of a script embedded in the Main
Index Template (index.php) file of the Arthemia theme. To remove it:
1. Login to the site
2. Write a new post with the Holiday Hours and promote it to the Hot Across The Keys Headline
space
3. Go to Appearance ⇒ Editor
4. Click on Main Index Template in the listing of theme files on the right
5. Look for this text:
<div id="hours">
Code Snippet
<img src="<?php echo get_option('home'); ?>/wp-content/
themes/arthemia/images/todayshours.png" width="186px"
height="21px" alt="Today's Hours" />
<br />
<script type="text/javascript">greet();</script>
</div>
6. Delete that code and save the file.
7. When the Holiday has passed, promote a new Hot Across The keys post to the headline
space, and paste the code snippet above back into index.php directly below the line <div
id="featured">
8. Save and review the homepage.
Editing Location Templates
In the event that you need to change information on one of the Location Templates, you can do that
using a similar approach.
1. Login to the site
2. Head to Appearance ⇒ Editor
3. Find the location template in the list on the right (keylargotemplate.php for example) and
click on it to bring up the code in the edit view
4. Make your changes live on the server, or copy and paste into a text editor, edit, then paste
back in to the edit view.
5. You can also download, edit, and re-upload if you choose not to edit directly on the server
Database Backups
Database backups are automated in your WordPress implementation and emails with zipped MySQL
files are sent daily to the site admin. The email for this can be changed at will by going to Tools ⇒
Backups (perhaps change to a gmail address for the library?). In addition, manual backups can be
made here. This only backs up your database files. Changes to theme files should be saved
separately.
Upgrading WordPress
WordPress is upgraded on a regular basis, and it's always a good idea to upgrade when a new
release is available. If a new release is available, you will see a note in one of two places as indicated
below:
To upgrade:
1. Once logged in, create a manual backup at Tools ⇒ Backups
2. Follow the upgrade link on the homepage or Tools ⇒ Upgrade
3. Allow WordPress to run the automatic upgrade
4. Check the site to make sure everything looks okay
If trouble arises, contact Shelly ([email protected]) or consult the WordPress Codex
(http://codex.wordpress.org/) for help in troubleshooting.
Upgrading Plugins
As developers release new versions of plugins, notifications similar to those for upgrading WordPress
itself will appear. As above, backup the database, run the upgrades, then check to make sure
everything on the site is fine. If trouble arises, contact Shelly ([email protected]) or consult the
WordPress Codex (http://codex.wordpress.org/) for help in troubleshooting.