Website Maintenance Tips

From FreekiWiki
Revision as of 20:46, 24 June 2008 by Shawn (talk | contribs) (centering text)
Jump to navigation Jump to search

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.

Editing Pages

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

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 -->
  • Centering, right, left, justify text. Check out the link to the CSS 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="justify">Text forms a block.</div>

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 required for each image. The title is displayed as the short description of an image in the media library.
    • 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.
Retrieved from "http://wiki.freegeek.org/index.php?title=Website_Maintenance_Tips&oldid=32992"