Archived copy for reference only
 

 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Wordpress: Process Page (GDS 230)

(Archived from 2019)

Objective

To learn basic Wordpress CMS skills by building a 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 (see graphic). Joomla and Drupal are two other popular CMS (see detailed comparisons).

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 using Edublogs's Campus Press (see features) to host Wordpress projects for current students. 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 work flow, but it is very time consuming. We recommend spending some time on the theme's home page to view the demos and read up on the features before committing to a theme (tip: just google "wp theme chicago" for detailed information).

Note: Edublog's free sites have limitations on the frequency you can publish blog entries. There's also a limit on the maximum number of blog entries you can publish in any 24 hour period. Please keep this in mind and plan ahead in order to meet your deadlines.

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 for your class (see instructor for details)
  2. extract starter files to: Netshare/Digishare-Students/faa999/gds000
  3. first time users:
    - create a login at edublogs.org (click SIGN UP)
    - email = use your personal email address (your Parkland student email address will expire upon graduation)
    - user name = same as your email (before the @)
    - blog title = Jane Smith: GDS 000 Blog (suggested)
    - blog url = gds000jsmith.edublogs.org (suggested)
    - your login info and pw will be emailed to you
  4. returning users:
    - log in at edublogs.org (tip: search your email for "edublogs")
    - dashboard > my sites: ADD NEW
    - blog title = Jane Smith: GDS 000 Blog (suggested)
    - blog url = gds000jsmith.edublogs.org (suggested)
    - note: be aware which site you are currently editing (see MY SITES at top)
  5. 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. appearance > themes > Chicago
  2. media > upload new media > add: images for X1 (placeholder)
  3. posts: edit "hello world" and replace with a new entry (see Blogging assignment, if applicable)
  4. links: delete all (bulk edit)
  5. pages: edit "Sample Page": title = Projects; slug = projects; layout options = no sidebar
  6. pages: ADD NEW: title = About; layout options = no sidebar
  7. (optional) pages: ADD NEW: title = Blog; layout options = primary sidebar, content (if an error occurs after clicking "update", try again in an hour, your page should be saved as a draft until then)
  8. comments: trash test comment

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

  1. customize > menus: create new menu, title = "top"; add pages to menu: "Projects," "Blog," "About" (re-arrange order if needed); display location = primary
  2. site title > title: Process Page, tagline: none; site icon: "icon.png;")
  3. colors: color scheme = light
  4. header image: ADD NEW IMAGE "clouds.jpg" (placeholder); 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

Customizing 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
  3. appearance > customize > header image: replace "clouds.jpg" (1920 x 500) with your animated GIF from X1 Part II

Grading

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

BACK TO TOP
Last updated: 5/7/21