Archived copy for reference only
 

 

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

Interactive Design Exercises
Wordpress: Process Page (Generic)

(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. 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 prevalence of 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 select digital media classes. 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 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 quantity of blog entries and/or pages you can publish within 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 site. Add pages. Customize blog. Email your site 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 Process Page (suggested)
    • blog url = gds000jsmith.edublogs.org (suggested)
    • you will receive a confirmation email with the above info
  4. returning users:
    • log in at edublogs.org (tip: lost your pw? search your email for "edublogs")
    • dashboard > my sites: ADD NEW
    • blog title = Jane Smith: GDS 000 Process Page (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

Using the Dashboard to set up your site:

  1. appearance > themes > Chicago
  2. media > add media: add all images for X1 and sample links for P1; add alt tags
  3. media > library: edit "parkland-logo.png" (height = 128)
  4. links: delete all (bulk edit)
  5. pages > all pages: edit "Sample Page": title = Projects; slug = projects; layout options = no sidebar
  6. pages > add new: title = About; layout options = no sidebar
  7. comments > all comments: trash test comment

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

  1. appearance > customize: site title...: tagline = Parkland College • Class NameSemester (bullet = opt+8); site icon = "icon-green.png"; disable logo = no, logo: change image = "parkland-logo.png"; return to customize (<)
  2. colors: color scheme = light; return to customize (<)
  3. header image: ADD NEW IMAGE "clouds.jpg"; featured header image link URL = (blank); return to customize (<)
  4. widgets > sidebar: remove "recent comments," "categories," "meta"; return to customize (<)
  5. static front page: static page = yes; front page = projects; post page = add new "Blog"; return to customize (<)
  6. theme options > layout options: archive content layout options = show full content; exit customize (X)
  7. appearance > menus: name = top, click CREATE MENU; add pages to menu (view all): "Projects," "Blog," "About" (re-arrange order if needed); display location = primary; SAVE MENU

Customizing the content

  1. edit "Projects" page: copy/paste text from "process.txt"; format with <h3> and <ul>
  2. add a few sample links: copy url from media library, insert link (link options: paste url, open in new tab = yes)
  3. appearance > customize > header image: replace "clouds.jpg" (1920 x 500) with your own copyright-free image
  4. write a short bio for the "About" page and upload a picture
  5. posts > all posts: edit "hello world" and replace content with a new blog entry (see Blogging assignment, if applicable)

Grading

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

BACK TO TOP
Last updated: 5/7/21