Categories
WordPress WordPress Templates

WordPress FSE Exercise: Art Battle 2024

First, please download the starter files. This is a Duplicator package.

Now, download the screenshots.

Finally, please watch this Loom video demonstration of the look and behaviour of the site.

Note that the layout for the home, archive and search results page is basically the same. The only difference is the addition of a title in the archive and search results (above the query loop).

Finally, install the package in your development environment. Be sure to make an admin account as part of that process, so that you can login to the site.

If you get an error in the installation, try changing your PHP version.

Step By Step Videos

Now follow the steps in this series of videos.

This will take you about 3/4 of the way through creating the site.

NOTE: the interface for Create Block Theme and Adding Fonts to WordPress has changed, so watch this video first.

You will then finish the task by adding additional features to the site through the Full Site Editing interface.

When Creating a Blank Theme

Do not create a clone theme. You want a basic starter theme instead.

When creating the new starter theme, please make sure that you follow this naming convention:

  • Name: Your First Name Art Battle
  • Author: Your Full Name

It is important that you follow this naming convention, so that the marker can know which theme is yours.

Make That Theme Active

Before doing any editing, make the new theme active.

The Task

Examine the screenshots and video of the site. Set up your theme to look and behave as in the screenshots and videos.

Pay close attention to spacing at all screen sizes.

Make sure that text never touches the edge of boxes.

As noted, the video series shows you how to do about 3/4 of the site.

However, you also need to make your theme successfully output the following:

  • front page (layout similar to archives)
  • search results (with title. layout similar to archives)
  • unsuccessful search results
  • 404 page (you can test by adding random characters to the site url)

Fonts

Use the two fonts suggested in the videos.

CSS Changes

A few CSS changes will be needed, including

  • fixing the awkward breakpoint when the layout changes from one column to two column. This is in the video series.
  • getting the category list block outputting its content horizontally. This is not in the video series.
  • possibly more. I might have forgotten something. Check the screenshots and demo video.

What to Hand In

To make those changes actually part of your theme, and therefore portable, you need to use the Create Block theme plugin to overwrite your starter theme.

Don’t forget to do this before handing in your theme, or we won’t see your work.

To hand in your work, do not make a Duplicator package.

Instead, make a zip file of the theme folder (not the whole WordPress installation).

Then copy that zip to your desktop and hand it in.

You can also export your theme from the Create Block Theme interface. That will export as a zip file.

On the Mac, dragging a file from the Applications folder, where MAMP resides, will create a shortcut to the file.

It will NOT copy or move the file.

So make sure that you right-click, choose copy and then paste it to your desktop before handing it in.