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.

We added

  • random order on page load for the cards
  • the ability to set mix-blend-mode multiply on for product logos that wouldn't blend with the background color
  • the ability to disable selected rows so they won't be output
Resources Page Fields
Resources Page Field Group Populated
Recommended Products on the frontend

This members-only tutorial provides the steps to set up the above in Oxygen.

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

If you have not already, install and activate OxyMade. Add the framework in your Oxygen site.

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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: