Portfolio Website – Overview

Overview

You will design and create a portfolio website with 10–12 samples of your best work.

I’ll show you how to create one in WordPress. WordPress is one of may CMS (content management systems) that are in use today to design and build websites. Some of the most popular platforms are WordPress, Wix, Weebly, Joomla, Drupal, and Concrete 5.

I have talked with many local design agencies that only use CMS to build websites. They tell me that their clients want a platform that they themselves can update and edit after the initial creation.

Grading checklist

  • Create a portfolio website 
    (I’ll demo WordPress in class, you may use another CMS if you want, or HTML)
  • Create 10–12 portfolio example files, 1100px wide, jpeg, png, gif 
    (use your existing 11″x14″ portfolio pages if you want)
  • Also make a featured image for each example, 800 x 800px, jpeg, png, gif
  • Write a headline for each sample
  • Write a short descriptive paragraph for each example
  • Upload and publish your new portfolio website
  • Present your work to the class

Examples

For my class demo, I’ll show you the WordPress Illustratr theme. It’s a solid theme that’s popular and supports the WordPress portfolio function. https://wordpress.com/theme/illustratr

Here’s a link to detailed information about WordPress’s built in portfolio feature: https://en.support.wordpress.com/portfolios/

This website (http://westerngraphicdesign.wordpress.com) shows the WordPress Illustratr template in use. It’s a popular theme, clean and elegant, easy to use, and it shows off your work nicely.

Design your portfolio examples to look professional and interesting. They should showcase your best work and talents.

WordPress Portfolio feature – details

https://en.support.wordpress.com/portfolios/

Tutorial

We’ll use this tutorial in class to get you started. The template’s creators also host a nice tutorial site here: https://wordpress.com/theme/illustratr.

Create your account and install a theme

  1. Sign in and create an account https://wordpress.com (it’s free) –OR– install the theme on your personal web hosting account.
  2. You’ll use your domain name + /wp-admin to edit your site—Go there now in a new window
  3. Click the avatar image and set up My Profile and Account settings—save your changes
  4. Click Appearance > Themes
  5. Search for the Illustratr theme and install it and activate it
  6. Make sure you’re editing in the WP Admin (black bar on left side of page). If you’re in the My Site white bar, scroll to the bottom and click WP Admin.

Add your home page

  1. Pages > Add New
  2. Title it: Welcome
  3. Page Attributes > set Template to: Portfolio Page Template
  4. Publish it (go back to main editing bar)

Add portfolio pages

  1. Portfolio > Add New
  2. Title it: Websites
  3. Click the + to add a block and then an Image
  4. Download this image and add it to your page: website_sample_image.png
    (1100 x 1500 px, RGB, 72ppi)
    (load it through your Media Library)
  5. Add a paragraph of sample text below it
  6. Download this image and add it as the featured image: website_featured_images.png
    (800 x 800 px, RGB, 72ppi)
    (load it through your Media Library)
  7. Project Types: add three new types: Logos, Print, Digital
  8. Tags: add 2–3 new tags of your choosing (Examples: Photoshop, Vector, Pen & Ink, etc.)
  9. Assign one or more tags to this page
  10. Publish
  11. Create two more Portfolios for Logos and Posters (use these images:)
    1. logos_sample_image.png
    2. posters_sample_image.png
    3. logos_featured_image.png
    4. posters_featured_image.png
  12. Assign Project types and tags to each page
  13. Publish each page when you’re done creating it

Stylize your website

  1. Appearance > Customize
  2. Site Identity > set your Site Title and Tagline (be sure to Publish after you make changes)
  3. Fonts > choose your fonts
  4. Homepage Settings
    1. A Static Page
    2. Homepage to Welcome
  5. Menus > Create a new menu, name it Main Menu, set it to Primary Menu
    1. Add to the menu: HOME, LOGOS, PRINT, DIGITAL
  6. Portfolio > check the box next to “Hide title and content on Portfolio Page Template”
  7. Publish
  8. Click X
  9. Settings > Writing > Content Types > Portfolio Projects
    1. Set to display the number of projects you want (I chose 20)
  10. View your site
    – My Site > View Site –OR– 
    – Site Pages > View Page (under • • • menu next to the Welcome page)
  11. Check out your new site. Nice work.

Well done!

There is so much more you can do. This is a good start though. Surf around and see what you can change and customize yourself. Try adding a logo, or a header image like I did. Add a site icon and more.

Polite advice: Until you’re more experienced with WordPress, I wouldn’t alter the HTML or CSS. When the theme template updates it could break your site. If you really want to style other elements of your theme, look into child theme plugins.

Troubleshooting

When you first activate Illustratr, your posts will display in a traditional blog format. If you would like to show your portfolio projects on the front page of your site, just follow these instructions:

  1. Create or edit a page, and assign it to the “Portfolio Page Template” from the “Page Attributes” module.
  2. Go to Settings → Reading and set “Front page displays” to “A static page.”
  3. Select your portfolio page as the “Front page,” and then choose another page as the “Posts page,” (to display your blog posts).