Website Maintenance Tips

First, some links to important documents.

• We're using Wordpress v2.5. For documentation on Wordpress, go to http://codex.wordpress.org/
• Our stylesheet lives at http://test.freegeek.org/wp-content/themes/freegeek/style.css. Mess with that document in order to make changes to how text, images, etc. behaves globally.
  • Also check out http://freegeek.org/index/elements/ to see examples of all the CSS styles and how to use them in your code.
• If you're already logged in and want to edit the site, go to http://freegeek.org/wp-admin/
• All new website maintainers should get an html refresher (or learn it altogether). Some online resources:
  • Basic html - this document is pretty old (ported from the old HowTos!), but has some quick-and-dirty info
  • http://www.w3schools.com/html/html_intro.asp - straight up html lesson/refresher
  • http://www.accessv.com/~email/webpages/ - html tutorial, more for those who've never learned html before
  • http://www.htmlcodetutorial.com/quicklist.html - reference list of all html markup tags

Editing Pages

• We've disabled the visual editor for the site. Believe me, this makes things easier. If the visual editor wasn't disabled, many elements and plugins on the site would break. This means that all maintainers need to know at least the basics of HTML. Look above for resources.
• Generally, to edit pages, login and go to Manage -> Pages, then click on the page you'd like to edit.
• If you're logged in, you'll see an "edit" link near the page title of each page (for easy access to editing functions).
• "Keep private" checkbox means that only those with editing logins will be able to see the page
• "Include this page in user menus" checkbox will make the page title show in the main nav or sub-nav bars. The site is only set up to show 2 menu levels, so if you're looking at a 3rd-level page like /about/contact/directions and you check this box, you'll break the nav.
  • If you ever do want to show a 3rd level menu, you should consider turning the sidebar menu back on and configuring it as you'd like.
• Under the html box on each page you'll find some stuff. Generally, don't touch the contents of these boxes unless you know what you're doing (or you're ready to break things in the name of "science" or "learning" or somesuch). Here's what some of these things do:
  • Custom Fields: This is for indicating to the software which custom configurations (or in some cases, which plugins) to use on the page.
  • Comments and Pings: these have been turned off for the whole site, even if there boxen on each page are checked.
  • Password Protect this Page: seems self-explanatory. Generally not recommended for this particular webste.
  • Page Parent: This messes with the navigational structure of the site, and tells the software which page is above the one you're working on in the tree. For example, "Volunteer" is the page parent of the page "Adoption", and the URL is therefore freegeek.org/volunteer/adoption. Ya? Ya.
  • Page Template: activates a custom template for that page
  • Page Order: this also messes with the navigation, but less than page parent. This changes where the page lands within the navigational level it's in, and how it's displayed in the menus at the top of the page. The first (leftmost) menu listing is 0. For example, on the "Links" page, "Recycling and Reuse"'s page order is 0 and "Friends and Resources" is 1.
  • Page Author: obvious, and not needed on our site because it's not a blog. All references to page author on the site have been removed.
  • Simply Exclude: this is a plugin thing.

Text Editing

• When using the html editor in wordpress, keep in mind that even this editor has some visual editor qualities. Specifically, line breaks are treated as new paragraphs, so be aware. This means that if you're copying text over from another source, you'll need to remove the line breaks that inherently are copied from one text editor to another. If you don't? Broken code/funky formatting.
• WP is finicky about commenting stuff out. The trick is putting the comment code within html tags if there are any. A-like so:

<!-- <p>This would totally break stuff.</p> --> (we're imagining you've used paragraph tags.)
<!-- p>This would be commented out.</p --> 
<!-- This would be commented out as well -->

CSS Elements

• Again, look to the top of this page for links to our stylesheet and element examples.
• Centering, right, left, justify text. Check out the link to the Free Geek stylesheet above to see details. Generally, you'll need to use a div tag (we're gettin' into CSS stylin's, kids!):

<div class="center">Text to be centered.</div>
<div class="right">Text begins from the right side on each line.</div>
<div class="left">Text begins from the left.</div>
<div class="indentleft">Text makes an indentation from the left side of the page</div>

• • Does the text look funky after you've added these divs? A little too small, perhaps? It's because, in wordpress, divs are finicky. Just make sure to give the div notations lots of space in your code:

<div class="center">

Content

</div>

Next paragraph.

See the /volunteer/internships/descriptions page for lots of examples (the "indentleft" in particular).

Images

• Can be uploaded from any page a-like so:

1. Click on "Add Images" above the text editing box on the page you'd like to edit
2. If you want to upload an image, do it there
3. If you want to add an image that's already been uploaded, click on the media library tab. Choose the image you'd like, and set the title, where you want it on the page (right, left, center) and the size.

• Sizing. Generally, it's a good idea to use the medium sized image in order to prevent the long load times that site viewers would experience if full-sized images were used. If you choose medium or thumbnail and try to increase the size, the image will become pixelated. Remember, though, that bigger images lead to longer load time.
• Placement. Once the image is on the page, be sure to include style="float: right;" (or left or center) Otherwise, the image will float above or below the text.
• Where the images (and other uploads) are saved: this is useful to know if you want to link a photo to a "hidden" photo behind it (like on the staff page). They're kept in directories sorted by date: /wp-content/freegeek-uploads/<year>/<month>/<filename>. Look in the media library listing for the photo you want hidden to find its specific URL.
• All images on pages have been linked to the image file itself. This means that when it's clicked on, the user will view the full size of the image. (The other option is to link to the image's own page, which usually has room for comments, etc. We don't want comments, so we've linked to the image directly.)
• Titles, descriptions, captions. These fields show up when you look at an image in the media library.
  • Titles are displayed as the short description of an image in the media library. The title also pops up when a website viewer mouses over an image. Generally, this feature seems extraneous and distracting for a site like ours. All titles have been removed from images: do this when inserting an image into a page through the media library or by deleting the title tag in the html editor.
  • Captions show up as the alt text for images. Our site is set up to automatically pull the caption data to show up underneath photos. If you don't want a caption under a photo, don't fill this field in.
  • Descriptions appear only on the image's individual page. We've bypassed this page on our site for simplicity.

Media Gallery

The /media/multimedia page holds some print-ready images for journalists to use. This gallery is created using a special bit of code. The code is put into action by the [fg-gallery] bit you see in the html when editing that page. Clicking on any of the thumbnail images will link directly to a high resolution version of that image.

To upload images to this gallery, just do it from the page like normal. The new image should show up in the gallery. The gallery may be opened for editing by clicking on the "Gallery" tab after you've clicked on the media library icon from the html editor. Images in the gallery are easily reordered by clicking and dragging from the gallery-editing view.

User Roles

Here's a summary of standard wordpress user roles:

• Administrator - Somebody who has access to all the administration features
• Editor - Somebody who can publish posts, manage posts as well as manage other people's posts, etc.
• Author - Somebody who can publish and manage their own posts
• Contributor - Somebody who can write and manage their posts but not publish posts
• Subscriber - Somebody who can read comments/comment/receive news letters, etc.

For more info, go to http://codex.wordpress.org/Roles_and_Capabilities

Since our website focuses more on pages and the person who made the post or page doesn't matter as much, different roles have been set up for us:

• Administrator - can edit everything and everyone. This includes code, plugins, and themes.
• Maintainer - able to edit/delete/publish posts and pages, as well as create and edit users
• Page Author - able to edit, delete, and publish posts and pages
  • This role is intended for staff maintainers who'll pretty much stick to their own pages when editing.
• Post Author - able to edit, delete, and publish posts only
  • This role is intended for beginning volunteer web maintenance helpers
• Viewer - able to read posts and pages

If you're an administrator, you can change the features of each role (or create a new role) here: http://test.freegeek.org/wp-admin/users.php?page=role-manager/role-management.php This fine-grain role definition feature is enabled by a plugin: http://www.im-web-gefunden.de/wordpress-plugins/role-manager/

There's a plugin installed which automatically disables the visual editor for all newly created users. Even if their "enable visual editor" box is checked on their user settings page, the visual editor will not be enabled. Just trust us, this is for the best. See the top of this page for places you can go online to brush up on your html.

Calendar

• Our calendar is a google calendar entered into the theme through an iframe.
• To add or edit events to the calendar, you'll need to be invited by an admin of the calendar and have a google account.
• View the calendar at http://freegeek.org/calendar
• If you ever want to change the page that the calendar appears on, please be sure to contact someone who knows how to edit the theme.
• There's another google calendar plugin that's installed that displays the events as a list. It's called "WPNG Calendar Plugin" and would be handy if you ever, say, wanted to display calendar events in the sidebar.

Webforms

• Webforms are run by a plugin called Contact Form 7: http://ideasilo.wordpress.com/2007/04/30/contact-form-7/ is where you'll find instructions and faq.
• Editing the forms is pretty straightforward: Settings -> Contact Form 7, then pick the form you'd like to edit. The code is simple to learn.
• A single line of code is given on the form editing page. This line code is then pasted into the html entry box on the page where the form should go.

Posting jobs

• Free Geek generally copies page source from job description wiki pages and pastes it into the website for wider public display. Please keep the following in mind when enacting this process:
  • Delete divs
  • Delete body tags
  • Check headings: there should be no h1 on the page at all
  • Paragraph tags aren't necessary in wordpress, even in the html editor. WP makes line breaks into paragraphs. This means you have to be sure to remove unwanted line breaks from your code (copying code over from another program can cause issues this way, so be diligent.).
  • WP is finicky about commenting stuff out. The trick is putting the comment code within html tags if there are any. A-like so:

<!-- <p>This would totally break stuff.</p> --> (we're imagining you've used paragraph tags.)
<!-- p>This would be commented out.</p --> 
<!-- This would be commented out as well -->

Welcome and Contact Boxen

These boxen show up on the first page (welcome) and all pages (contact). To edit these, go to Design -> Widgets. They're text widgets. Only admins have permissions to change these boxen. In fact, the Welcome box is made mostly of images and not straight html with links, so those who change it should know what they're doing.

News, media coverage, and press release posts

Media coverage, news, and press releases should be entered into the site as posts. Each of these categories of post show up on the site in its own place: news on front page and about page, media coverage on /media/coverage, press releases on /media/pressreleases. Our site is set up to display a specific number of each of these category posts on these pages, and the posts' display has been edited to take out stuff like author and date. Each category also has an archives listing, and each post has its own individual post page.

So, in summary, each category (News, Media Coverage, and Press Releases) shows up on a "latest posts" page, in the archives, and on its own individual page. A single news post also shows on the index of the site.

Please remember the following when creating posts:

• Don't forget to categorize each post!
• Don't use headings within posts, as this'll break the heading structure on archive pages. Instead, use strong and em tags.
• More tag: use and use well. You've probably seen this function on blogs before: the front page of the blog shows truncated posts, then you can click on "more..." and go to the individual post page. Welcome to blogging technology! If you write a longer news or media coverage item and only want the beginning of the post to show on the "latest posts" page, mark where you want the break with the more tag (it's one of the buttons in the html editor). For example:

Example news post.  It'll show up on the front page and stuff.  
Viewers of the front page will see this section, but
<!--more-->
will have to click the "more" link at the bottom of the post to see 
this astounding follow-up to the information above.

• Some under-the-hood stuff. On the About, Press Releases, and Media Coverage pages, you'll notice some info in the custom fields. "fg_cat_id" is the category of the posts that will show up on this page. "fg_numberposts" is the number of posts that'll show up on the page.