In this exercise, you are making a WordPress theme for a website about a particular guitar: the Squire Hello Kitty Stratocaster.
The website is called Guitar Kitty.
First, please download the starter content.
Here is a silent video Loom video demonstrating the final site.
Already installed in the site are the following plugins:
- Create Block Theme
- Advanced Custom Fields
- CPT UI (for creating custom post types and taxonomies)
- Kadence Blocks and Kadence Blocks Pro
If this is a test, do not update plugins or WordPress (unless instructed by me).
Create a Theme
To begin, use the Create Block Theme plugin to create a new theme with the following characteristics:
- Theme Name: Your First Name
- Theme Author: Your First and Last Name
Add Google Fonts
Add the following Google Fonts to the theme:
- Poppins
- Pacifico
About the Content
REGULAR POSTS
In the Posts area of the dashboard, you will find 48 posts about the Hello Kitty guitar.
Each post has
- A title (obviously)
- A feature image
- Some lorem ipsum content
- 8 custom fields
The custom fields have been created with Advanced Custom Fields: I have attached them to the regular Post post-type.
The 48 posts are divided into three categories: Lovers, Haters, and On The Fence.
Note: some posts do not actually have values for the custom fields: imagine that they do.
CUSTOM POST TYPE: Not-Kitty Guitars
There is also a Custom Post Type, for Non-Kitty Guitars.
That post type has a Companies taxonomy.
The Non-Kitty guitars do not values for most of the custom fields. Imagine that they do.
MENUS:
There are already two menus created in the starter content. You will need to output them. Do not create the menus yourself: output the already-created ones in your theme.
Your Task
With both the Kitty guitars and the Non-Kitty guitars, make your theme output the following:
- the front page,
- archives, and
- single views of posts.
The header and footer will appear on all parts of the site, without variation.
You will be able to create most of the appearance of the site using the site editor.
However, you will also require custom css in places.
1) Header
The header will have a hotpink background, with white text.
It will also have a menu with links to the three regular post categories. This menu is already in the sample content: you don’t create it, just output it.
Note: the menu never becomes a hamburger icon.
The site title here will have two sizes, for mobile and tablet and above. At a certain size, there will be a transition between the two sizes.
Please see the screenshots and demo movie.
2) Footer
The footer will also have a hotpink background, with white text.
It will have a menu with links to three of the non-kitty-guitars company taxonomy archives. This menu is also already in the starter content.
Be sure to change the name in the “Site created by” sentence.
3) Front Page & Archive Pages
Between the header and the footer, the Front Page and Archive pages of the site will output the WordPress default: the latest posts in reverse chronological order.
The only difference between the front page and the archive pages is that the archive pages will have the category description.
Each Post Will Have the Following:
- title (linked to full post)
- feature image (linked to full post)
- excerpt + read more
- category
- date
There will also be a Gutenberg details block. At the bottom of the screenshot below, this is the Guitar Details block.
By default, the details block will be closed.
Inside the details block, you will need to output six of the custom fields, looking as they do in the next screenshot.
Installed with the starter content is the Kadence Blocks and Kadence Blocks Pro extension. They will be very useful in outputting the content as it appears below.
Note, however, that you will still need to use some custom CSS to get the appearance perfect.
Finally, the front page will also have pagination.
4) Single Views
On single pages, you will output the following:
- Title (not linked)
- Feature Image (not linked)
- Content
- Category
- Date
You will also need to output the six custom fields, but not in a details block.
What To Hand In
You will hand in only a theme, so all changes you make must be saved to your theme.
You will not hand in a Duplicator archive.