NOTE: in this exercise, do not edit any theme template files.
Task One: Installing Your Site, Pt 1
- Download the content. Unzip the file.
- Inside that folder will be a folder called theming-basics-duplicator. Put it in /Applications/MAMP/htdocs
- Rename the folder to wpconfigurationexercise.
- Inside that folder is a folder called usefulplugins. Delete it: it’s not needed for this exercise.
- 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. You will see links to both in your web browser.
These files are created with an amazing 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).
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.
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.
Just click on the Save Permalinks button and you will be taken to the site.
All you need to do here is save the Permalinks setting (although you can change the permalink scheme if you want, it’s not required).
Finally, in the Permalink settings page, you will notice a box at the top. After you’ve saved the Permalink settings, click the link in the box:
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 (including passwords in the database) in the site you’re moving.
Once you do this you will likely get this message: 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 Three: 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.)
Task Four: Set Up The Menu and A Contact Form
Install the Contact Form 7 plugin. 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 it 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 the form, and put it in a page called Contact Us.
Now put a link to that page in the menu (you might need to activate the main menu, but there is a menu already built). From the already-built menu, make sure you remove the link in to Contact ( you’re replacing the old Contact link with a Contact Us link ).
Task Five: Set a Static Home Page
Set the page called Sample Page to be the first page of your website.
Set up a link to BLOG in the menu. When a user clicks this link, they will see all the latest blog posts.
Task Six: 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.
Task Seven: Add A Background Pattern
Go to DINPattern.com and download all the patterns (search the home page for “kitchen sink”). From the downloaded files, find the file entitled battle-royale and set it as the background image of the website.
Task Eight: 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 Nine: 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 Ten: 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 Eleven: 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 Twelve: 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.
If you were not able to update WordPress (ie if you are in a Langara lab while doing this exercise), you won’t have the CSS panel in the Customizer. A workaround is to install the SIMPLE CSS plugin. ( Don’t forget how we install plugins in Langara labs…)
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 repeat down the right side of the page only
- Make all text in the site use the GEORGIA font stack
- Make the quotations at the top of category archives 2.5rem.
- Make the background to the Search icon grey.
- 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 that you can then hand in to the studentshare server.
If you are in WMDD 4840, include with the handed in files a text file called GROUP. Inside that file, list your group members. If this is WMDD 4840, this exercise is for marks.
If you’re in PUBL 1232, this exercise is for lab exercise marks. Show me or one of our friendly Instructional Assistants your work when you are done.