Education, Web

Assignment 04.11.02: WordPress Theme Development

Jason W. Howell
August 3, 2018

Goal

The goal of this assign­ment is to inte­grate sup­ple­men­tal tech­nolo­gies into exist­ing lay­out skills to solve a com­mu­ni­ca­tion problem.

Objective

Cre­ate a mobile friendly dig­i­tal Word­Press theme that uses a doc­u­mented frame­work, rich media and inter­ac­tive ele­ments to pro­duce a con­sis­tent visual interface.

Background

Assignment

Cre­ate a Word­Press theme that demon­strates your knowl­edge of inte­grat­ing and cus­tomiz­ing visual form for Con­tent Man­age­ment Sys­tems (CMS). The solu­tion requires the inte­gra­tion of a visual frame­work (most likely Boot­strap) with the trans­la­tion of data­base con­tent (MySQL) into visual form (HTML) via a trans­la­tion lan­guage (PHP). The result­ing site can serve any mul­ti­tude of pur­poses, but by choos­ing a sub­ject area with rea­son­able and well defined user inter­face prin­ci­ples (news, blog or port­fo­lio site), will limit com­pli­ca­tions of com­plex inter­ac­tions. The theme should result in a series of PHP/HTML and CSS files that should illus­trate an advanced knowl­edge of CSS and HTML. The site must uti­lize aes­thetic design prin­ci­ples to cre­ate an attrac­tive, yet func­tional solution.

Cre­ate the fol­low­ing pages using HTML, CSS and PHP:

  • Cus­tom home­page design
  • About page
  • Con­tact page
  • News sec­tion with comments
  • A wid­getized sidebar

Word­Press is an adapt­able and suf­fi­ciently fea­tured CMS for begin­ning devel­op­ment in theme cre­ation. While advanced themes often include con­trols to manip­u­late design para­me­ters of a theme, this solu­tion will min­i­mize these advanced CMS/PHP features.

Part One

The com­plex­ity of the plan­ning stage is con­sid­er­able more impor­tant for this project than for a basic web page. Sketch a paper wire-frame lay­out of your pro­posed pages, not­ing basic con­tent, com­mon ele­ments, id’s and markup using one of the tem­plates pro­vided in class. Keep it sim­ple at first and mobile friendly, with 2–3 main columns, before you get com­plex. Cre­ate, acquire or mod­ify exist­ing con­tent to suit your needs, but beware of copy­right restrictions.

Like­wise, cre­ate a dia­gram rep­re­sent­ing the basic Word­Press con­ven­tions (ie stan­dard­iza­tions) and the nec­es­sary PHP ref­er­ences to inte­grate the con­tent into the basic lay­out. Most Word­Press themes include, but are not lim­ited to, the fol­low­ing files:

  • index
  • style
  • header
  • footer
  • side­bar

Part Two

Build a sta­tic, dig­i­tal wire-frame mock-up in HTML and CSS

based on your sketches from part one. Use the style infor­ma­tion pro­vided via the frame­work to assist. Begin to place the appro­pri­ate con­tent as needed, but the empha­sis is on func­tion not on aes­thet­ics. Save this wire-frame sep­a­rately. Trou­bleshoot any com­pli­ca­tions, espe­cially tech­ni­cal inte­gra­tion, and adjust design para­me­ters as necessary.

Part Three

Using the pro­vided links and class lec­tures, cre­ate a server based test­ing envi­ron­ment (MAMP) and install a local ver­sion of Word­Press sep­a­rate from a pub­lic site. A test­ing envi­ron­ment will dupli­cate most of Word­Press’ func­tional aspects, but allows the abil­ity to iso­late, exper­i­ment and res­ur­rect a site with­out fear of loos­ing impor­tant data. Import­ing, export­ing and man­ag­ing visual form and con­tent effec­tively is also a vital aspect to a suc­cess­ful design process. Cre­ate or use exist­ing con­tent as a sam­ple to final­ize the inte­gra­tion of form and content.

Adapt the nec­es­sary sta­tic files to inte­grate exist­ing Word­Press con­ven­tions into the wire-frame solu­tion. Focus on func­tion­al­ity of data­base inte­gra­tion at this stage to cre­ate a func­tional, data­base dri­ven wire-frame.

Part Four

Cre­ate a “final” dig­i­tal aes­thetic mock-up using the Adobe Pho­to­shop or Illus­tra­tor frame­work tem­plates and based on the paper and dig­i­tal wire-frames from Part One, Two and Three. Make care­ful notes of dimen­sions, col­ors, images, file­names and style infor­ma­tion. Easy access of this infor­ma­tion reduces con­fu­sion and speeds production.

Part Five

Using the sam­ple files pro­vided via pre­vi­ous lec­tures, cre­ate the series of web pages using your con­tent and image(s). Test in a browser often and exchange themes with oth­ers to test trans­porta­bil­ity and adapt­abil­ity. Once your design is com­pleted, export your theme and post the result­ing files to the appro­pri­ate D2L drop­box. The theme will be tested and assessed using an inde­pen­dent server setup.

Assessment

  • The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 04.11.02: Word­Press Theme Development

Techniques

CSS, HTML, Word­Press instal­la­tion and usage, MAMP server, plan­ning, con­vert­ing files, file hier­ar­chy, struc­ture, nam­ing conventions

Supplies

TextE­dit, Dreamweaver, image edi­tor, source files

Deadlines

Thurs­day, Octo­ber 25, 2018. Assign­ment Given.

Fri­day, Novem­ber 2, 2018. Part One Due

Fri­day, Novem­ber 9, 2018. Part Two Due.

Fri­day, Novem­ber 16, 2018. Part Three Due.

Fri­day, Novem­ber 30, 2018. Part Four Due.

Fri­day, Decem­ber 7, 2018. Part Five Due. Fin­ished theme files uploaded to appro­pri­ate D2L Dropbox.