WordPress How-to Guide for Librarians!
This guide serves multiple functions. First and foremost, it is a tool that will help ensure that all of your behind-the-scenes information is consistently organized and simple to access. It also provides instructions on how to alter and update various parts of the North Tonawanda Public Library website for users who are less familiar with WordPress.
At its heart, WordPress is blogging software. This means that it is designed to display posts in chronological order, much like a diary. However, WordPress also offers the option to publish content on pages which are static and “… live outside of the normal blog chronology, and are often used to present information about yourself or your site that is somehow timeless” (http://codex.wordpress.org/Pages). The NTPL website incorporates both pages and posts. Pages have been established for sections such as “Kids”, “Teens”, and “About the Library” – basically all of the sections that will not change much over time. You probably will not find yourself having to make a new page very often. On the other hand, you will be making a new post for events, announcements, news, and anything else you want to show up on the main page. If you look at the home page, you can go back and read all of the previous posts in order. For more information on the difference between pages and posts, visit WordPress’s Terminology Related to Content page.
When adding a new post, there are several things to keep in mind. First, be sure to give your post a clear, descriptive, and unique title (for example, “New Books, July 2011”). This makes searching easier on a user and is simpler to read if the posts are displayed as a list elsewhere on the site.
Also be sure to appropriately label your post with categories and, if appropriate, tags (more on the difference between categories and tags below). You can do this in the same screen that you type the blog post. On the right-hand side of the entry is a box labeled “categories”. Simply select the correct ones!
This is especially important because the entire front page of the website is governed by categories – if a post is labeled with the category “new materials” it will show up in the new materials section on the right or if it is labeled “events” it will show up in the calendar – all without any extra work from you as long as you label it!
The sections of the home page are broken up as follows:
- If you want something to show up in the slideshow it has to have the “announcement” label”. Only the 4 most recent posts with this label will be displayed (this can be changed in the Theme Options).
- If you would like for a post to appear in the events calendar, it must be labeled an event and you must fill in the event information at the bottom of the new post page (more on that in Creating an Event)
- All posts except events, announcements, and new materials are displayed in the “Newest Blog Posts” section
- Only posts labeled “new materials” will appear in the “New Materials” side bar
It is also a good idea to add a “Featured Image” to new posts, because this ensures that there will be a thumbnail picture if the post is displayed on the home page.
New pages can be added via the “Add New” section of the “Pages” tab on the dashboard. Pages are much like posts however they cannot be labeled with categories or tags so you must ensure that there is a link to them somewhere in the navigation. It is also possible to make sub-pages by using the “Page Attributes” box on the right of the page editing screen. If you would like your page to appear under the news page, simply designate the news page as its parent page. The order box allows you to move it up and down if there are several sub-pages under one parent page.
Categories are used to denote regular topics that you blog about. Thus, something like “new dvds” is a good category because there are many posts about new dvd’s. Tags are more specific and are designed to describe a post. If, you create a post about new dvd’s and want to specifically focus on Oscar-nominated dvd’s, something along the lines of “New 2011 Oscar Nominee dvds” might make a good tag. Essentially, tags are used for description and when there aren’t enough posts using this label to warrant a category.
All posts should be labeled with one or more categories in order to make posts easily accessible. It is not necessary to add tags to posts but it can be helpful.
Assigning a category or tag to a new post is very simple. Once you are on the “Add New Post” screen, there will be two boxes on the lower right-hand portion of the page. The Categories box contains a list of all existing categories. Either check the applicable categories or choose “+ Add New Category”. Add tags by simply typing in the phrases you would like to use as tags in the Post Tags box.
It is helpful to have a consistent labeling strategy for categories and tags. Some plugins allow you to manipulate these aspects of your blog and it can be difficult to remember which labels you have capitalized, which you have added punctuation too, etc. Thus, for ease of use, all categories and tags on the North Tonawanda Public Library website should be written in lower case letters with no punctuation.
Posts only appear in the slideshow if they are labeled with the category “slideshow” and/or “announcement”. We chose to do it this way (rather than have all events show up or all library news show up) because it gives the librarians more control over what appears in the slideshow. Only the last 4 posts with these category labels will be shown. To change this number, go through the WordPress Theme Options (read more about this in How to Change the Home Page).
To make an image appear in the slideshow, you must include a featured image with the post. To do this, use the Featured Image box on the right-hand bottom portion of the page when editing the post. It allows you to upload or choose an existing image. Rather than inserting the image into the post, there should be a button just to the right of this option called “Set as Featured Image”. Choose this and you’re all set!
Be sure that the image you are adding is close to 490px wide and 225px tall (the default slideshow size) before uploading it. This ensures that the image will not be stretched or distorted when it appears in the slideshow.
When you create a new post, you can choose to make the post an event. Doing so automatically adds the category “event” and forces the post to appear in both the event list and on the event calendar. To post an event, find the Events menu under Posts and add a new event. Remember to set a featured image. Fill in as much of the information as is relevant. Publish the post and you are all set! The primary limitation of this function is that you cannot create recurring events.
Keep in mind that if you want the event to also show up in the slideshow, you need to follow the directions in the Adding a Post to the Slideshow section as well.
- The first time you add an image, upload it using the upload/insert menu. Once it is in the site’s media library, you can locate it again. More detailed info located at the WordPress Support site.
- Images should link to another web element or not be clickable at all. These aspects can be edited when you upload the image or if you go back and edit it.
- When adding images, you will have the option to add an “alt” or alternative text. To help blind or vision impaired users, it is very important that you add descriptive alt text to every image added. While not strictly enforced, alt text is a requirement of the ADA-mandated web accessibility clauses that apply to all government-funded institutions’ sites. To do this just add it in the upload menu. You can also left click on the image when you are editing a page and you will see a box to add alternate text. Make sure to keep the alt text brief and descriptive or it will become problematic.
The Arras theme that is currently enabled allows for two navigation menus – one at the very top of the page and one below the header. Currently, the top bar includes links that are important but that a user probably will not need to look at too often (such as the “About” page). The main navigation under the header includes links to the most commonly used pages.
To change the navigation, use the “Menus” option that is found under “Appearance” on the WordPress dashboard. If you wish to add a page to the existing menus, simply choose a page from the list of existing pages or type in a custom link (the link to the catalog is an example of this). You can click and drag menu items to change their order. You can also create sub-menus by dragging a menu slightly to the right. When you release it, it will click into place and become a drop-down menu.
Currently, the North Tonawanda Public Library website is using the Arras theme. This theme is very flexible and provides users with many different options. To edit these options, choose “Theme Options” under the “Arras” tab on the dashboard.
Many of the options are self-explanatory or do not need to be changed much so we will focus on the ones that are going to be more prominent in day-to-day operation of the website.
The “Home” tab is where you can manipulate what types of content appears on the home page of the website. Under each category – Slideshow, Featured Posts #1, Featured Posts #2, and News Posts – you can change what types of posts appear in that section. For example, if you wanted to make it so that only posts about audiobooks appeared in the slideshow, you would use the drop-down menu next to “Stickied Posts/Categories” to choose audiobooks (this feature seems to be a little buggy – you have to click right on the arrow or else the menu won’t stay open). You can also change the titles of these sections and number of posts displayed. Currently, the posts labeled with the following categories appear in each section:
- Slideshow: “slideshow” and “announcements”
- Featured Posts #1: A single post labeled “welcome” that contains the welcome blurb
- Featured Posts #2: All Posts except “slideshow”, “events”, “announcements” and “new materials”
- News Posts: A single post labeled “shelfari home” that displays the Shelfari widget on the home page
In each of these sections (except the slideshow) there is also an option labeled “Tapestry (Display Type)” that changes how the posts in the section are displayed. The options are:
- Node Based: Node posts are displayed as a small thumbnail with an excerpt of the post below. They are set out in a sort of chart formation with two nodes per line. They also display a link that will take users straight to the comments section of that post.
- Per Line: Per line displays a simple list of recent posts. It shows the relevant category tag to the right of the click-able post title.
- Quick Preview: These posts are similar to node posts but are displayed one per line and do not include a link to the comments section of the post. Instead they are simply a thumbnail and an excerpt of the post with a large “Continue Reading” button below.
- Traditional: These posts display the entirety of the post as well as any images are included. This is not ideal for posts that include a lot of pictures (such as the new dvd posts) but would be great for shorter announcements and informative text.
Under the “Design” tab you can alter the site’s color scheme, change the entire site to a one- or two-column layout, and change the custom logo. These options are a handy way to give the site a fresh look once in awhile without too much work.
The “Thumbnails” tab allows you to change the sizes of the pictures showed with different posts. It also includes a handy FAQ at the bottom in case you are having trouble with the thumbnails being the wrong sizes.
To change the information in the sidebars of the page, visit the “Widgets” section of your dashboard, found under the “Appearance” tab. The “Primary Sidebar” is the one that displays on the left and “Secondary Sidebar #1” displays on the right. The “Footer Sidebar #1” displays at the bottom of the page but above the footer already built in to the theme (“Theme Options” is where you can change the bottom footer). The two “Bottom Content” sections display only on the front page below the Featured Stories and Headlines sections that are built into the theme automatically.
Sidebar widgets are essentially drag-and-drop. So, if you want one of the elements listed on the left part of your screen in a given area, simply drag it to that area and let go. You can include as many Widgets in a sidebar as you would like.
It is also important to note that if you are including images in either of the sidebars the images will not re-size and will instead just hang over the edges of the column. To avoid this, be sure your images are no more than 200 pixels wide (either edit the image before uploading it or WordPress gives you the option to change the size when you upload it).
Normally, all widgets display on every page. However, we have installed a plugin called “Widget Context” that allows you to choose what pages a widget shows up on. In this way, we were able to make sidebar navigation for the teen, kids, and this page. This tool is fairly simple to use. Each time you add a new widget, there will be an extended box under it asking what pages you want to show it on or hide it on. Either check the appropriate boxes or copy a URL into the box.
- Akismet – filters spam from comments
- Blogger Importer – was used to import blog posts from previous NTBlog
- Collapse-O-matic enables collapsible menus
- Contact Form Plugin – can be used to create simple forms such as the one on the Suggest an Item for Purchase page
- Google Analyticator – tracks users and visits to the site
- The Events Calendar – allows posts to be turned into events and thus automatically displayed on the front page and added to a calendar
- Widget Context – allows user to control which pages widgets display on
- WP-PageNavi – changes the navigation between pages of the blog found at the very bottom of the page. WordPress’s default is “Next” and “Back”. This allows users to jump to a particular page
We could not get the website to update to WordPress version 3.2.1 for some reason. The automatic update failed and a manual upload of the upgrade resulted in WordPress’s “White Screen of Death” (the website was totally blank – no content at all). If you wish to continue trying to upgrade, be sure to back-up the site before doing so in case something goes wrong! Here is WordPress’s information on how to back-up. Also, keep in mind that upgrading will erase any custom editing we have done on the site’s CSS and PHP files.
The easiest way to edit this banner is to use Photoshop.
I sent Shannon the PSD (Photoshop) version of all the main logo, which you can use as a basis to make any other logos you might need. You should be able to just double click on the font and change it to what you need, and then use the crop tool to decrease the size of the banner appropriately.
Just in case that doesn’t work, I’ll show you how to replicate the font effect below:
Font: Trajan Pro
Font Color: white (you can change the color by highlighting the font and then selecting the color box on the left-hand side of the screen)
On the right-hand side is the layer box. Right click on the text layer and click “Blending Options”
A dialog box will pop up. The only blending option you’ll need to select is “Drop Shadow,” and fill out the boxes so it looks like this screen:
If you do not have any one who is able to use photoshop, you may contact me at firstname.lastname@example.org and I will do my best to help you.
- Clker – clker.com – Good for vector art and clipart
- Microsoft Office — http://office.microsoft.com/en-us/images/ — Good for clipart and photos
- Open Clip Art –openclipart.org – Good for clipart
- Clip Art ETC — http://etc.usf.edu/clipart/ — Beautiful old-fashioned or historical looking clipart, mostly line drawings
- You can also use google images (go to advanced search and look for images that are labeled for reuse).
With many of these sites—it’s most important when using google images—it’s important to give the site or author credit. You can do this by putting a link in the link url after uploading the image, and/or by giving credit in the caption.
- Periodically check to make sure the links on your pages are not broken and still work.
- If a link ever changes (such as the link to the catalog service) make sure you change it on every page it appears on and not just the main link.
- When you create a link you will also have the option to enter a title for the link. This is the title that pops up when you hover over the link, so it is important that you enter a title to aid disabled users.
- When writing the text in a post that the link will appear as, use meaningful text. For example, if you are linking to the catalog, you would want the link to be the word “catalog” instead of the more general phrase “click here.”
- Also, make sure that the reader can navigate around easily- they should always be able to get back to the main page from whatever page they are on.
- Be consistent with how you name pages and areas of the website. For example, the page that lists different databases should be linked to on other pages as “databases” and not other terminology (such as “online resources”). Be consistent.
- Try to avoid library jargon and professional terminology in favor of simpler terms that every user can understand.
- It is really helpful to perform user testing, either through watching how real library users view and use the web site (i.e. you might ask them to find a basic piece of information like directions to the library and see how easily they can find it) or through a survey. Even watching a few real users actually use the site can give you an idea of what works and what to change.
- Make sure a link to contact information is on all pages so users know how to get in touch with you. This contact should go to the person maintaining the website
- Make sure you answer emails and questions promptly so users have a positive user experience.
- It helps to be aware of what disabled patrons struggle with when accessing the web so here are a few points to consider:
- Visually impaired: often struggle with unlabeled graphics (their screen readers can’t read it) and lack of keyboard support.
- Hearing impaired: can struggle with lack of captioning on audio and video elements.
- Mobility impaired: can struggle with lack of keyboard support or problems accessing a complex navigation menu.
- Cognitively impaired: can have problems with lack of consistent structure, complex presentation, and flickering/strobing graphics.
- Make sure to test the website on different browsers to see what home users are seeing. Some options: Internet Explorer, Safari, Mozilla, and mobile browsers (such as those for iPhone and Android).