{{Please leave this line alone (sandbox heading)}}<!--
- Welcome to the sandbox! *
- Please leave this part alone *
- The page is cleared regularly *
- Feel free to try your editing skills below * ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■-->
https://www.reddit.com/r/Wordpress/comments/1rcg5la/facetwpgenerationg_a_card_within_the/
: FacetWP isn’t really “building the cards” fully on its own.
It just shows a list of results. You still need to decide what each result should look like (title + fields) and style it with CSS.
therefore a simple Approach would be like so:
Make one card layout (title link + a few fields).
Only show a field if it has a value (so we don’t get empty “Type:” lines).
Use paging (show 12–24 items per page) so it stays fast.
our grid code is fine. It will automatically switch between 2–3 columns depending on screen width.
we need top Keep hover effects light, and don’t rely on hover for mobile. therefore we Need to make the title/card clickable.
For accessibility: we could make use of real links/buttons and make sure keyboard users can tab to the card links.
hi there good evening, dear friends,
how are you doing are generating a card in the FacetWP Listing Builder.
I currently want to build a mini-catalog website using:
WordPress
CPT-UI (for custom post types)
ACF Pro (for custom fields)
FacetWP (for filtering/search)
The Goal: well i want to display ~300 catalog items as clean, professional cards. Using ONLY public data (no personal info for GDPR safety).
And since i was receiving lots of help - also on such WordPress-Postings - i want to ask here - if somebody could help out here!
so here is the start: ... see below my Current Setup and the plan - with some ascii-images that i have created.
First of all - as i am pretty new to FacetWP - some preliminary questions and some assumptions:
a. well the facetwp allows us to visually design how we search results (posts, products, etc.). that said:
b. all the data should appear on WordPress site
the question is how to generate a card using the FacetWP-Listing Builder?
Which methods and techniques are here used / useful. which pitfalls are known and what approaches can you recommend?
below i have written down some thoughts and ideas and some possivle "aproaches"
look forward to hear from you.
greetings
ps. see some of the thinks i allready have - and which are the conceptual basics here - now i have to find out how to operate all these things.
a. a shematic view on the set:
`Week 1: Setup
├── Create CPT via CPT-UI
├── Add ACF fields
└── Import data (manually or via CSV)
and then : Design
├── Build basic card in FacetWP
├── Add grid layout
├── Style hover effects
└── Test on mobile`
and then - in the next Week: Filters & Polish
├── Configure facets
├── Add facet labels
├── Test all combinations
└── GDPR/legal review
`
furthermore: hmmm - see some gerneral aspects of the card-creation-process: see the example:
`
┌─────────────────────────────────────────────────────────┐
│ MINI-CATALOG SYSTEM ARCHITECTURE │
└─────────────────────────────────────────────────────────┘
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ DATA SOURCE │───▶│ STRUCTURE │───▶│ PRESENTATION │
│ (Source Data) │ │ (WordPress) │ │ (FacetWP) │
├─────────────────┤ ├─────────────────┤ ├─────────────────┤
│ Public Data │ │ Custom Post Type│ │ Listing Builder │
│ Source (e.g., │ │ "Catalog Items" │ │ Card Template │
│ EU Database) │ │ (via CPT-UI) │ ├─────────────────┤
├─────────────────┤ ├─────────────────┤ │ • Card Design │
│ SELECT ONLY: │ │ ACF Pro Fields: │ │ • Grid Layout │
│ ✓ Item Title │ │ • Title │ │ • Filters │
│ ✓ Country │ │ • Country │ │ • Search │
│ ✓ Category │ │ • Website │ └─────────────────┘
│ ✓ Technologies │ │ • Type │ │
│ ✓ Sector │ │ • Technologies │ ▼
│ ✓ Website │ │ • Sector │ ┌─────────────────┐
│ ✗ No Personal │ │ • Description │ │ FINAL OUTPUT │
│ Data │ └─────────────────┘ │ Mini-Catalog │
└─────────────────┘ │ │ Cards with: │
│ │ │ • Clean design │
▼ ▼ │ • Hover effects │
┌─────────────────────────────────────────────────────────┐ │ • 2-3 columns │
│ GDPR SAFE ZONE │ └─────────────────┘
│ ✓ No personal data stored │
│ ✓ Only institutional information │
│ ✓ Public data only │
│ ✓ Legal notice on website │
└──────────────────────────────────────────────────────┘
`
with the card-design overview:
Option 1: Minimal Option 2: With Icons Option 3: Compact
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Item Name │ │ Item Name │ │ Item Name │
│ │ │ │ │ ┌─────────────┐ │
│ Type: Value │ │ Type: ● Value │ │ │ Type/Country│ │
│ Country: Value │ │ Country: DE │ │ └─────────────┘ │
│ │ │ Tech: Cloud │ │ │
│ [Details] │ │ [Details] │ │ [→] │
└─────────────────┘ └─────────────────┘ └─────────────────┘
step-by step Card Building: - my aproaches
Step 1: outer Card
`
┌─────────────────────────────────┐
│ Padding: 20px │
│ Border: 1px solid #e5e5e5 │
│ Border-Radius: 8px │
│ Background: #ffffff │
└─────────────────────────────────┘
`ÖJJJJJJÄ
STep 2: Titel
┌─────────────────────────────────┐
│ Titel (klickbar) │
│ Font: Large, Bold │
│ Margin-bottom: 10px │
└─────────────────────────────────┘
STep 3: Meta-Bereich
┌─────────────────────────────────┐
│ Typ: Beispiel │
│ Technologien: Cloud, AI │ ← Font: Small
│ Sektor: Health │ ← Color: #666
└─────────────────────────────────┘
STep 4: Button
┌─────────────────────────────────┐
│ [ Zum Eintrag ] │ ← Border-Radius: 6px
└─────────────────────────────────┘
see the current setup:
┌─────────────────────────────────────────────────────────┐
│ SYSTEM ARCHITECTURE │
├─────────────────────────────────────────────────────────┤
│ 1. Custom Post Type "Catalog Items" (CPT-UI) │
│ 2. ACF Fields: Title, Country, Type, │
│ Technologies, Sector, Website, Description │
│ 3. FacetWP Listing Builder for card design │
│ 4. Frontend: Filterable grid of cards │
└─────────────────────────────────────────────────────────┘
guesses - i think that i can add lots of the above mentioned data - here - in this fields
And in the following i have some screenshots - that may be helpful too: hmm - are those the right pointers for creating a grid and styling 'cards': see also here; https://d.pr/i/Je02RL
and besides that: can we use the style tab to style the cards:
i have created the taxos (taxonomies ) in the list builder.
and see what i have to do now:
i have to creat the following things
Basic card with padding, border, border-radius
Clickable title linked to single page
Meta information in small gray text
"View Item" button
Grid layout with CSS
the Card Design i am aiming
┌─────────────────────────────────┐
│ [Item Title - clickable] │
├─────────────────────────────────┤
│ Type: Example Value │
│ Technologies: Cloud, AI, IoT │
│ Sector: Healthcare │
├─────────────────────────────────┤
│ [ View Item ] │
└─────────────────────────────────┘
btw. do you think that i need to have this
.
facetwp-template {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.catalog-card {
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.catalog-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}`
hmm - well i am looking for advice on:
Grid Layout - 2 vs 3 columns on desktop? What's your experience?
Hover Effects - Subtle vs noticeable? Any creative ideas?
Empty Fields - How do you handle missing data elegantly?
Performance - Best practices for ~300 items with filters?
Accessibility - What should I consider for card interfaces?
Responsive Design - How do your cards behave on mobile?
What's working well:
FacetWP Listing Builder is intuitive for visual design
Clear separation (CPT for structure, ACF for data, FacetWP for display)
No code needed for basic card layout
Current challenges:
Adding facet labels requires custom PHP
Ensuring consistent card heights
Mobile optimization
Performance with many filters
Questions for the community:
How do you structure your ACF fields for catalog items?
Any FacetWP tips/tricks you've discovered?
What's your approach to card design in 2024?
How do you handle GDPR when displaying third-party data?
Would love to see examples of your FacetWP projects and hear about what worked (or didn't)!
Love to hear from you
Thanks in advance!
update: wIt will automatically switch between 2–3 columns depending on screen width.
we need top Keep hover effects light, and don’t rely on hover for mobile. therefore we Need to make the title/card clickable.
For accessibility: we could make use of real links/buttons and make sure keyboard users can tab to the card links.
: FacetWP isn’t really “building the cards” fully on its own.
It just shows a list of results. You still need to decide what each result should look like (title + fields) and style it with CSS.
therefore a simple Approach would be like so:
Make one card layout (title link + a few fields).
Only show a field if it has a value (so we don’t get empty “Type:” lines).
Use paging (show 12–24 items per page) so it stays fast.
our grid code is fine. It will automatically switch between 2–3 columns depending on screen width.
we need top Keep hover effects light, and don’t rely on hover for mobile. therefore we Need to make the title/card clickable.
For accessibility: we could make use of real links/buttons and make sure keyboard users can tab to the card links.
"Only show fields if they have values" This is GOLD for clean design!
FacetWP Listing Builder:
For each field: Check "Show if not empty"
Don't load all 300 at once" - we need to take care for the performance tip par excellence!
My previous thinking: Corrected understanding:
┌─────────────────┐ ┌─────────────────┐
│ FacetWP │ │ FacetWP │
│ "builds" the │ │ delivers data │
│ card │ │ │
├─────────────────┤ ├─────────────────┤
│ That was too │ │ YOU tell it: │
│ optimistic │ │ "Show title, │
│ │ │ then ACF field X│
└─────────────────┘ │ then button" │
└─────────────────┘
│
▼
┌─────────────────┐
│ CSS formats │
│ everything into │
│ a proper card │
└─────────────────┘
"Only show fields if they have values"
Without condition check: With condition check:
┌─────────────────┐ ┌─────────────────┐
│ Hub XYZ │ │ Hub XYZ │
│ Type: │ ← empty! │ Technologies: │
│ Technologies: │ │ Cloud, AI │
│ Cloud, AI │ │ Sector: Health │
│ Sector: Health │ └─────────────────┘
│ Website: │ ← empty!
└─────────────────┘
In FacetWP Listing Builder:
👉 For each field: Check "Show if not empty"
Performance tip par excellence!
Bad practice: Good practice:
┌─────────────────┐ ┌─────────────────┐
│ 300 Cards │ │ Page 1: 12 Cards│
│ → slow │ │ → fast │
│ → overwhelming │ │ → clear │
│ → mob nightmare │ │ → "Load More" │
└─────────────────┘ │ or pager │
└─────────────────┘
Practical Implementation in FacetWP Listing Builder
STEP 1: Base Structure (always visible)
┌─────────────────────────────────────┐
│ ⬛ TITLE (Post Title) │ ← always there
│ • Link: Post URL │
│ • Style: Large, Bold │
├─────────────────────────────────────┤
│ │
│ STEP 2: Conditional Fields │
│ ┌─────────────────────────────────┐ │
│ │ [SHOW ONLY IF NOT EMPTY] │ │
│ │ ⬛ Type ACF Field │ │
│ │ • Label: "Type: " │ │
│ │ • Condition:"Show if not empty "│
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ [SHOW ONLY IF NOT EMPTY] │ │
│ │ ⬛ Technologies ACF Field │ │
│ │ • Label: "Technologies: " │ │
│ │ • Condition: "Show if not empty"│
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ [SHOW ONLY IF NOT EMPTY] │ │
│ │ ⬛ Sector ACF Field │ │
│ │ • Label: "Sector: " │ │
│ │ • Condition: "Show if not empty"│
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ ⬛ BUTTON │ ← always there
│ • Text: "View Details" │
│ • Link: Post URL │
└─────────────────────────────────────┘
BEFORE (all fields, even empty ones):
┌─────────────────────────────────┐
│ Digital Hub Berlin │
│ Type: │ ← empty!
│ Technologies: Cloud, AI │
│ Sector: │ ← empty!
│ Website: │ ← empty!
│ [View Hub] │
└─────────────────────────────────┘
AFTER (only filled fields):
┌─────────────────────────────────┐
│ Digital Hub Berlin │
│ Technologies: Cloud, AI │
│ [View Hub] │
└─────────────────────────────────┘
→ MUCH cleaner!
FacetWP → Settings → Pager:
┌─────────────────────────────────────┐
│ ☑ Enable pager │
│ │
│ Results per page: 12 │
│ │
│ Pager style: │
│ (●) Numbers │
│ ( ) Load more button │
│ ( ) Infinite scroll │
└─────────────────────────────────────┘
Frontend result:
┌───────────────────────────────────┐
│ Page 1 of 25 (total 300 items) │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Card1│ │Card2│ │Card3│ │Card4│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Card5│ │Card6│ │Card7│ │Card8│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Card9│ │Card10││Card11││Card12│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ ◀ 1 2 3 4 5 ... 25 ▶ │
└───────────────────────────────────┘
/* Equal height cards with different content /
.facetwp-template {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
align-items: stretch; / Critical for equal heights */
}
.catalog-card {
display: flex;
flex-direction: column;
height: 100%; /* Full height in grid */
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 8px;
background: #ffffff;
transition: all 0.3s ease;
}
.catalog-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.catalog-card .button {
margin-top: auto; /* Button always at bottom */
align-self: flex-start;
padding: 8px 16px;
background: #0073aa;
color: white;
text-decoration: none;
border-radius: 4px;
border: none;
}
/* Meta information styling */
.card-meta {
font-size: 0.9em;
color: #666;
margin: 10px 0;
line-height: 1.6;
}
.card-meta p {
margin: 5px 0;
}
Responsive Behavior
Desktop (3 columns): Tablet (2 columns): Mobile (1 column):
┌───┬───┬───┐ ┌───┬───┐ ┌─────────┐
│ C │ C │ C │ │ C │ C │ │ C │
├───┼───┼───┤ ├───┼───┤ ├─────────┤
│ C │ C │ C │ │ C │ C │ │ C │
├───┼───┼───┤ ├───┼───┤ ├─────────┤
│ C │ C │ C │ │ C │ C │ │ C │
└───┴───┴───┘ └───┴───┘ └─────────┘
CSS handles this automatically with:
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
Media queries for fine-tuning:
@media (max-width: 768px) {
.facetwp-template {
gap: 16px; /* Smaller gap on mobile */
}
}
Accessibility Implementation
Keyboard Navigation:
┌─────────────────────────────────┐
│ [Tab] → Hub Title │
│ ↓ │
│ [Tab] → View Button │
│ ↓ │
│ [Enter] → Open link │
└─────────────────────────────────┘
HTML structure:
Hub Name
... content ...
View Details
Implementation Checklist
Listing Builder: Enable "Show if not empty" for all ACF fields
Pagination: Set to 12-24 items per page
CSS: Implement equal height cards (button always at bottom)
Testing: Check cards with 1-2 fields vs. fully filled ones
Mobile: Test in Chrome DevTools for all screen sizes
Accessibility: Ensure keyboard navigation works
Performance: Monitor load time with 300+ items
Bonus: Handling Empty States
What if ALL optional fields are empty?
┌─────────────────────────────────┐
│ Digital Hub Berlin │
│ [View Hub] │
└─────────────────────────────────┘
→ Still works! Clean and honest.
summary
FacetWP delivers data → I design the cards
Conditional display → Only show what exists
Pagination is crucial → Never overwhelm the user/browser
CSS does the heavy lifting → Grid, hover effects, responsiveness
Top comments (0)