MAT-225 :: PROJECT 3

Original WordPress Theme Creation

30% of Semester Grade

On this page:

Overview
Objectives
Requirements
Suggested Steps
Resources

Overview

For your final project you will create a customized WordPress theme that starts from the Underscores base developer theme. You are not allowed to start from any other theme, nor are you allowed to simply create a “child” theme from another one. You can use one of the following topics for the content development, content strategy, and design of your theme/site :

  • your own professional portfolio
  • Site using instructor-provided content:
    • Developing a site for a fictional electrical services company (an electrician’s site). Download electrician file resources.
    • Developing a site for a fine artist’s portfolio. Choose the fine artist below (real person) to download her file resources for use on this project. NOTE: you can also use the same content as in Project-1 for the final project if you want to compare content development strategies between Project-1 and Project-3.
      Barbara Holmes: assets | RFP | current site
  • service-oriented organization
  • educational site

NOTE: I would strongly consider using instructor-provided content for this assignment if you are concerned at all about time. Developing good content from scratch or procuring content from a real client in a TIMELY fashion can be extremely stressful and time-consuming. Using any of the instructor-provided content will ensure that you have plenty of resources to flesh out a strong site that feels (or IS) real.

The customization of the theme will be in the form of creating your own custom theme based on assigned tutorials. This project will also focus on the use of plugins and widgets to expand the functionality of the base theme, as well.

Examples of Previous Student Work:

 

Objectives

  • Learn how the WordPress template hierarchy works
  • Learn about WordPress’ “enqueing” process
  • General improvement on css skills
  • Additional focus on learning css manipulation for the WordPress framework and plugins
  • Learn to manipulate css/html5 for responsive design
  • Learn basics of manipulating common WordPress functions to add functionality to the theme
  • Create harmonious and suitable design for the chosen subject matter
  • Explore additional WordPress plugins further

Requirements

The fundamentals of this assignment are based off of lessons from the required textbook, WordPress Responsive Theme Design, as well as instructor video lectures and demos. While the book is useful in putting you on a solid path to understanding the structure of WordPress and how to manipulate it in building a custom theme, there are places where better explanation is required for a full understanding of the concepts and directives. Therefore, you will also be assigned tutorial videos to walk you through the process of building your own theme from scratch. When looking at requirements below, don’t be alarmed if you don’t understand how to do some of what’s required at first. The book and instructor lessons will show you how to implement new technical concepts, tools, and code.

Requirements for Content, Content Area, and Technical PHP/CSS/HTML :

  1. Please select a content topic from one of the list items in the above Project Overview on this page.
  2. You will be required to have a minimum of at least 4 separate pages (no single-page scrolling themes!).
  3. All components (especially navigation) MUST be fully responsive and functional in all screen dimensions 320px and higher.
  4. You must create at least 1  custom menu and assign it to a logical place on the page. You can either assign it to take over the primary (global) menu, or you can assign the custom menu(s) to widget areas on the pages.
  5. You must use a minimum of 5 plugins to extend the functionality of the site (NOT including Akismet, Hello Dolly, any of the Developer plugins, or the WordPress Importer). ONE OF THE PLUGINS MUST BE A GALLERY.
  6. You must use a minimum of 3 USEFUL widgets. Be aware that the Calendar widget that comes with WordPress is rarely useful. NOTE: the “Text” widget can be a lifesaver and supports hard-coded HTML.
  7. While you are not required to have  visual “sidebar” (or a 2-column layout), you must register a minimum of 2 widget areas (“sidebars”) and use them in your theme. Remember that a “sidebar” in WordPress doesn’t literally have to be on the side. It is simply a widgetized area that you can style to appear anywhere on the page(s) by calling the “get_sidebar()” function. “Sidebars” can be navigational sidebars, widgetized footer areas, hero call-to-action sections, advertising areas, contextual menus that you show/hide off screen, etc.
  8. You must give your theme a thumbnail image that shows up in the backend and change the theme info to match your own personal info.
  9. You must create a logical Category system that you logically assign all posts to. You must also create a new catch-all category that becomes the new default in the event you forget to categorize new posts. DO NOT USE “Uncategorized” AT ALL.
  10. If you use a tagline under the main page title, do NOT leave it as “Just another WordPress site.” Customize it.
  11. Style everything with clear intention: heading levels, lists, text, blockquotes, links, widget areas, navigation menus, layout sections, headers, footers, images, margins/gutters, etc.
  12. Style “blog” post lists so that each article listed has a clear delineation from one another. Make them modular, attractive, and usable.
  13. You must use relative units of measure for text sizing (pixel fallback is fine) and the majority of layout spacing (%, em, rem, vw, vh).
  14. All JavaScript and CSS  external files must be properly enqueued in the “functions.php” page. (Do not hard-code any JS or CSS in the “header.php” or any other template page).
  15. You must pull in Fontawesome icons via the ‘functions.php page’ and then use them somewhere in the site. IMPORTANT!!! To make your site work exactly as this video instructs, download Fontawesome version 4.7.0 here: 
    https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip
    The newer 5+ version requires slightly different instructions. 
  16. You must package and enqueue at least two custom Google fonts within your file system (download fonts from Google, use Font Squirrel to package, pull the fonts in through the functions.php page, and write rules that utilize those fonts in your style.css file).  
  17. Use Modenizr and Respond.js for progressive enhancement and Superfish js for menu accessibility. The Masonry js is optional for animated changes between screen size changes for element positions.

Optional for extra credit and rockstar status:

Create a custom “home.php” file for your landing page that pulls in your own custom formatted post loop and that adds any other special formatting different from other pages. NOTE: if create a customized view of your posts, you very likely also need to create at least one other custom content template page to change what shows up in the posts and how they are formatted (i.e. “content-home.php” or something similar).

NOTE: To receive this extra credit, everything must be fully functional! So that means you should save this as a last step. Before trying to do this, it is highly advisable to make a complete backup of your finished theme so that you have something to revert back to if you run into problems with the custom landing page.

 
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

Suggested Steps

Because this assignment is extensive and requires a lot of ‘doing’ as part of your learning process, you really need to mark out a fair amount of time to get the work done. Here is a suggested approach to getting you assignment finished.

One

  1. Do your assigned reading and watch assigned tutorial videos as they are assigned. Falling behind in this project is a kiss of death.
  2. Download files that will be helpful and necessary for you to successfully learn the material and complete the project. In videos I show you where to find a lot of it, but you can also download the files here:

Two

  • Begin your reading and watching the videos. You can skip over material in the book that explains how to set up a development server and which IDE code editor to use. I recommend continuing to use the code editor you are comfortable with. Dreamweaver works quite well as a good code editor if you have Adobe CC.
    1. You should set up a new installation of WordPress and WordPress database/user on the class server. It will be the basically the same as the last project, but I do provide tutorials for you anyway. Install the “topcat” Underscores theme there instead of on your local development environment. This is suggested because it will be very difficult to help you troubleshoot anything when it is trapped on your own computer behind a firewall. It is also really difficult later to migrate your site from your local computer to the class server! Don’t underestimate how complex this can be!
  • You can speed the videos up, but be sure that you are truly absorbing what you are watching and doing as you follow the lessons.
  • As the lessons instruct you on choosing your own fonts, you should use your own font choices…do NOT use the same fonts as in the book. Be aware, though, that if at any point you decide to copy/paste lesson code from the electronic format of the book, you need to update your font selections in that code.
  • TO WATCH DEMOS AND SEE RELATED READINGS, go to the WordPress Custom Theme Lessons and be sure to keep up with them according to our class schedule!

Three

After you have gotten through the tutorial and have a functional theme created, I recommend that you create a new WordPress installation on the class server and apply the theme to it. By applying the theme to a new WP installation, you can:

  1. avoid the problem of having to extract and remove the Theme Test Unit Data.
  2. Additionally, you can start customizing the new theme implementation so that if you run into serious problems in the new version, you can always refer back to your other installation’s fresh, functional version.

Because this assignment is quite challenging with a limited number of weeks, I am not expecting outrageous changes to the layout, but you are expected to style the site so that it is definitely differentiated from the lesson and becomes uniquely your own. I will be giving partial credit for work done on this assignment if you cannot get to what you might feel is your own “finish line,” so don’t give up if you are struggling with time. The more you accomplish, the more you will learn!

Resources

Official WordPress Codex and Developer Links

Things You Will Need

Go back up to Suggested Steps  (above in step “One“) to see the list of download links you will need for completing this project.

Some Good Plugins

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).

Creative Commons Free SVG Icons

http://thenounproject.com

Free Web Fonts

Background Image Patterns:

Free Stock Images (great for textures, etc.):

Awesome Color Palette Tool

http://palleton.com  ***This site will generate hexadecimal values for you for all color samples.

Digital Art, Design, and Communication Education