Objective

To learn basic Wordpress CMS skills by building a web portfolio.

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 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 "Altofocus" 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 altofocus" for demos and tips).

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 blog url to your instructor. Note: replace bold with personalized info.

Preparing for the exercise

1. download starter files (location = Netshare/Digishare-Students/faa999/gds293)
2. 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 293 Portfolio (suggested)
   - blog url = gds293jsmith.edublogs.org (suggested)
   - your login info and pw will be emailed to you
3. 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 293 Portfolio (suggested)
   - blog url = gds293jsmith.edublogs.org (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 web portfolio site:

1. appearance > themes > Altofocus
2. media > add media: add all files from "x1/images" folder; add alt tags
3. links: delete all (bulk edit)
4. pages > all pages: edit "Sample Page": title = Projects; slug = projects
5. pages > add new: title = About; repeat with Résumé, Blog, Contact (if an error occurs after clicking PUBLISH, try again in an hour, your page should be saved as a draft until then)
6. 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 • Portfolio Seminar • Semester (bullet = opt+8); site icon: "sample-favicon.png"; disable logo = no, logo: change image = "sample-logo.png"; edit: height = 128; exit customize (X)
2. appearance > widgets: delete all sidebar widgets except for "search"
3. appearance > menus > menu name = "top", click CREATE MENU; change "home" to "portfolio"; add pages if needed; re-arrange order if needed; display location = top; SAVE MENU
4. plugins: add "contact form"; add "completely disable comments"
5. settings > contact form: add your email, follow instructions
6. settings > disable comments: everywhere
7. settings > general: date format = custom (blank); repeat with time format
8. settings > reading: blog pages show at most = 100

Creating the content

1. media > library: copy URL for "sample-resume.pdf"
2. pages > all pages: edit "resume": add text "Download PDF", insert "sample-resume_Page_1.jpg", repeat with page 2
3. link each object to URL for "sample-resume.pdf" (advanced: open link in a new tab)
4. pages > all pages: edit "projects": copy/paste text from "process.txt"; format with <h4> and <ul>
5. pages > all pages: edit "about": write a short bio and upload a picture
6. pages > all pages: edit "blog": write a brief blog post about an inspirational portfolio website and upload a screenshot; cite the source, date the post, link to the live site (open in new tab); see example
7. posts > all pages: edit: "hello world": featured image = "sample-12.jpg", post title = "Web Mockup", text = "Client: Name of Client" (tip: max image size is 1200px wide or 900px tall)
8. posts > add new: featured image = "sample-11.jpg", add title and text (tip: latest posts appear first, change the post date to re-order slide show)
9. tools > export: download exported file

Grading

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