Divi Design Tips Blog

Creating A Filterable Music Discography Using WordPress & Divi

Here's how we created a filterable music discography using WordPress & Divi, with the help of some free or low-cost plugins and a little bit of custom CSS.

What We Created: A music discography
How We Did It: WordPress, Divi, some plugins and a little bit of CSS
Main Features: Filterable, conditional logic, custom taxonomy
Plugins We Used:

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

The custom fields can be made ‘required’ but for this website we have left them as not required.

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’.

Image of Toyah music release Toyah! Toyah! Toyah! built using Divi

The top section of the single ‘Release Type’ post designed using the Divi Theme Builder by pulling in data from Advanced Custom Fields.

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.

Screenshot showing Divi's Conditions editor

The conditional logic sets the ‘Buy’ button to only show if the administrator has given it a value (ie a link to buy online).

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;

Screenshot of Toyah discography filtered to show albums

The chosen filter shows with white text on a teal coloured background.

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;

A gallery made up of four additional image fields using ACF.

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.

 

About The Divi Design Tips Blog

We use Divi as our primary way to build WordPress websites. Our main focus in always on the design, ‘look and feel’ and the user experience of the websites we create. 

The Divi Design Tips Blog isn’t intended as a how-to-use Divi guide, as there are loads of great resources out there for that already. 

Instead, we launched the blog series as our way of giving an insight into some of the ways we use Divi, associated plugins, and custom CSS, Javascript and PHP, to get things looking – and working – how we want them for our clients.