I recently made a big change to the way Collections pages are displayed on our Seamless Textures Unleashed site. I wrote an in-depth post on Graphics Unleashed about the visual changes and how we feel it improves things for visitors. In this post, I’m going to talk about the actual construction of the pages and what changed.
All of the Web sites we build use the Divi theme and page builder, so I’ll be discussing tools specific to Divi as well as some that are just WordPress tools.
One of Divi’s built-in post types is called a Project and it isn’t really significantly different than a Post other than the name. Previously each of the collection pages was built as a Divi project and you can see an example of Volume 1: Wood project below.
While I was able to duplicate an existing project and modify it for a new collection, there wasn’t technically a template in place. If I wanted to change the layout of all collections, they would each need to be modified one by one. That makes for a long and tedious process when there are currently 47 unique collections (and growing).
If my goal was to truly rebuild these collections, it was important to build a custom post type that contained the data I needed for each collection. This required plugins like Advanced Custom Fields and Divi Machine. For those unfamiliar with that set of plugins, I have done several videos where I used them for other custom post types. I recommend you watch Basics of Custom Post Types and Divi Machine for a comprehensive overview. For more details on how the tools were used to update Portfolios on this site; watch Create a Custom Post Type for Portfolios Part 1, Create a Custom Post Type for Portfolios Part 2 and Create a Custom Post Type for Portfolios Part 3.
Using techniques described in those videos, I created a custom post type named Collections with each piece of data needed for a collection. This involved a title, images, a short description, links to a PDF, an embed shortcode for the PDF and product SKUs. Below is a screenshot of the field group for Collections.
For the Flipbook field, I use the 3D FlipBook: Dflip Lite plugin to generate a shortcode for each of the collection PDF files so they can be embedded in the collection template via the field shown above. We use the WP Easycart shopping cart and the Pro ID and Lite ID are the number assigned to the Pro and Lite collections by WP Easycart.
Then using the Divi Theme Builder, a template was created to display the data from the fields. An archive template was also created to show all of the collections. Below you’ll see a screenshot of the new page for the Volume 1: Wood collection.
Now if I decide to change the layout of collections pages, I simply need to go into Divi Theme Builder and modify the template. All of the collections (47 and counting) will immediately be updated to the new layout at once. A side benefit of the new setup is that I’m less likely to miss something when adding a new collection as I did find a few things I missed in the old method.
Lastly, a quick pitch. Our seamless textures work great for many design tasks including Web design. So check out the collections and add a few to your design toolbox. As an added incentive, I’ve put everything on sale for 50% off during the month of June 2025.
0 Comments