Archived copy for reference only
 

 

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

Interactive Design Exercises
Wordpress: Festival Website

(Archived from 2019)

Objective

To learn basic Express CMS skills by recreating the fictitious website Festival of Birds.

Discussion

WordPress is a good choice for designing small festival websites. It's inexpensive, easy to use, and can support multiple admins — perfect for events that are often run by small committees on a tight budget.

We will be using the WP theme Twenty Seventeen, which features an updated customizer, advanced layout options, and contemporary responsive design.

This exercise is designed to teach the fundamental skills needed to create a bare-bones WP website. Advanced skills, such as custom CSS, will be covered in future exercises.

Procedure

Preparing for the exercise

  1. download starter files (location=Netshare/Digishare-Students/faa999/gds171)
  2. log into your CampusPress WP account using your ParklandOne credentials wp.parkland.edu
  3. My Sites > Jane's Exercise 2 > Dashboard
  4. settings > reading > site visibility "discourage search engines from indexing this site" > save changes

Installing the theme

  1. appearance > themes > Twenty Seventeen

Adding content

  1. media > add new: upload photos and PDF
  2. pages > all pages > sample page: title= Festival of Birds, add copy (plain text mode), order= 1
  3. pages > add new: title= Event Calendar, add copy, make dates bold and descriptions italic, order= 2, featured image= kids-table.jpg, image width=1280px, publish, view page
  4. pages > add new: title= Bird Species, add copy, re-link checklist if needed, add photo gallery, order= 3, featured image= loons.jpg, image width=1280px, publish, view page
  5. pages > add new: title= Location, add copy, order= 4, featured image= canoes.jpg, image width=1280px, publish, view page
  6. pages > add new: title= Contact, add copy, order= 5, featured image= none

Adding a Formidable contact form plug-ins

  1. dashboard > plugins > forms and surveys > Formidable Froms: activate
  2. Formidable > Forms > add new
  3. Or load fields from a template > Contact Us (in dropdown) > load template
  4. create
  5. pages > all pages > contact us >edit
  6. formidable button > select contact us from dropdown; copy code in bottom field
  7. paste code into text editor
  8. update > view

Customizing site appearance

  1. appearance > customize > static front page > static page= yes, front page= Festival of Birds
  2. menus > add a menu, title=top; top menu= yes, add items= add all pages, re-order if needed
  3. header media > new header= hummingbird.jpg
  4. site identity > site title= Festival of Birds, tagline= Pike Lake 2018, logo= logo.png (crop= no), site icon= icon.png
  5. theme options= one column
  6. customize > widgets > sidebar: remove all widgets

Adding social media icons

  1. appearance > customize > menu > add menu > title: social, social links menu= yes
  2. add custom link= facebook url (insert fb url of your choice), link text= facebook (wp auto recognizes social media url's and inserts the corresponding icon)
  3. repeat for instagram

Finetune type

  1. Using the sample as a reference, edit the topography for each page

Adding google map (CampusPress only)

  1. visit google maps, search MN
  2. share > embed a map > copy url
  3. pages > all pages > location > text edit (edits html) > paste url, width= 100%, height= 300px
  4. view page

Install Jetpack (CampusPress only)

  1. plugins > search Jetpack > activate
  2. follow installation instructions, make a free WordPress.com account if needed
  3. jetpack > set up jetpack
  4. activate gallery features if needed
  5. pages > all pages > bird species
  6. edit gallery > thumbnail grid= titled mosaic

Grading

  1. link this exercise to your process page

BACK TO TOP
Last updated: 5/7/21