COA Wordpress Website Training – Introduction – Level 1
1/31/2013 - jmckenna
Logging In:
GO TO: http://alameda.peralta.edu and scroll to the bottom of the page and click on the login link in
the footer.
You will need to meet with the main site administrator (Jane McKenna – jmckenna@peralta.edu) to setup a username and password to access the site and be given permissions for your area of the site. Email Jane to set-up an appointment. For security purposes, every 30 days you will be prompted on login
to change your password. The password must be a minimum of 10 digits long and use a combination of
letters and numbers and symbols. If you forget your password, there is a link on the login page to have
it reset and e-mailed to you.
Browser – when logging in to edit your site, you should NOT use a browser that is more than two
versions old or risk security of your site and functionality. If you are using an old browser, you will
receive a warning when entering your Dashboard that your browser is out of date, be sure to ask
campus IT to update your browser immediately. As of the date of this documents creation, the optimal
browsers to use are Internet Explorer 9 (or greater, this version requires Windows Vista or Windows 7)
OR Mozilla Firefox 12 (or greater) OR Chrome 10 (or greater)
Training Materials:


Intro to using Wordpress for COA site – VIDEO TUTORIAL at http://youtu.be/uR4l9lPdRQA this is Youtube video created by Jane that you need to watch before meeting with her to get
login and instructions. It covers all the basics that you need to get started.
Additional Training Videos and Materials – such as this handout, will be posted on the Website
Committee’s Training page at http://alameda.peralta.edu/website-committee/website-trainingmaterials
Overview:


Once you are logged in, click on My Sites, and then the Dashboard link under the name of the
site.
The main areas that you will be using in the Dashboard for your site are:
o Pages
o Menus (under Appearance)
o Media.
I highly recommend that you don’t touch anything else without checking with Jane. Repeat …
don’t touch anything else without checking with Jane. You break it … you buy it . Don’t load
plugins without checking. There is malicious code out there and incompatible plugins can wreak
havoc on your site.
1
Pages:

To edit a Page: click on Pages, click on the title of the page to edit, use the edit buttons on the
page to make changes and click on the Update link. Common tasks when editing pages:
o Adding a link to another webpage (inside or outside of the site) – highlight text within
the page to turn into a link, click on Insert/Edit Link button, type in http address for
link, type in a title and click the update link button.
o Copy and pasting content into the page – copy the content you want to paste, click on
the Paste as Plain Text button, paste the text into the Plain as Text pop-up box, and
click on Insert button. This strips the content of any other formatting or styles to allow
you to start with a clean slate. If you copy and paste without doing this, the font sizes
and layout may be messed up. Do not copy and paste links to content in the old site
since these will break when we go live and the old site is taken down. Instead search the
new site for the equivalent page and add a link to that new location.
o Adding a link to a document (such as syllabus, handouts) that you will upload from
your computer – First open the page (under Pages) where you want to link to the
document to appear, place the cursor where you want the document title and link to
appear on the page, click on the Add Media button, click on the Upload Files link, click
on the select files button, find the file on your computer and click on it, click on the
open button, on the right side of the screen type in the title you want to display on the
page into the title box, click on the Insert Into Page button. You’ll be taken back to the
page where you are inserting the document link. Click on the blue Update button (right
side of screen). Now you can see your changes by clicking on View Page (top of screen)
and try clicking on the link to test it. If you are replacing an old document with a new
version of that document, be sure to go into your Media Library and delete any old files
that you are no longer using. Leaving unused files in your Media Library will use up
memory and slow your site down.
o Linking to another section on the same page – is called anchor links. It takes two steps,
first, create an anchor on the place you want the link to go to on the page and then, add
a link to it. To create an anchor – place the cursor in the spot on the page where you
want the link to go, click on the Anchor button in the editor, type in a word to use for
the named anchor, and click on the Insert button. Then, to create the link to this
anchor, highlight the text that will be the link, click on the Insert/edit link button and
type the # symbol followed by the anchor name you used in step 1 (with no spaces
between the two). Click on Add link button, click on the Update button, View Page and
then test it to make sure it worked.
o Use titles to highlight and break up content into paragraphs of information. Best
practices for web recommend breaking up information into sections and then bolding
the section titles (can also give paragraph titles a header format of Header 4). Keep in
mind lengthy pages that require lots of scrolling are not recommended. If you have so
2
much info that the user has to scroll down a long way, consider breaking this info. Into
multiple pages with a landing page that links to these pages. I recommend you consider
consulting with Jane on how to best organize your content since she has been trained
on this by the developer … not to mention she is a librarian.
o If you make a mistake, so long as you haven’t updated the yet, you can click on the
Undo button (arrow pointing back) to undo the last edit. Also, at the bottom of the
page lists links to previous versions of the page. You can view revisions and identify
which should be considered the most recent.
o When done editing, always click on the Update Button to Save changes (right side of
screen) and then click on the View Page button (very top of screen) to check your work.
If you need to make further changes, click on the Back arrow in your browser to go back
to the editing screen for the page.
o Adding a Page – there are two steps to adding a page – first add the page and then add
a link somewhere in your site to that page (on another page OR as a menu item in the
left side navigation area). To add a page: click on Pages, Add New (button at top), Type
a title in the title box (top box), add your content in the main text box (see above for
editing info), in the template dropdown area on the right side of the screen choose 2
Column Page (any other choices of templates require a meeting with Jane to assist with
set-up and give brief training), if the page is a subpage under another page use the
parent drop down to select the parent for the page (most cases you don’t need to do
this), click on Update button. TROUBLESHOOTING TIP: When you go to View the Page,
if the left side navigation links are missing, this means you forgot to choose the 2
column template (the default template is for blogs – never use the default template).
Next step, you must add a link to this page somewhere in your site, either on another
page or as a left side navigation menu link (see below Menus - to add menu links).
Normally, you should not add a menu item since best practice is to not have to lengthy
of a left side navigation. Try to create a system that minimizes the number of menu
items needed. Again, Jane can assist with this categorization and organizing of
information.
Menus – Left side Navigation links
o Adding a link or page to your Left Side Navigation Menu – Anything you add to this
menu will appear on every page in your site so be selective about what goes here. To
Add/Edit Menu - Under Appearance and click on Menus. If adding a page that you
have created (to the menu )– click on the box in front of the page name (in the Pages
area) and click on the Add to Menu button. If adding a link to another webpage, use
the custom links area and paste the URL for the page into the URL box, type a title for
the link into the title box and then click the Add to Menu button. You can drag and drop
the menu items to reorder them. Click on the Save Menu button. Use View Page
button (at top of screen) to see the changes and test it.
3
Images






Easiest way to add an image to a page is to do so while editing the page where you want to
place image. Place the cursor in the spot where you want the image on the page, click on the
Upload / Insert button just above the editing box, select the image from either your computer
or the media library (location depends on whether you already uploaded/inserted it before or
not), type in the alt text (a few words describing the image), choose the size, choose the
location (center, left, right), click on Insert Into Post button. If you wish to further edit the
image, once it is inserted into the page, click on the image and then click on the edit image icon
that appears. This is where you can use the Advanced Tab to add horizontal and vertical space
around the image (type an 8 in each of those boxes) and also resize the image by typing in a
width and deleting the height (this will auto scale the height and avoid distorting the image,
recommended width for a right or left align image is 225 wide). Keep in mind that Images can be
no wider that the width of a page – which is 650 or they will break the layout. Once an image
has been uploaded and you can see it in your Media library, then you should not keep uploading
it to use it again. Instead, when Upload/Inserting the image, just choose it from the Media
Library rather than from your computer.
You may ONLY upload images that are in the public domain or pictures that you took yourself.
You cannot just copy images off the internet and post them. Assume every image on the
Internet is copyrighted unless specifically stated that it is not. There should be some indication
that the image is available for free use and with no restrictions. If it says nothing, then the
assumption is that it is copyrighted material and you should NOT use it. See below (at the end
of this section) for some useful websites for locating free use, public domain or license free
images.
For every image you use in the site, you must type a brief description of the image and any text
in the image into the alt text field (appears as part of image upload/insert process). This is an
ADA compliance requirement.
The site has a file size limit, if the image you are trying to upload is too big, you may need to
open the image in Microsoft Office Picture Manager (found on your computer under Programs>Microsoft Office->Microsoft Office Tools) and choose edit it and compress it. Also, if the size of
the image is too wide or tall for the space, you may need to edit it and the resize it or crop it
(using the the Microsoft Picture Manager) before uploading it to your site.
If you need help managing/using pictures on your site, contact Jane for one-on-one help.
Free Images – it is tricky to find free images to use. Again, if the site doesn’t specifically explain
that the image can be used, then you shouldn’t use it. Also, many free images require that you
give credit to the photographer in order to use the image. If this is the case, you can add a note
in the footer of your page to give credit for images that require it. Also, many free sites (even
those linked to below) also sell images so look carefully to see if it is one of their free ones. Here
are some places on the Internet to look for copyright free, royalty free or free licensing images:
o Google Images - http://images.google.com/advanced_image_search?hl=en – You
MUST limit the search to only image that are free to use or share. Most images in the
Google images search are copyrighted and cannot legally be used. To limit the Google
4
o
o
o
o
Image search to those with free usage rights given -> go to the Advanced Search screen
in Google Images (linked to above) and at the bottom of the screen for USAGE RIGHTS
choose “free to use or share” from the dropdown menu. Then type in a keyword and
search within this limit. Be sure to do this each time you construct a new search.
Stock Vault - http://www.stockvault.net/ - you have to register to use the free images
available on their site but not everything is free.
Morgue File - http://www.morguefile.com/ - mostly free
Stock xchng - http://www.sxc.hu/ - mix of free and pay photos (free tend to be at the
bottom of the screen.
Flickr - http://www.flickr.com/search/advanced/? – just like Google Image, most images
in Flickr are copyrighted. You must use the Advanced Search to limit to their Creative
Commons images. To do this: go to the Advance Search screen in Flickr(linke to above),
using check boxes at the bottom of the search screen choose to “Only search within
Creative Commons-licensed content.”
Other Information

If a link on your site is broken, it will appear with a strikethrough line across it on your page.
This is to alert you to either fix it or remove it.
Future Topics for next Training:






Tables
Embedding Video
Forms
Events/Calendar
Slide Show for top of page
Adding images to area underneath the left side nav Or to 3 column template (in far right
column)
5