WordPress Lab Exercise: Obsessive Compulsive Guitar

Download the Files

Download these files.

When you unzip the files, you will see, inside the folder, a file called guitarmania.wordpress.2013-07-11.xml  and a folder called MockUp.

Make a new WordPress site in a testing environment like MAMP. Use your first name as the admin user and password. ( Do this only in a testing environment, NOT ON A LIVE SITE, for obvious reasons).

Import Sample Content

One way to import content in WordPress is to use the WordPress Importer ( Tools < Import ). If you’ve never used the Importer before, WordPress will prompt you to install it.

Normally, this is quick seamless process. However, in the Langara labs, downloads through WordPress are being blocked. Naturally, there is a workaround:

  • Go to the WordPress plugins repository: https://en-ca.wordpress.org/plugins/
  • Search for WordPress Importer
  • Click on the WordPress Importer in the search results
  • Click on Download
  • Save the zip file. You’ll use it a lot in this course
  • Unzip that file and copy it to the following location:
  • Go to the WordPress Dashboard > Plugins and click ACTIVATE for the WordPress Importer

( Save the zip file. You’ll use it a lot in this course. )

Once you’ve got the importer working  import the sample content in the XML file ( Tools > Import ).

Select “do not download media”. When prompted, assign the content to the user you made (you) when you set up this WordPress installation.

Now add feature images to all the posts. Set up a menu with the imported categories. Make tags “one pickup”, “two pickup”, and “three pickup”. Assign them to the relevant guitars:

  • One pickup: both Les Paul Jr posts
  • Two pickups: Les Paul Goldtop, Les Paul Special, Alex Lifeson, Les Paul Custom, Les Paul Standard
  • Three pickups: Ace Frehley, Peter Frampton

Now go to kevinmc.ca/wpclass/testsite1.

Download the big image at the front of that site. Make sure you first make the browser window as wide as your screen: WordPress serves different images depending on screensize (via the SRCSET IMG attribute), and we want the biggest one.

Figure out how to add that image to front of your site (assuming that you’re using the twentyseventeen theme).

In the WordPress customizer is a place you can upload a favicon and phone home screen icon. Find that area and use the instructions about size that you will find there to make an image in Illustrator that will work as a — good — favicon and home screen icon.

Figure out how to put a quote on the bottom of all pages of the site (like in the sample site listed above). NOTE: do not try to edit any part of the WordPress theme code (ie don’t use Appearance < Editor). 

Then figure out how to change the font, font-size, and background color of the site name and tagline (like in the sample site listed above). Do this by using the Chrome Inspector on your site (not on mine) to find the CSS changes you need.

Then put those changes into the CSS panel in the Theme Customizer.

Finally, figure out how to make more CSS changes and then show them to me or the class Teaching Assistant.

Rick Neilson 5 Neck Hamer