Original WordPress Original Theme Creation
30% of Semester Grade
On this page:
For your final project you will create a customized WordPress theme for one of the following:
- professional portfolio
- mock business
- real business
- service-oriented organization
- educational site
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.
- 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
- Start with the “Underscores” theme and follow the assigned Lynda.com tutorial series on creating a custom theme, “WordPress: Building Themes from Scratch Using Underscores“.
- Make the theme responsive .
- Use custom Google Fonts by properly enqueing them.
- Use accessible and responsive menus.
- Make each responsive setting visually cohesive with one another. (Meaning: do not simply customize one screen dimension setting while leaving the others as the original theme!)
- Use a minimum of 6 plugins that extend the functionality of the theme
- You must incorporate some sort of gallery. This can be a traditional lightbox style gallery or a slider cycling through posts. You can use multiple galleries if your content calls for it. You can either enqueue a jQuery script to do this or use a plugin.
- Visually style the site differently from the Lynda.com site (in terms of color, typography, layout, etc. It should differentiate itself from the “popperscores” final site in tutorial.
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
Access to the Online Tutorial
To begin this assignment, you need to first get a subscription to Lynda.com, either as a paid subscription or as a free membership through the Carlsbad Public Library subscription. You can consider this tutorial to be a like a textbook, but it is instead video instructional materials.
Paid Lynda Option:
If you wish to pay for a Lynda membership, you can start with a 10-day free trial and elect to purchase a month of subscription for $30 thereafter. Should you purchase a month-to-month subscription, it will be incumbent upon you to cancel to avoid future charges after the first month. This option (premium membership only) also allows you to download the content to watch offline.
Free Lynda Option:
If you want to access this material for free, you can sign up online for a Carlsbad Public Library card. This step only provides you with a temporary pin number to do limited things online. YOU MUST THEN PHYSICALLY GO TO THE LIBRARY (see locations) to pick up the actual card to get a real library card number before you will have access to the free library Lynda.com portal. NOTE:You need to be 18 years or older to have your own account without a parent/guardian signature. Once you have your physical card with a permanent card number, you can login here:
Then you must select the “Lynda.com” link from the resulting page. If you have never set up a lynda.com account, you will need to set one up to log into lynda.com as a library portal member (not the same as your library login credentials).
If you can’t get to the library immediately, you can always set up a free trial, start the tutorials, get your library card before the ten day trial is over, and then cancel your Lynda membership before your credit card is charged.
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.
- Start with the WordPress: Building Themes from Scratch Using Underscores tutorial video.
- Download the exercise files under the “Exercise Files” tab under the video so that you will have them. (Other options next to the “Exercise Files” tab are “Overview”, “Transcript”, and “View Offline”.)
- Begin watching the videos. The ONLY videos you should feel confident completely skipping are “Setting Up a WordPress Development Environment” and “Installing and Setting Up NetBeans or Another IDE” . WHY? ….
- You should set up a new installation of WordPress and WordPress database/user on the class server, exactly like you did in the last project. Install the 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.
- Unless you already use NetBeans, you will have to pay for it to get the features that are any more useful than ones in any editor you already use. I recommend using what you are already comfortable with (Dreamweaver code view, Brackets, Komodo Edit, etc.).
- 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 can use your own font choices, BUT be aware that later in the tutorial there are places where you will need to swap out lesson files that already have the tutorial’s font choices scripted into the code. To avoid confusion, I recommend that most of you stick with the tutorial and then later go back to customize the site once you have a better understanding of how everything works.
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:
- avoid the problem of having to extract and remove the Theme Test Data.
- 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.
Official WordPress Codex
Some Good Plugins
- Fitvids (if you find that Youtube videos aren’t scaling properly, use this to make video and many other iframes responsive!)
- 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
- Google Analyticator
- WordPress SEO by Yoast
- WP-Invoice-Web Invoice and Billing
- WP-CRM (Customer Relations Management tool)
- Easy Digital Downloads
- WP Google Map Plugin
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!
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.