We’ve been working with British singer and songwriter – the ‘high priestess of punk’ – Toyah Willcox, since her official website (and even the World Wide Web in general) was in its infancy back in 2002.
Over the years, we’ve used various plugins to create a comprehensive online discography as a resource for fans and music journalists.
As Divi fans, when we came to redesign the website for 2023, we wanted to ditch the off-the-shelf plugins, as they often result in unwanted fields and frustratingly restricted layouts. Instead, we challenged ourselves to create the best official Toyah discography yet – using Divi.
Here’s what we did…
1. Create Music Releases Posts Using Custom Post Type UI
Using the free version of the Custom Post Type UI (CPT UI) plugin, we added a post type called Releases. This would allow us to create a location in the WordPress side-menu making it easier for the administrator of the website to easily add discography entries.
2. Create A Group Of Data Fields Using Advanced Custom Fields
Next, we needed some data fields to add to the custom post type. We used (again the free version) of Advanced Custom Fields (ACF) to build out the data that would be relevant to almost all releases:
- Title
- Label
- Formats
- Track List
We also added some fields that we knew not all releases would need:
- Producer (things like compilations would have too many)
- Catalogue Number (some digital-only releases won’t have one)
- Additional images (some digital-only releases won’t have any)
- Link to buy (many older releases won’t be available)
3. Build The Data (including custom taxonomy)
Once we were happy with the custom fields, we started to build the data and added a small number of releases.
To aid user experience, we added a custom taxonomy type, using the Custom Post Type UI plugin, called Release Types. This works in much the same way as tags and allows users to click on a ‘Release Type’ to see other similar releases.
4. Build A Single Music Release Template Using The Divi Theme Builder
Using the Divi Theme Builder, we were now ready to start building what the user would see – this is where the front-end design comes into it.
We wanted each release to have a summary of the basic info before any in-depth details. We designed a template that would display the front cover (the standard WordPress featured image from the release post type), with the title, catalogue number etc to the right of it.
We built this by using Divi’s standard text module, but instead of typing into the text content box, we added User Dynamic Content, which brings up a whole host of content options including all of the data fields we created with ACF.
As you can see below, the Release Types taxonomy creates a clickable link to all ‘Release’ posts that have been tagged with that ‘Release Type’.
The featured image being shown on the left uses the Divi Post Title module, with everything set to ‘not show’ except the featured image.
Under that, the main content is shown using the Divi Post Content module.
5. Add Some Divi Conditional Logic
As we’d set some fields we knew wouldn’t apply to all releases, we used a really great Divi tool called Display Conditions.
WordPress conditional logic is a game changer for those who don’t have great coding knowledge. In this instance the logic is simple – if the field is empty, don’t show the module (which in this case is a button).
6. Build A Main Discography Page Using Divi Filter Grid
Now we have some releases and our single release post template, we needed a page to show all releases.
For this, we used Divi Filter Grid – a plugin that cost $29 for a single site license.
We did very little other than add the query and filter settings and style the fonts and colours, as we wanted this page to be very simple since there’s going to be a lot of images on it.
One thing we wanted to do, which wasn’t standard in the Divi Filter Grid settings, was change the background colour of the filters. We did this by accessing the Active Filter section within the Custom CSS and adding the following code.
background-color: #64c9c4;
This adds a subtle, but effective, style that fits with the rest of the site and prevents the controls from looking like an un-styled plugin.
7. Additional Styling
To add some finishing touches to the main releases post type template, we created some additional styles, such as the giving the image gallery a white background, in its own section under the main details. This helps to break up the page and not overcrowd the main section with imagery.
We also used this code in the Custom CSS main element section, in order to centralise the gallery.
text-align: center;
Now, because we added the additonal images as separate custom fields, they would naturally display one on top of the other. To get them to stack side by side, we created a style called ‘inline_image’ with this CSS code:
.inline_image {
display: inline-block;
padding-right: 1vw;
}
8. Don’t Ignore Mobile & Tablet
‘Responsive’ doesn’t quite cut it these days, and mobile/tablet views often need specific layout modifications.
For example, if our single release type template simply responded to browser/device width, you would see the main image, then the track listing (imagine a 7-disc box set) before you even see the release name/title. We get around this by using Divi’s ‘disbable on…’ function, and we show/hide various elements within the template depending on the device type.
This allowed us to show the title, main details and full description before you get to the track listing. This makes for a much better user experience.
Summary
You don’t need a lot of coding knowledge or expensive plugins to be able to design good-looking websites.
Check out the rest of our Divi Design Tips Blog here to see what else we’ve been creating.