WordPress Lab Exercise 3

NOTE: in this exercise, you should not edit any theme template files. 

Task One: Installing Your Site, Pt 1

  • Download the content. Unzip the file.
  • Inside the unzipped folder will be a folder called wp-configuration-exercise-big. Put it in /Applications/MAMP/htdocs
  • Rename the folder to wpconfigurationexercise. 
  • Start up MAMP.
  • In phpMyAdmin, make a new database called wpconfigurationexercise
  • Go to your web folder (on Mac: localhost:8888)
  • Click the link to the wpconfigurationexercise folder

Task Two: Running Duplicator

In the downloaded material is a file called installer.php and a zip file with a name with a lot of numbers in it (the name of the archive will be different from what’s in the screenshot below, but don’t worry). You will see links to both in your web browser.

Index View

These files are created with a very useful plugin called Duplicator, which allows you to move WordPress sites very easily. Click on the installer.php link.

In the next screen, use the settings in the screenshot below if you’re using MAMP on Mac. With other approaches, your database user and password might be different. Be sure to click Connect and Remove All Data rather than Create New Database (the former approach is more widely supported).

Duplicator:New Database

Click Test Connection. If you’ve entered the correct information above, you should see a message saying the connection is working:

At the bottom of the screen, click the “I have read…” button and then click Run Deployment. Finally, click OK when the Alert message comes up.

This will take you to Step 2 of the Duplicator Process.

In that screen, click on Advanced Options, and go to the Add New Admin Account section. Duplicator: New Admin Account

Do three things here:

  • Make a New Admin Account with your name as user and password. ( We’re doing this so that the lab isn’t delayed by people forgetting the name or password they used. It goes without saying, hopefully, that this would be a very bad idea on a live site… )
  • Click Keep Post GUID unchanged.
  • Click Run Update

The Final Step in the Duplicator process is to update your permalinks and delete the original Duplicator files.

Task Three Installation Cleanup

After logging into the site, you will will notice a box at the top of the dashboard. It should look like this:

When you go to the Cleanup page, click on Delete Reserved Files and then click on Clear Build Cache. We do this because there is content such as user data the site you’re moving. As well, if this were a live site, you wouldn’t want someone to run the installer.php file again, right?

Once you do this you will likely get a message like this: It is recommended to remove your archive file from the root of your WordPress install. This will need to be done manually. 

To do this, go on your computer to the root level of your WordPress installation. In this case it would be in htdocs/wpconfigurationexercise.


Task Four: Change Themes

Change to the twentyfourteen theme.

(You might see a message about updating WordPress and the themes in this exercise. If you’re at home, please update. If you’re at Langara, don’t bother trying: the network blocks it, and the manual workarounds would be a bit tedious at this point.)

Task Five: Set Up The Menu and A Contact Form

Install the Contact Form 7 plugin. Normally you can do that from the Dashboard Plugins area. But if you’re in a Langara lab, you will need to install it manually:

  • download it from wordpress.org (search the plugins section)
  • unzip it if the browser doesn’t do that automatically
  • put the resulting folder in htdocs/wpconfigurationexercise/wp-content/plugins
  • go to Dashboard > Plugins and activate Contact Form 7

Now figure out how to make a simple contact form, and put it in a page (not a post) called Contact Us.

Put a link to that page in the menu (you might need to activate the main menu, but there is a menu already built in the site you’ve downloaded). From the already-built menu, make sure you  remove the link to Contact ( you’re replacing the old Contact page link with a Contact Us link ).

Add a HOME link to the menu, too

Task Six: Set a Static Home Page

Set the page called Sample Page to be the first page of your website. Change the title of the page to “Welcome”.

Set up a link to BLOG in the menu. When a user clicks this link, they will see all the latest blog posts. Make sure that this link is the second from the end of the menu, and that Contact Us is the last link.

Task Seven: Set Up a Slider

Figure out how to make a slider on the first page of your site that shows posts that are tagged with canada. You must be using the twentyfourteen theme for this to work. With this theme, you do not need to install a slider plugin.

Task Eight: Add A Background Pattern

Go to DINPattern.com and download all the patterns (search the home page for “kitchen sink”: command-f on Mac). From the downloaded files, find the file entitled battle-royale and set it as the background image of the website.

Make the background pattern repeat down the right side of the page only.

Task Nine: Add A Logo To The Sidebar

Download this file and add it as a logo in the sidebar, sitting above Recent Posts but below the Site Name.

If you were able to update WordPress (ie you’re not at Langara), there is an easy way to do this. If you weren’t able to update, you’ll need to figure out another way.

Once you add the image to the sidebar, you will notice that the words look pretty crappy.

Without reuploading, figure out how to edit the image file in WordPress itself and crop off the text.

Your site should now look more or less like this:

Task Ten: Quotation

If you click on Politics, Food, or Culture in the menu, you will see a quotation at the top of the Category Archive page that loads. But if you click on Sports, you will notice that there is not a quotation in that section. Figure out how to add the following one:

“It isn’t the mountains ahead to climb that wear you out; it’s the pebble in your shoe.”
– Muhammad Ali

Task Eleven: Blog Post Order

On the blog posts page, make the posts entitled Tempora, voluptat! and Tenetur, faceless! sit at the top of the post listings—without changing their dates of publication.

Task Twelve: Modify your Contact Form

Figure out how to modify your contact form to have a question like Can We Send You Spam? like in the screenshot below:

Task Thirteen: CSS Modifications

In the CSS area of the Theme Customizer, add code to do the following. Don’t edit the theme files directly: just add CSS in the Customizer. 

Please download and consult the screenshots to see what I’m describing here.

  • Make the entire content not take more than 1000px
  • Make the entire content sit in the horizontal middle of the page
  • Make the background image hang off the edge of the right side of the page. (In other words, make it so that we see only part of the background image).
  • Make all text in the site use the GEORGIA font stack
  • Make the quotations at the top of category archives 2.5rem. Make sure that the name of the person quoted is not that size (ie it’s left at the default size).
  • Make the background to the Search icon slategrey.
  • Make that background darker on hover
  • When on category archives, make the self-referential menu item background color the same grey background as the one you put behind the search icon.
  • Make the background to the submit button on the contact page orange—and red on hover.

Final Task: Duplicator

Using the Duplicator plugin (it’s already in your site), make an archive of your site. Trade duplicator packages  (installer and zip file) with a classmate. Install your classmate’s duplicated site in your MAMP test environment at the URL localhost:8888/classmate (the 8888 port might not be in the URL if you’re on Windows or Linux when you do this part).

When you are done, show me or one of our friendly Instructional Assistants your site and the duplicated and installed classmate’s.