Project 3: WordPress Shop

🌎 Overview

We’re going to explore the world of WordPress by creating our very own (fictional) e-commerce shop using the popular plugin WooCommerce.

NOTE: I'm putting this right at the beginning because it's so very important! Please make sure to create a backup of your WordPress site after you spend any significant time working on it. You do not want to lose your work, so this is important! I cannot help you get your project back if you accidentally move it on your server or delete it, so it is imperative that you create a local backup whenever you invest time in your project!

🧠 Rationale

This assignment is designed to give you a deep dive into WordPress by creating a fresh installation on your server and working with one of the most popular WordPress plugins: WooCommerce. Realistically we doubt that many of you will go on to open an e-commerce shop, but it’s totally possible that you might– or perhaps that you’ll dabble in freelance WordPress design, in which case, an e-commerce page is a common request!

Not only will you learn the ins and outs of WooCommerce with this project, but you’ll also get practice selecting a WordPress theme and customizing it so that it’s unique. This project will give you practice that should set you up nicely to create something truly impressive for your final project– if you decide to stick with WordPress for your final project, that is! More on that later.

🏗 Structure

Your install should be done in your project-three folder:

• nmc/webdev/project-three/shop
• em/webdev/project-three/shop

It’s possible you might get a PHP error when you try to install WordPress, and if that happens to you, do not worry– we’ve got a quick workaround. On your server, highlight either the “nmc” or “em” folder. Click ⌘ + i for information. A tab window should pop up and on the menu bar find permissions. Make sure that the number for every folder (nmc/em, webdev, and project-three) is 755. Try installing WordPress again. If this doesn’t fix it, let me know on Slack!

Remember, you do NOT want to try to move your WordPress site by dragging and dropping it in your server. If you do that, you will break your site and lose your work. If you DO want to move your WordPress install to a different location on your server you’ll need to follow the steps in Moving a WordPress Site. This is one reason that it’s important to create a local backup of your site after you work on it for any significant amount of time.

📺 Content

As always, you can choose any topic you like for your sites. You’re welcome to dream up your own store or mimic an existing one.

You will need to create enough content (images, text, items for sale) to create a convincing home page and product pages, but that only 3-4 of those items for sale need to be fully complete. For example: aim for 8-10 items in your store, but only fully develop 3-4 of them; the remaining items can just be a picture and a very brief item description. For the items that you fully flesh out you can add a variety of things: detailed marketing copy, a video embed, customer testimonies, customizable varieties (sizes, etc.)– be creative here. If you borrow content from an existing e-commerce store, that’s fine– just make sure to give credit to your source! It’s important to note that we expect you not to actually set up a functioning store. 🤑 1

Note: Some themes come with demo content. You may use the demo content to help you get started working with a theme, but you may not use the theme's demo content as your content for this project. In other words, you need to swap out all the text and images.

📓 Grading (10 points total)

✅ Required Elements (6 points)

Each e-commerce site must include:

• A shop home page
• A page listing multiple products (a collection/section/etc.)
• Multiple products for sale (around 8-10)
• 3-4 of those products fully fleshed out
• Use of a variety of blocks
• Customization of theme using additional CSS

😍 Qualitative Elements

In general, I’ll be assessing your projects qualitatively on the appropriateness of your chosen themes to your site’s purpose and your intelligent use of WordPress features (custom CSS, plugins, widgets, etc.). And as always, I’ll be assessing overall effort and care, as well as creativity and ambition.

Additional qualitative elements for each site might include:

• The use of additional media types typically seen on commerce sites (videos, GIFs, 3D views)
• The creation of content typically found on e-commerce sites (product stories, sales, customer reviews, etc.)
• Creative and appropriate use of plugins/widgets/custom CSS
• Appropriate choice of theme: The default is fine to use but consider exploring others to find the one that works best for your project!

🤔 Reflection (1 point)

As usual, your reflection should directly address how you added qualitative elements to your project along with:

• New skills acquired
• Struggles faced
• Things you’re proud of (specifically address how you integrated the qualitative elements of the assignment)
• Additional things you’d like to learn / work on in the future

Be sure to include the names of any plugins that you incorporated and the names of the themes that you used. Remember, your reflection doesn’t have to be long, but it should be thoughtfully constructed, specific, and it should directly address how you moved beyond the required elements to create an exceptional website. Your reflection should live on your webdev homepage.

Submission

In addition to making sure that your sites can be found at one of the directory options outlined under the Structure section, you should make sure your projects are linked on your webdev homepage.

Remember, you will not need to upload the WordPress sites to your server– that automatically happens when you create the installation. However, you WILL need to re-upload the webdev homepage after you add your reflection and the link for this project.

Your instructor will evaluate your project by visiting those URL, so to double-check that everything’s in the right place, visit those URLs yourself, ideally in a separate browser or an incognito/private window to ensure that you aren’t falling victim to any caching issues. Check it once, and then check it again! If I can’t access your work it will be considered late.