WordPress : First site using themes and plugins
20% of Semester Grade
Overview
You will create a completely responsive WordPress website using a pre-made, free theme of your choice and a range of plugins to extend the website’s functionality. Your options for the site’s subject-matter are as follows:
- artist / client website featuring their visual art and other professional materials. Content will be provided.
- a blog-style review site featuring a minimum of 6 places of interest in the greater San Diego area that people can safely go in the pandemic. You must generate your own original content.
- a blog-style, informational resource site highlighting the careers and work of different artists/designers. You can place your focus on designers of color, diversity in design, a specific genre of design (web, graphic, typographic, etc.) or fine art (installation, electronic, painting, street art, etc). Pick a focus.
- a website for real commercial products (fake businesses will not be accepted for this assignment.)
MAT-290 PORTFOLIO STUDENT ALTERNATIVE ONLY:
If you are currently enrolled in or have already taken “MAT-290 Portfolio”, you have a final option of creating a portfolio site that can serve as a 290 portfolio presentation tool. It MUST, however, still be a WordPress site that conforms to all other parameters of this assignment. Single-page scrolling portfolios will not be considered.
Objectives
-
- to explore using different themes before deciding on a final choice
- to explore a variety of plugins and how they work
- to get a basic understanding of WordPress’ major components (posts, pages, widgets, plugins, etc.)
- learn how to modify/style sections of WordPress sites
- learn how different themes affect content delivery
A Quick Walk-Through with Examples
NOTE: a few things have been updated since this overview was made. For instance, this semester we are working with artist client content, and you have additional alternatives to the “SD places” site in light of the COVID-19 pandemic. Also, required and recommended plugins have changed, so READ this actual page below for requirements.
Technical Requirements
(There are also Content Requirements below this section, so don’t miss them.)
Instructor Administrative Login!
You are REQUIRED to create an administrator-level login account for your WordPress site, as follows:
-
- username: leigh
- password: SEE CANVAS ANNOUNCEMENT
Theme:
After getting up-and-running with some basic testing data, you need to explore how different themes will work with your content and choose one to use. You should NOT pay for a theme to complete this assignment.
Required Plugins:
-
- WP Example Content
- Disable Comments (see how this works even if you deactivate it later. But definitely keep it activated if you don’t want comments on the site!)
- Contact form 7 or Fast Secure Contact Form (more configurable and fully WCAG 2.0 accessible) You MUST use a contact form.
- Gallery (you can use other gallery plugin besides this one)
- Wen’s Responsive Column Layout Shortcode (Experiment with this or some other responsive column plugin even if you deactivate later.)
- Ability to pull posts from select categories within pages (try this and see how it works)
- At least one additional plugin of your choice that enhances usability
Suggested Optional Plugins:
-
- JetPack
- Google Analyticator (great way to get started with analytics)
- WordPress SEO by Yoast (explore search engine optimization tools)
- WP Google Map Plugin
- WP Accessibility Plugin
- Theme Check Plugin
- Theme Authenticity Checker (checks for malware)
Minimum Layout Components:
-
- Header
- Navigation
- Content Area
- Footer (or sidebar)
* Each component should be content-substantial in some way. Don’t make a section that you leave empty or full of useless widgets. A couple of widget examples not useful in this assignment: Calendar and Archives. You just don’t have enough content yet.
Styling:
-
- Responsive theme required
- Good use of typography. If you like a theme that has inappropriate typography for your project, you a Google fonts plugin.
Design:
-
- Original imagery unless from copyright-free or free-to-use sources (or your own personal photos)
- Google fonts are required (minimum of 1)… Please, no hard-to-read amateurish script fonts! It’s just plain bad graphic design. (Hint: try different font plugins if your theme doesn’t already have good fonts….)
- Stick to a succinct color palate.
- Utilize space well. Fill the space with content; don’t leave awkward voids where content should be.
Lorem Ipsum Warning:
DO NOT leave lorem ipsum dummy text in this assignment. You should author real content. Remember that images go a LONG way in helping you make short text blocks fill space.
Content Requirements
Concept
You will create a site featuring a minimum of 6 places of interest in the greater San Diego area. This area can extend from North County to the Mexican border, and all the way out to Salton Sea if you wish…or it can simply be places in your neighborhood. The locations can be any combination places of natural importance (ex: Salton Sea, Cuyumaca State Park, etc.), hidden gems (restaurants, hiking trails, etc.), tourist attractions (Balboa Park, Hotel Del, etc.), unexpected places (a special tree, bridges, etc.). The overarching theme of the site/places can be one or more of the following:
-
- Unremarkable, forgettable places. This is likely a critique of things that don’t hold the interest they are purported to have.
- Awesome or inspiring places. These can be well-known areas or ones you have found on your own.
- Awful places. Obviously a harsh critique of spots to never visit.
UPDATED FOR COVID-19 PANDEMIC:
ARTIST PORTFOLIO PROJECTS:
If you are making an artist portfolio instead of “SD Places”, you should translate the “places” into portfolio items that can be categorized. If you have different types of portfolio work, they can be categorized and possibly cross-listed. For instance, if you worked on a website for another class where you were also responsible for logo design, you can categorize that portfolio post item as something like “web” and “graphic design”. To that same end, if the artist client does work that they identify in multiple categories, you will need to follow suit.
Current and Former MAT-290 Students: BE SURE to make full posts with full project descriptions of your work, though! DO NOT make a post that only has an image of the portfolio piece. If you have a hard time coming up with something to say, consider the following:
- What were the purposes, goals, or objectives of the work?
- What were the medium, tools, or technologies used to make it? What was your role in the project?
- were you the lead?
- was this a collaborative project?
- did you explore UI/UX?
- Do you have additional process documents you could post to show a potential employer or client how you approach design projects?
- And so on….
If you also want to have a page where people aren’t prompted to read, you can create a gallery page that, for instance, would give you a larger graphic with options to link to the piece’s actual page. The NextGen gallery plugin is a great tool for this kind of behavior. You do, however, have to pay for a pro version if you want to unlock all of the types of galleries it has to offer. There are a lot of gallery plugins out there to explore, though, that are free.
Pages (for everyone)
- 1) a slider or grid of site highlights (unless the client says otherwise) and Landing page with other intro info as you deem fit
- Features or Category page with brief blurb/excerpt for each item. This can also be your natural WordPress designated “blog” page, but I suggest that you assign the blog to a page with a different name if you do this. (NOTE: You can use this as your landing page if it makes sense in your theme)
- Individual article/journal posts for each featured place/piece of interest.
- Minimum of 6 featured POSTS (places / works / artists / articles / products).
- Each article/journal post will implement a gallery or slider with images of the destination (minimum 3 images/gallery) and/or embedded video
- Each location should include a goole map if you are doing the San Diego places topic (either embeded or a link to the map)
- Contact page with Contact7 form and Captcha
- OPTIONAL: Contributor page (not necessary for portfolios)
Resources
Official WordPress Codex
Some Good Plugins
- Fitvids (makes video and many other iframes responsive, including many maps!)
- Disable Comments (extremely useful in avoiding spam on sites not using comments!)
- Scalable Vector Graphics (allows SVG uploads to WP sites)
- Wen’s Responsive Column Layout Shortcode
- Contact Form 7
- Display Posts Shortcode
- NextGen Gallery
- Post Types Order
- WordPress SEO by Yoast
- WP-Invoice-Web Invoice and Billing
- WP-CRM (Customer Relations Management tool)
- Easy Digital Downloads
- Theme Check Plugin
- Theme Authenticity Checker (checks for malware)
CSS3 Design Tools
Here are some good CSS3 resources to help you design quickly without too much focus on fussy raster image creation details (drop-shadows, rounded corners, etc).
- http://html5css3box.com/rgba/ ***This one is awesome and links to a lot of other tools, too!
- http://css3generator.com/
- http://border-radius.com/
- http://www.colorzilla.com/gradient-editor/
Free Web Fonts
http://www.google.com/webfonts
Background Image Patterns:
- http://transparenttextures.com
- http://subtlepatterns.com/
- http://webdesignledger.com/freebies/200-beautiful-seamless-patterns-perfect-for-web-design/
- http://designmoo.com/category/patterns/
- http://www.dinpattern.com/category/patterns/
Free Stock Images:
- http://www.morguefile.com/
- http://unsplash.com
- http://digitalcollections.nypl.org/
- https://archive.org/details/image
Free Creative Commons or Public Domain Video Recourses:
- Youtube
- To search Youtube for Creative Commons licensed videos, type your desired search term followed by “,creativecommons” on the Youtube search bar.
- Vimeo Creative Commons
- Internet Archive