Objective

To learn basic Wordpress CMS skills by building a personal process page.

Discussion

To make websites, a designer must learn HTML (HyperText Markup Language), CSS (Cascading Style Sheets) and perhaps some Javascript.

While the above is still true for professional web designers, the average user or small business owner can now make professional-looking websites by using pre-designed templates, themes and plugins through the miracle of CMS (content-management systems). Wordpress is the most popular CMS by far. Joomla and Drupal are two other popular CMS (see marketshare comparisons and reviews).

All CMS are database-driven and can be edited by multiple users via a browser. Wordpress is the most popular CMS due to its ease of use. It also has the reputation of being the CMS with the most security holes due to plugins and themes written by non-professionals.

Although Wordpress CMS software is free, hosting of your website is not. Be weary of cheap Wordpress hosting sites that do not keep their software updated with security patches. Parkland is currently using Edublogs's Campus Press (see features) to host your Wordpress project sites. Edublogs has an excellent reputation for tight security and will only allow secure themes and plug-ins.

For this exercise, we will be using Edublog's free sites and the "Chicago" theme. Researching, testing and customizing themes is an important part of the Wordpress workflow, but it is very time consuming. We recommend spending some time on the theme's home page to view the demos and read the features before committing to using a theme (tip: just google "wp theme chicago" for detailed information).

Procedure

Overview: Create a free account at edublogs.org. Start a new blog. Add pages. Customize blog. Email your blog url to your instructor. Note: replace bold with personalized info.

Preparing for the exercise

1. download starter files (location=Netshare/Digishare-Students/faa999/gds171)
2. create a login at edublogs.org (click SIGN UP); tips:
   - email = use your personal email address (your Parkland student email address will expire upon graduation)
   - user name = same as your email (before the @)
   - blog url = gds171jsmith.edublogs.org (suggested)
   - blog title = Jane Smith Process Page (suggested)
   - record your pw as part of your edublogs email confirmation thread (save as draft)
3. add a new site (note: free sites have a total 1GB max storage space)
   - dashboard > my sites: ADD NEW
   - blog url = gds171jsmithtest.edublogs.org (suggested)
   - blog title = test (suggested)
   - note: be aware which site you are currently editing (see MY SITES at top)
4. preview your current site in a new tab (cmd+click VISIT SITE on any top link); keep this tab open and refresh as needed

Setting up your Process Page site:

1. appreance > themes > Chicago
2. media > upload new media > add: icon.png, parkland-logo.png, clouds.jpg; add alt tags
3. posts: edit "hello world" and replace with a new entry (see Blogging assignment)
4. links: delete all (bulk edit)
5. pages: quick edit "Sample Page": title=Projects; slug=projects; layout options=no sidebar
6. pages: ADD NEW: title=Blog; layout options=primary sidebar, content
7. pages: ADD NEW: title=About; layout options=no sidebar
8. comments: trash test comment

Customizing site appearance (save and publish after updating each section; refresh preview tab to view results)

1. customize > menus > edit menus: create new menu, title="top"; add pages to menu: "Projects," "Blog," "About" (re-arrange order if needed); display location=primary
2. Site title > tagline: Parkland College: GDS 171 Introduction to Wordpress; site icon: "icon.png;" logo: "parkland-logo.png;" edit: height=128; (disable logo = no)
   
3. colors: color scheme=light
4. header image: ADD NEW IMAGE "clouds.jpg" (1920 x 500) or download your own copyright-free image ; featured header image link URL=(blank)
5. widgets > sidebar: remove "recent comments," "categories," "meta"
6. static front page: static page=yes; front page=projects; post page=blog
7. theme options > layout options: archive content layout options=show full content

Creating the content

1. edit "Projects" page: copy/paste text from "process.txt"; format with <h3> and <ul>
2. write a short bio for the "About" page and upload a picture

Grading

1. email your blog url to your instructor
2. link your published projects and assignments to this page