Pages Menu
Chitu Okoli chitu.okoli.org

BTM 395 Project

The purpose of this project is for you to develop an advanced, contemporary website using the WordPress content management system. You will integrate everything you have learned in this class. With WordPress as a base for developing a website, you will extend WordPress by modifying HTML, CSS and PHP in theme files and by creating and installing a functional WordPress plugin. When you successfully complete this project, you will be able to create real websites with advanced functionality, and will be equipped to learn even more advanced skills for website development.

This description page lists many detailed requirements for the website. Please read everything carefully before you begin. Every requirement is specifically selected to maximize your learning, and thus should be considered important. In the description, “posts” and “pages” are normally used interchangeably, except when explicitly noted.

Website topic

As a class project, the website is not required to use real information for a real organization; in fact, because of time constraints, you should not use a real organization, since requirements analysis and coordination with stakeholders take a very significant portion of time in real website development. Thus, you should use filler text for the pages required in this project. The one exception is that you are permitted to convert an existing website to WordPress for the purpose of the project, as long as the content is already available.

You may use any of the following as a topic for your project:

  • A business which provides products or services for sale
  • A not-for-profit organization (i.e. club, hospital, school, charity, etc.)
  • Your own personal website
  • An information site about any topic of interest to you

Your project must be set up as a live website on a domain name registered in your own name. You may choose any domain of your choice. Even if your project is for a real organization, you are permitted to install it on your personal domain. You may install it to the domain root, a subfolder, or a subdomain—it’s your choice.

General website requirements

  • Permalinks: You can use any permalink structure that you want as long as it includes the slug (“postname”) of the post. Do not use the post ID in your permalinks.
  • Menus: Your site must have at least two custom menus: one custom menu should be a top menu which displays the most important pages and categories for navigating your site. The other custom menu should appear in a custom menu widget in a sidebar or in a footer; it may include any set of menu links that you like, according to what makes sense for your site. However, it must be different from the top menu.
  • Photo gallery: Create a post or page with a photo gallery that consists of at least five photos related to your website topic. You may use any gallery feature (such as a shortcode or plugin) available to you. However, you cannot simply display five images. (See the “Supplementary resources” for sources of legal images.)
  • Audio: Upload any legally-obtained audio file (such as an MP3). Although it is preferable that the audio be related to your website topic, this is not required. Create a post or page where you embed this uploaded file using the audio shortcode. (See the “Supplementary resources” for sources of legal music.)
  • Video: Embed at least one YouTube video related to your website topic in any post or page.
  • Backup: Install any backup plugin of your choice and set up a backup schedule for both your database and all your files.
  • Legal requirements: You must abide by the legal requirements for any resources you use, especially themes or plugins. For example, if a free theme requires you to leave the custom footer displayed, you must not remove it.
  • Copying/citation requirements: You are permitted to to borrow code from other sources, but you must properly cite it.
  • Aesthetics: Although this is not a design class, the appearance of your site should be clean, without ugly colours or images. Get a friend with a good visual eye to approve it.

Pages and posts

Unlike in the rest of this project description, in this section, “post” means a post, not a page, and “page” means a page, not a post. Here are general requirements for all pages and posts:

  • The titles of the pages and posts must all be realistic and meaningful. They must be related to the general subject of your website in some way. However, you are permitted to use filler text for the content of all the posts and some of the pages, with a few exceptions, as will be specified shortly.
  • Every page and post must have an image that corresponds in some way to the title of the page or post. (The connection might be very loose; that’s OK.) These images must all be properly saved in the Media Library.
  • For images 300px or less in width, you must use the CSS float left or right property to make it flow with the surrounding text; only larger images should be displayed in the full width of the window. For any image that you did not take yourself, you must cite the source and copyright information in a caption immediately under the image.

Following are specific requirements for pages and for posts:

Pages

You must have at least six pages, with the following requirements:

  • Whether you use a listing of posts as your homepage or you use a customized homepage, the homepage must have a realistic introduction. In general, if someone who does not know that this is just a project goes to your homepage, they should think that it is a real website. (The only exception that might tip them off would be if you have a list of posts on your homepage, and then the extract text might be filler text. Other than that, your homepage should look as realistic as possible.)
  • You must have an “about” page that presents at least two or three paragraphs with a realistic description of the subject and purpose of your website.
  • You must have a contact page that uses any plugin of your choice to create a custom contact form. The form must ask the visitor for at least six pieces of information of your choice.
  • You must have a “legal information” page where you list the sources of all copyrighted visible material on the website not elsewhere cited. By “visible material”, I mean mainly text, images, audio, etc. However, if you cited the images or other media on the posts or pages where you used them, you do not need to repeat the citations here. You should not cite source code on this page since source code is invisible to users. (However, you must cite any borrowed code in the comments of the code where you use it.) You may also use this page to state your own copyrights and a privacy policy, if you choose to use one.
  • In addition to the homepage, the about page, the contact page and the legal information page, you must have at least two other pages of your choice. The titles must be realistic, but you can use filler text. Important: think carefully about the difference between pages and posts in WordPress. The titles of your pages should make logical sense why they are pages and not posts.
  • You are not required to have child pages, though you are certainly free to do so.

Posts

You must have at least twenty posts, with the following requirements:

  • You must have at least five different categories for categorizing your posts. You are not required to use parent or child categories; of course, you are certainly permitted to do so. The categories must be realistic and meaningful for your site.
  • Every post must have at least one tag, preferably two. The tags must be realistic and meaningful for your site.
  • Change the dates for at least five of your posts to July 2013.

Website theme

You will install a theme and then customize it significantly for your purposes.

  • Install any theme other than the default WordPress themes (i.e., not Twenty Twelve, Twenty Thirteen, etc.). It is perfectly fine to use a free theme. I recommend that you use a responsive theme, but this is not required.
  • Create a child theme and customize your theme to your taste. Your customizations must include at least the following required changes:
    • Select a web font from Google or other source, and implement it as the default font for your website.
    • Change the background colours of main content body, your header, and your footer; also change the line spacing or font size of any element of your choice. Your changes can be minor if you already like the default colours in your theme. You must have at least five CSS rules in your child theme stylesheet.
    • Borrow and adapt any PHP code snippet from any source (with proper citation) and change any PHP template file in your child theme. You can make whatever change you like, but you must adapt something.
  • Create a custom logo for your site and install and configure it such that it is visible on every page of the site. (See the “Supplementary resources” for free logo creators.)
  • Create and install a custom favicon for your site. The favicon should be visibly related in some way to the site logo. (See the “Supplementary resources” for favicon instructions.)

Plugin development

Create a plugin that has the following features:

  • Create a shortcode that accepts attributes to make any change of your choice to posts that include the shortcode. The shortcode must be something uniquely useful to the purpose of your site, and the attributes it accepts should give it adequate flexibility (e.g. text colour, font size, line spacing—all implemented properly in external CSS). The shortcode may add text to the beginning of or at the end of the content of posts that include the shortcode, or implement any other useful functionality that you like.
  • Make a widget available that adds some predetermined content to sidebars that include it. You may add any content you wish, but it should be meaningful for the purpose of your site.
  • Your plugin must follow proper plugin design techniques as specified in the video “How to Structure Your First WordPress Plugin“.
  • I highly recommend that you test the plugin on a localhost version of WordPress before you install it to your live site.

Additional WordPress functionality

In this course, we covered the most important functionality of WordPress. However, there are a few important topics that we did not have time to cover. For this part of your project, you are required to read one of the following chapters that we did not cover in class, and then do the specified tasks related to the chapter. You may choose any of the three, preferably the one that most relates to the purpose of your website. To test some of this additional functionality, you might need to create multiple e-mail accounts; refer to the “Supplementary resources” for how to do this.

Choose one of the following functionalities:

Configure advanced commenting features

Comments are a critical part of Web 2.0, since they permit visitor to actively participate in and contribute to a website with little effort. If you choose to implement this additional functionality, then do the following:

  • Read Chapter 8 of the WordPress textbook: “Letting Your Readers Talk Back”
  • Authorize comments by default on your entire site. Do not require login to leave comments. However, do require moderation.
  • Disable comments on one post of your choice (not a page, but a post).
  • Sign up with Gravatar and set up your Gravatar with your real e-mail address and a Gravatar. Configure your comments to display Gravatars.
  • Enable Facebook and Twitter login for visitors to leave comments. For this, you must use the relevant feature in Jetpack or another plugin.
  • Create fake login conversations for two different posts. This will show you how the comment feature works from the administrator perspective. From a browser where you are not logged in, add comments from at least five different fake users, with at least two levels deep. Include comments from your real administrator account within the conversations. Confirm that your administrator comments display your Gravatar.
  • Obtain an Akismet API key and enable Akismet antispam on your site.

Setup multiple users

The ability to manager multiple users is a key feature that makes WordPress a content management system, beyond being just blogging software. If you choose to implement this additional functionality, then do the following:

  • Read Chapter 11 of the WordPress textbook: “Collaborating with Multiple Authors”
  • Add at least four dummy users: two subscribers, one contributor, one editor. You will certainly need to create multiple e-mail accounts; refer to the “Supplementary resources” for how to do this. Use different user names for each account, but you would probably want to use the same password for these dummy accounts so that it is easier to remember. However, do not use your administrator password for test accounts—that would be a serious security flaw!
  • Make sure that your site is configured to show author names with posts. Most themes do this by default, but if not, you have to figure out how to get your specific theme to do this.
  • Create at least two posts using the contributor account and approve them using the editor account. Create at least two posts using the editor account. Your other posts should be created using your main administrator account. Thus, your site must include at least three different authors. These posts are all included in the total posts count for this project.
  • Include a widget that displays all the different authors on your site. You might need to install a plugin for this (see p. 367 of the WordPress book).
  • Use a plugin to highlight author information, either at the end of their posts or on dedicated pages. You may use one of the plugins described in pp. 367–369, or something similar.
  • Create at least one password-protected post and at least one private post.

Increasing and retaining visitor traffic

A public website is launched in order to be read, so it is important to learn how to draw visitors to the site and how to keep them coming back. If you choose to implement this additional functionality, then do the following:

  • Read Chapter 12 of the WordPress textbook: “Attracting a Crowd”.
  • Enable share buttons for your posts, featuring at least e-mail, Facebook and Twitter.
  • Customize the share buttons so that their CSS style matches the colour scheme of your site.
  • Implement a plugin to let visitors rate or “like” individual posts. It is OK if you require visitors to be logged in to use this feature; that is your choice.
  • Implement a plugin (such as Jetpack) to permit visitors subscribe to receive notifications for any new posts.
  • Connect any personal social media account of your choice (e.g. Facebook) to automatically create a message whenever you publish a new post.
  • Install and configure an SEO plugin.
  • Install a site statistics plugin (Jetpack is fine).

Submission instructions

  1. If you haven’t already done so, you must create an administrator account for me on your website. If you have already done this for the WordPress exercises, then do not create it again.
    • For the exact user name to use, read the submission instructions in Moodle.
    • Choose a secure password for this account, and write it in the “Online text” submission section of Moodle. Note that I will change the password to a strong password after I log in. Also note that even with an administrator account, I will not be able to see your own personal password.
  2. Submit all the following URLs (in the “Online text” submission section of Moodle):
    • WordPress website homepage:
    • Photo gallery:
    • Post or page with audio:
    • Post or page with video:
    • Child theme style.css:
    • A sample page or post that uses your shortcode:
    • A sample page or post that does not use your shortcode:
  3. Briefly explain the functionality of the plugin, shortcode and widget that you created.
  4. State which of the extra chapters (8, 11 or 12) that you chose to read and implement for the project (in the “Online text” submission section of Moodle). In addition, depending on which chapter you choose, submit the following information:
    • Chapter 8: Discussion. Submit URLs for:
      • Post with disabled comments:
      • Post 1 with comment conversation:
      • Post 2 with comment conversation:
    • Chapter 11: Multiple authors. Submit URLs for:
      • Posts created with the contributor account (minimum 2):
      • Posts created with the editor account (minimum 2):
      • If highlighted author information is on dedicated pages (rather than at the end of their posts), URLs for each author’s information page:
      • Password-protected post:
      • Private post:
    • Chapter 12: Increasing visitors. Submit the following information:
      • For the option to permit visitors to subscribe to receive notifications for any new posts, if this feature is not on a sidebar visible on all pages, the URL to the page that gives this subscription option
      • Name of the plugin you use to connect a social media account to automatically create a message whenever you publish a new post
      • Name of the plugin for SEO
      • Name of the plugin that provides site statistics
  5. Upload your full compressed WordPress website to Moodle. Using the backup plugin that you have installed, make a full backup of your completed project site. A “full backup” means a backup of your database, all your files, images, audio files, etc.–everything. Use any compressed file format (e.g. zip, gz, bz2, etc.), but everything must be backed up into one single file. You must name the file “Firstname Lastname BTM 395 Project.zip” (if not zip, use the appropriate file extension for the compression format). Upload this zipped file to Moodle as part of your submission. If the file is too large for submission on Moodle, then send me a message on Piazza to let me know.
  6. Optional: permission to display your website to others. In the future, I would like to display some of the highest-quality projects to future students and to faculty members as examples of your work from this class. However, I will do this only with your permission. If you authorize me to display your project as an exemplar, then I will setup an entire WordPress installation for this purpose using the zipped files you have submitted (thus, you would not be required to maintain your project online if you don’t want to). Please note that giving me permission or not has no bearing whatsoever on your grade. Moreover, if you give me permission I might choose whether or not to display it. If you authorize me to display a copy of your project website to others as an exemplar, please copy and paste the following text to the “Online text” box in Moodle with your submission: “I give Dr. Chitu Okoli permission to display a full copy of my WordPress project submission as an example of the work from this class.

This project is due on Thursday August 22 at 11:59 pm.

Supplementary resources

  • You can obtain filler text from the lorem ipsum generator.
  • Sources of legal, free music (follow specified instructions given with each song for proper attribution)
    • Magnatune: High-quality music from all genres
    • Jamendo: Much larger selection than Magnatune, but much more variable quality
  • Sources of legal, free images and video (follow specified instructions given with each file for proper attribution)
  • Recommended sources for free (no cost), royalty-free (no need to pay commissions), attribution-free (no need to cite) logos:
    • LogoMaker
    • With this source, although the free logos are yours to keep and use, you might run into someone else’s logo that uses a very similar design. If that’s OK with you, then go for it. If that’s not OK, then you have to pay someone to come up with something truly unique for you that you can claim copyright on.
  • Creation and installation of favicons:
    • Favicon generator: To create a favicon based on a logo, upload the logo image to the service, and then customize the upload. For a favicon, as with a logo, you might want to use transparency for background aspects that don’t require a specific colour.
    • Upload and install a favicon in WordPress
  • To create multiple dummy e-mail addresses for testing or other purposes, there are at least two possible strategies: