DEV Community: hubs

facetWP-creation of Cards

hubs — Fri, 27 Feb 2026 15:42:30 +0000

{{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 * ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■-->

┌─────────────────────────────────────────────────────────┐
│              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                           │
└──────────────────────────────────────────────────────┘

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            │
└─────────────────────────────────┘

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:

https://d.pr/i/fD120E

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)!

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    │
└───┴───┴───┘              └───┴───┘                   └─────────┘

see the code
`
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

Generating a Card in the FacetWP Listing Builder

hubs — Tue, 24 Feb 2026 17:39:31 +0000

good day dear folks

"Generating a Card in the FacetWP Listing Builder"

description: "A step-by-step guide on building a mini-catalog with WordPress, CPT-UI, ACF Pro, and FacetWP, focusing on card design, performance, and GDPR."

tags: "wordpress, facetwp, tutorial, webdev"

Hi there, good evening, dear friends,

How are you doing? Today, we're going to dive into 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: I want to display ~300 catalog items as clean, professional cards, using ONLY public data (no personal info for GDPR safety).

Since I've been receiving lots of help on such WordPress postings, I want to ask here if somebody could help out!

So, here is the start... see below my current setup and the plan, with some ASCII images that I have created.

First Things First: Understanding FacetWP

First of all, as I am pretty new to FacetWP, here are some preliminary questions and assumptions:

a. FacetWP allows us to visually design how we search results (posts, products, etc.). That said:
b. All the data should appear on the WordPress site.

The core question is: how to generate a card using the FacetWP Listing Builder?
Which methods and techniques are used here? Which pitfalls are known and what approaches can you recommend?

Below, I have written down some thoughts, ideas, and some possible "approaches."

I look forward to hearing from you.

Greetings,
ps. See some of the things I already have, which are the conceptual basics. Now I have to find out how to operate all these things.

The Master Plan

A schematic view of the setup:

Week 1: Setup

├── Create CPT via CPT-UI
├── Add ACF fields
└── Import data (manually or via CSV)

Then: Design

├── Build basic card in FacetWP
├── Add grid layout
├── Style hover effects
└── Test on mobile

Then: Filters & Polish

├── Configure facets
├── Add facet labels
├── Test all combinations
└── GDPR/legal review

System Architecture & GDPR Safety

Here is a general overview of the card-creation process:

┌─────────────────────────────────────────────────────────┐
│              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                                │
└─────────────────────────────────────────────────────────┘

Card Design Overview

Here are a few design options I'm considering:

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 Approaches

Step 1: Outer Card

┌─────────────────────────────────┐
│  Padding: 20px                  │
│  Border: 1px solid #e5e5e5      │
│  Border-Radius: 8px             │
│  Background: #ffffff             │
└─────────────────────────────────┘

Step 2: Title

┌─────────────────────────────────┐
│   Title (clickable)              │
│  Font: Large, Bold              │
│  Margin-bottom: 10px            │
└─────────────────────────────────┘

Step 3: Meta Area

┌─────────────────────────────────┐
│  Type: Example                  │
│  Technologies: Cloud, AI        │ ← Font: Small
│  Sector: Health                 │ ← Color: #666
└─────────────────────────────────┘

Step 4: Button

┌─────────────────────────────────┐
│     [ View Item ]               │ ← Border-Radius: 6px
└─────────────────────────────────┘

The Current Setup: A Summary

┌─────────────────────────────────────────────────────────┐
│                    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                   │
└─────────────────────────────────────────────────────────┘

I've created the taxonomies in the Listing Builder. I think I can add lots of the above-mentioned data in these fields.

My To-Do List for the Card Design

I have to create 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 for:

┌─────────────────────────────────┐
│   [Item Title - clickable]      │
├─────────────────────────────────┤
│ Type: Example Value             │
│ Technologies: Cloud, AI, IoT    │
│ Sector: Healthcare              │
├─────────────────────────────────┤
│         [ View Item ]           │
└─────────────────────────────────┘

The Game-Changing Advice I Received

The community provided some incredible insights. Here’s the corrected understanding and best practices.

The Core Concept: FacetWP's Role

My previous thinking was that FacetWP "builds" the card. The reality is that FacetWP delivers the data, and you tell it what to display.

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   │
                                  └─────────────────┘

The Golden Rule: Conditional Display

"Only show fields if they have values." This is GOLD for a clean design!

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

The Performance Tip Par Excellence: Pagination

Don't load all 300 at once!

Bad practice:	Good practice:
`┌─────────────────┐`	`┌─────────────────┐`
`│ 300 Cards │`	`│ Page 1: 12 Cards│`
`│ → slow │`	`│ → fast │`
`│ → overwhelming │`	`│ → clear │`
`│ → mobile nightmare│`	`│ → "Load More" │`
`└─────────────────┘`	`│ or pager │`

                        `└─────────────────┘`

FacetWP → Settings → Pager:

[x] Enable pager
Results per page: 12
Pager style: (●) Numbers / ( ) Load more / ( ) Infinite scroll

Practical Implementation in FacetWP

Here’s how the logic translates into a card structure:

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                 │
└─────────────────────────────────────┘

The Result: From Cluttered to Clean

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!

The CSS: Making it a Real Grid

This CSS handles the grid, the card styling, and ensures equal heights (button always at the bottom).

/* 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;  /* Pushes button to the 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

The CSS handles this automatically with grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));.

Desktop (3 cols):	Tablet (2 cols):	Mobile (1 col):
`┌───┬───┬───┐`	`┌───┬───┐`	`┌─────────┐`
`│ C │ C │ C │`	`│ C │ C │`	`│ C │`
`├───┼───┼───┤`	`├───┼───┤`	`├─────────┤`
`│ C │ C │ C │`	`│ C │ C │`	`│ C │`
`└───┴───┴───┘`	`└───┴───┘`	`└─────────┘`

For fine-tuning on mobile:

@media (max-width: 768px) {
    .facetwp-template {
        gap: 16px;  /* Smaller gap on mobile */
    }
}

Accessibility Implementation

Ensure keyboard users can navigate your cards easily.

Keyboard Navigation:

[Tab] → [Hub Title] (focus)
  ↓
[Tab] → [View Button] (focus)
  ↓
[Enter] → Open link

Suggested HTML structure:

<a href="..." class="card-link" aria-label="View details for Hub Name">
    Hub Name
</a>
... content ...
<a href="..." class="button" aria-label="View full details">
    View Details
</a>

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 & Key Takeaways

FacetWP delivers data, you design the cards.
Conditional display is crucial—only show what exists.
Pagination is crucial—never overwhelm the user or the browser.
CSS does the heavy lifting—grid, hover effects, and responsiveness.

Questions for the Community

I'm still 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.

I'd love to hear from you!

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)!

Thanks in advance!

New: WordPress 6.6.2 Maintenance-Release: 15 bug fixes in Core and 11 in Bockeditor.

hubs — Tue, 10 Sep 2024 23:13:34 +0000

This minor release includes 15 bug fixes in Core and 11 in the Block Editor, addressing issues like unexpected CSS specificity changes in certain themes.

For a full summary of the maintenance updates, you can refer to the Release Candidate announcement.
WordPress 6.6.2 is a short-cycle release. The next major release will be version 6.7 planned for November 12, 2024.
If you have sites that support automatic background updates, the update process will begin automatically.

You can download WordPress 6.6.2 from WordPress.org, or visit your WordPress Dashboard, click “Updates”, and then click “Update Now”.

WordPress - what are some must-have plugins that you basically install every time you start a new project?

hubs — Wed, 17 Jul 2024 22:00:17 +0000

WordPress - what are some must-have plugins that you basically install every time you start a new project?

WordPress 6.6: What’s new for developers? news in july 10th

hubs — Sat, 13 Jul 2024 21:20:19 +0000

What’s new for developers? (July 2024) By Justin Tadlock
https://developer.wordpress.org/news/2024/07/10/whats-new-for-developers-july-2024/

What’s new for developers? (July 2024) By Justin Tadlock
July 10, 2024

covering: Blocks, Plugins, Themes

WordPress 6.6 is just days away, and it’s always an exciting time for developers when a new major release ships. There are lots of new features to tinker with and handy updates to make extending and using WordPress just a little nicer.

Officially, version 6.6 is expected to ship on July 16, 2024 (read the development cycle timeline for more information).

If you haven’t already done so, now is a great time to test your plugins and themes against the latest changes. WordPress 6.6 RC 3 is the most up-to-date version to check out.

Also, be sure to read the Field Guide, which covers all the major changes you should know about. It has links to all the Developer Notes and a breakdown of what happened during the development cycle.

As usual, this post will contain a list of development-related changes in the past month. Be sure to test them while using WordPress and Gutenberg trunk. Some of the features and changes listed below, unless otherwise noted, are under development and won’t be released until WordPress 6.7.

mehr Infos, Hintergründe

WordPress 6.6 with Anne McCarthy
https://youtu.be/MRUAzefDhjI

Plugins and tools - WordPress 6.6 developer notes

There are several dev notes for WordPress 6.6 that cover new features, updated APIs, and progress on experimental features:
Custom post type actions with Data Views

A new API in Gutenberg 18.6 lets you register and unregister post type actions when building custom Data Views. Currently, these actions appear in two places in the UI:

Site Editor views
Sidebar in the Post or Site Editor

The API is currently a part of the Editor package but will likely be moved to a dedicated package in the future.

JSON Schema for .wp-env.json

.wp-env.json files now have JSON Schema support, which you can define via the standard $schema property. This should make it easier to validate your JSON code in your preferred code editor.
Block Bindings API bug fixes

Several important bug fixes landed for the Block Bindings API:

Reverted a change that caused values beginning with a number to break.
Applied a fix for the Site Editor breaking when selecting bound and unbound blocks.
Corrected an issue where Button blocks with empty content would not work within bindings.

Themes
WordPress 6.6 developer notes
That latest WordPress release will include many theme-heavy features and enhancements. Be sure to read through the dev notes to catch up before 6.6 goes live:

WordPress 6.6 is changing the game for Custom Fields
https://www.youtube.com/watch?v=YNtHywyxWdc
WordPress is bringing Custom Fields to blocks. The Block Bindings API is going to change the way we code for postmeta, and WordPress 6.6 is our first glimpse.

events.wordpress.org - all over the world: 3,925 events this year :: 108 countries :: 540,537 participants

hubs — Sat, 13 Jul 2024 15:06:50 +0000

Meet the community - behind WordPress: https://events.wordpress.org - all over the world: 3,925 events this year :: 108 countries :: 540,537 participants

All over the world contributors meet to share, learn, and collaborate on the WordPress project.

Where WordPress contributors meet

see a full list of events: Meet the community - behind WordPress: https://events.wordpress.org

a. Wordcamp: https://central.wordcamp.org/ Wordcamps all arount the world
b. https://www.meetup.com/pro/wordpress WordPress-Meetups
c. https://doaction.org/ - do action hackatons :

What’s new in WordPress 6.6:

hubs — Sun, 07 Jul 2024 22:42:44 +0000

What’s new in WordPress 6.6:
https://kinsta.com/blog/wordpress-6-6/

see the many great plans - see the awesome outline:

Pattern overrides, Block Bindings API, Data Views, new design tools, and much more!

WordPress 6.6 is planned for release on July 16, 2024. The new version focuses on refining and enhancing several features introduced in previous versions. However, plenty of additions take the core one step further along the path of phase 3 of WordPress development.

A total of 299 Core Track tickets are included in WordPress 6.6, along with 392 enhancements, 462 bug fixes, and 46 accessibility improvements for the Block Editor.

Among the many new features coming with WordPress 6.6, block pattern overrides are the ones we like the most. Initially planned for release with WordPress 6.5, then postponed to 6.6, the pattern overrides are the second implementation of the Block Bindings API and give us a better idea of what’s coming with future WordPress releases.

https://kinsta.com/blog/wordpress-6-6/

Neu: die KDE kommt mit Plasma 6, Frameworks 6 & Gear 24.02

hubs — Wed, 28 Feb 2024 21:33:24 +0000

Neu: die KDE kommt mit Plasma 6, Frameworks 6 & Gear 24.02

KDE Plasma die eine moderne, und ausgesprochen funktionsreiche Desktop-Umgebung für Linux-basierte Betriebssysteme. Heute, am 28. Feb. 24 kommt KDE mit einem neuen Release.

Aus dem Release-Text: https://kde.org/de/announcements/megarelease/6/

KDE - seit langem für sein elegantes Design, die anpassbare Benutzeroberfläche und die umfangreichen Anwendungen bekannt, außerdem ist es Open Source, enthält keine Werbung und legt großen Wert auf den Schutz Eurer Privatsphäre und persönlichen Daten. Probiert es aus: Installiert Plasma auf Eurem aktuellen Laptop und genießt ganz einfach alle Vorteile eines hochmodernen Computererlebnisses - ganz einfach auch dann, wenn Eure Hardware nicht von Windows 11 unterstützt wird.

gleich zwei Sprünge in die Zukunft

Mit Plasma 6 wurde der KDE-Technologie-Stack zwei großen Upgrades unterzogen: einem Übergang zur neuesten Version unseres Anwendungsframeworks Qt und einer Migration auf die moderne Linux-Grafikplattform Wayland. Wir haben unser Bestes getan, um sicherzustellen, dass diese Änderungen für die Benutzer so reibungslos und unmerklich wie möglich ablaufen.

Wir werden weiterhin Unterstützung für die ältere X11-Sitzung für Benutzer bereitstellen, die vorerst lieber dabei bleiben möchten.

mehr Infos, Daten, Hintergründe - Quellen, Ideen u. mehr!!

kde.org: https://kde.org/

announcements: https://kde.org/de/announcements/megarelease/6/

Features - news - improvements:

Colors: Plasma on Wayland now has partial support for High Dynamic Range (HDR). On supported monitors and software, this will provide you with richer and deeper colors for your games, videos, and visual creations.

New Wallpaper: Transform your desktop with the mesmerizing 'Scarlet Tree' wallpaper by axo1otl. Capture the dynamic interplay between the sun's vibrant energy and the comet's celestial dance.

floating Panel: With Plasma 6, the panel now floats by default.

New Defaults!: Plasma 6.0 is a major new version, and we decided to change a few default settings to make it easier to use. Plasma is still as configurable as ever, and you can change these settings back to how they were in Plasma 5 if you preferred them that way.

Bluesky hat mittlerweile mehr als 5 Millionen user - es öffnet sich noch weiter

hubs — Sun, 25 Feb 2024 22:33:33 +0000

Bluesky hat mittlerweile mehr als 5 Millionen user - es öffnet sich noch weiter

Es passiert sehr viel bei Bluesky: Bluesky öffnet sich noch weiter und kann jetzt auf verschiedenen Servern genutzt werden. User sind aufgrund dieser Neuerungen nun auch in der Lage ihre Daten selbst hosten können. Damit sind sie nicht mehr zwingend darauf angewiesen, einen Account auf einem der Bluesky-eigenen Server einzurichten; Auch ohne einen solchen (account) sind sie in der Lage mit allen anderen dort kommunizieren. Ist das nicht ein bisschen wie das bei Mastodon auch läuft?

[b]mehr infos - mehr Daten und Hintergründe: [/b] https://en.wikipedia.org/wiki/Bluesky_(social_network)

In September 2023, Bluesky Social reached 1 million registered users,[30] and in November, it surpassed 2 million users.[31]

In December 2023, Bluesky announced a new company logo, which was also used as the icon for the official app and website. This icon was a blue butterfly, inspired by existing users' usage of the butterfly emoji to indicate their handles on the service. The launch of this new icon corresponded with the release of a public view for posts on the network, allowingthose without accounts on the service to view its posts. The platform became open to all public registrations on 6 February 2024, when the previous invitation-only format was dropped.

Bluesky unveiled open source code in May 2022 for an early version of its distributed social network protocol, Authenticated Data Experiment (ADX),since renamed the Authenticated Transfer (AT) Protocol.[11] The team opened its early code and placed it under an MIT License so that the development process would be seen in public.
The AT Protocol's initial federation architecture centers around three main services: a Personal Data Server (PDS), Relay (previously referred to as a Big Graph Service, or BGS), and an AppView.[44] A PDS is a server which hosts user data[ in "Data Repositories", which utilize a Merkle tree. The PDS also handles user authentication and manages the signing keys for its hosted repositories. A Relay is described as analogous to an indexer on the web, ingesting repositories from a variety of different PDS hosts and serving them in a single unified stream for other services to ingest. AppViews, meanwhile, are services which consume data from a Relay and hydrate that data to provide behavior for specific clients, e.g. the microblogging feature set for the Bluesky Social app.

Im Prinzip funktioniert das so wie beim Konkurrenten Mastodon, der Teil des größeren Fediverse ist, es gibt aber auch Unterschiede. Außerdem legt Bluesky mit dem AT Protocol ein anderes Protokoll zugrunde, eine Verbindung der Dienste wurde aber bereits angekündigt – und auf Mastodon kontrovers diskutiert.

Das teilte das Team in einem Blogeintrag mit und erläutert, dass der Dienst jetzt föderiert. Das bedeutet, dass User ihre Daten selbst hosten können. Damit sind sie nicht mehr darauf angewiesen, einen Account auf dem Server von Bluesky einzurichten, können aber trotzdem mit allen anderen dort kommunizieren. Im Prinzip funktioniert das so wie beim Konkurrenten Mastodon, der Teil des größeren Fediverse ist, es gibt aber auch Unterschiede. Außerdem legt Bluesky mit dem AT Protocol ein anderes Protokoll zugrunde, eine Verbindung der Dienste wurde aber bereits angekündigt – und auf Mastodon kontrovers diskutiert.

https://en.wikipedia.org/wiki/Bluesky_(social_network)

Its alive: WPTavern is back; some of the most impresse site

hubs — Sun, 18 Feb 2024 22:42:59 +0000

Its alive: WPTavern is back; some of the most impresse site

It’s alive - !! WPTavern is back - one of the most impressive WP-News site is back ;)

Okay I have reviewed all the applications, and invited seven people to participate in a […]
https://wptavern.com/its-alive

Okay I have reviewed all the applications, and invited seven people to participate in a $25/hr trial contract where they will have full access to the site, and can post and participate however they like, they just need to log their hours. After a two-week trial, we’ll decide which two will receive full-time Audrey Capital employment offers, and will set up some fair and transparent system for freelancers to contribute to the site as well.
Thank you to everyone who applied, even if you are not one of the seven that made it to this next stage.

stay tuned - check back https://wptavern.com/

more news - ideas and backgrounds:
https://wordpress.org/
more developer-news: https://developer.wordpress.org/

wordpress-plugin (widget) that performs a Neaby-search on the openstreetmap-endpoint: around x find y

hubs — Sun, 18 Feb 2024 22:40:48 +0000

i am about to create a wordpress-plugin that offers the output of the following data ... the data of a a Neaby-search:

can we create a quewry that shows up all the schools that are in the near - in other words

(it is a area search) how to perform a search - for http://www.overpass-turbo.eu :

example: what i am after. how to create a request to find all the schools - in the area of - let us say munich - in a radius of 10 km for example!?

a output that shows all the schools around a certain point - or in other words; all in Munich - in a area /(radius) of let us say 10 kilometers can we create a query that works on Overpass-turbo.eu

eg like so: first of all see the intened osm - nearby-search that runs against the overpass-Turbo.eu -API

`[out:csv(::id,::type,::lon,::lat,amenity,name,"addr:postcode","addr:city","addr:street","addr:housenumber","contact:website",website,"contact:email")]
[timeout:600];

area[name="München"];
nwr(area)[name="Marienplatz"];
nwr["amenity"="school"](around:10000);
out center;`

it gives back the results:

`@id @type   @lon    @lat    amenity name    addr:postcode   addr:city   addr:street addr:housenumber    contact:website website contact:email
312793352   node    11.5815046  48.1322045  school  Schulverbund München    80469   München Kohlstraße  5       https://www.schulverbund.de/    
703266518   node    11.5746643  48.1387135  school  EAM School of International Business                    https://eam-muenchen.com/       
1096318121  node    11.5827303  48.1368214  school  Otto-Falckenberg-Schule 80539   München Stollbergstraße 7a      https://www.otto-falckenberg-schule.de/ 
1096318127  node    11.5822067  48.1376239  school  Otto-Falckenberg-Schule 80539   München Falckenbergstraße   2       https://www.otto-falckenberg-schule.de/ 
1142514805  node    11.5665710  48.1353750  school  Evangelisches Bildungszentrum   80331   München Herzog-Wilhelm-Straße   24  https://www.stadtakademie-muenchen.de/      stadtakademie.muenchen@elkb.de
1576527684  node    11.5728245  48.1336093  school  Theresia-Gerhardinger-Grundschule am Anger                      https://gs-am-anger.de/ 
1576528339  node    11.5721671  48.1333479  school  Theresia-Gerhardinger-Gymnasium am Anger                        https://www.tggaa.de/   
2493656150  node    11.5814603  48.1366835  school  Förderschule an der Herrnstraße 80539   München Herrnstraße 21      https://stadt.muenchen.de/service/info/sonderpaedagogisches-foerderzentrum-muenchen-mitte-2-herrnstr-21/1060084/    
2654727020  node    11.5812823  48.1365482  school  Grundschule an der Herrnstraße`

well i think that firstly i should to take care that i have to create the WordPress Plugin Structure: Set up the basic structure of your WordPress plugin, including a main PHP file and any additional files or folders you may need.

Register the Widget: then i need to define a certain kind of a custom widget class that extends the WP_Widget class provided by WordPress.

Implement the Widget Logic: Within your custom widget class, implement the logic to retrieve data from the Overpass API and format it for display.

Display the Widget: Register a callback function to output the widget content, including any HTML markup necessary to display the data.

Here's a basic outline of how you might approach each step:
`
<?php
/*
Plugin Name: osm Nearby Schools Widget
Description: Widget to display nearby schools using Overpass API.
Version: 0.9
Author: osm-fan
*/

// Step 2: well - first of all - we ought to register the Widget propperly
class Nearby_Schools_Widget extends WP_Widget {
    // Constructor
    public function __construct() {
        parent::__construct(
            'nearby_schools_widget', // Base ID
            'Nearby Schools Widget', // Name
            array( 'description' => 'Displays nearby schools using Overpass API' ) // Args
        );
    }

    // Step 4: we ought to display the Widget
    public function widget( $args, $instance ) {
        // Widget output
        echo $args['before_widget'];
        echo $args['before_title'] . 'Nearby Schools' . $args['after_title'];
        echo '<ul>';

        // Step 3: Implement the Widget Logic
        $schools = $this->get_nearby_schools();
        foreach ($schools as $school) {
            echo '<li>' . $school->name . '</li>';
        }

        echo '</ul>';
        echo $args['after_widget'];
    }

    // Step 3: here we  implement the Widget Logic
    private function get_nearby_schools() {
        $url = 'http://overpass-api.de/api/interpreter';
        $data = array(
            'data' => '[out:json][timeout:25];(node["amenity"="school"](around:10000,48.1351,11.5820););out;',
        );

        $response = wp_remote_post( $url, array(
            'body' => $data,
        ) );

        if ( is_wp_error( $response ) ) {
            return array();
        }

        $body = wp_remote_retrieve_body( $response );
        $schools = json_decode( $body );

        return $schools->elements;
    }
}

// Step 2: Register the Widget
function register_nearby_schools_widget() {
    register_widget( 'Nearby_Schools_Widget' );
}
add_action( 'widgets_init', 'register_nearby_schools_widget' );

hmm - well - i think that this could be a first step into the direction: i think that this code sets up a WordPress plugin that creates a widget called "OSM-Nearby Schools Widget"

Well the widget retrieves nearby schools using Overpass API within a 10km radius of Munich's coordinates (48.1351 latitude, 11.5820 longitude), and displays them in an unordered list. Well we may need to adjust the coordinates and then run it against the Overpass API query to fit even more specific requirements.

Do you have some additional ideas - what to add to the plugin(logic)?

Answer: Running a script in Google Colab - throws back no results

hubs — Sat, 10 Feb 2024 07:52:59 +0000

Jan 22 '24

The website you're trying to scrap from probably has some sort of anti-bot protection with CloudFlare or similar services, hence your scrapper are not extracting anything. You need to use selenium with a headless browser like Headless Chrome or PhantomJS. Selenium automates a real browser, which can navigate Cloudflare's anti-bot…

Open Full Answer