As part of the WPDevDesign site redesign that we are currently working on, we set up a "Resources" page that shows links to plugins that we recommend as a grid of cards.
Advanced Custom Fields Repeater was used for setting up custom fields like title, description for each product/item and these were output inside a card. Styling for elements of each card and the cards grid was done by adding OxyMade's utility classes.
- random order on page load for the cards
- the ability to set
mix-blend-modemultiply on for product logos that wouldn't blend with the background color
- the ability to disable selected rows so they won't be output
Step 1 - ACF Field Group
Install and activate ACF Pro.
If you would like to follow along or want the same fields for practice, here is the ACF export file.
You may ignore/delete the "WordPress Development" repeater field.
Step 2 - Populate Custom Fields
Edit the Page to which the field group is attached to and fill the data for as many rows as needed.
Step 3 - OxyMade
Step 3 - Repeater Code
Edit the Page with Oxygen.
Add a Code Block. Add a class of
w-full to make it 100% wide.
PHP & HTML:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $499 one-time).
Already a member? Log in below or here.