Summary:

Custom post types in WordPress—such as “Team Members” or “Attorneys”—often rely on modular content blocks, cards, or widgets like Credentials, Education, Court Admissions, or other custom fields. When these sections are empty, they can clutter the front-end display and negatively impact visibility, UX, and SEO for a WordPress site.

To solve this, Integriti Studio implemented a lightweight, content-based solution using JavaScript and PHP to hide empty content cards automatically. This flexible implementation works without plugins, avoids manual editing in the post editor, and keeps WordPress templates clean and scalable across custom post types.

Issue Background:

A WordPress site built with custom post types was displaying empty content cards on individual profile pages. Even when no data existed in custom fields or ACF fields, cards like “Court Admissions” still appeared on the front end. This created blank sections, unnecessary layout clutter, and confusion for users browsing the WordPress content.

The challenge wasn’t just to hide one empty section—but to conditionally hide any empty card across templates without hardcoding logic for every custom post or CPT layout.

The Goal:

Automatically detect and hide empty content areas in WordPress custom post types—without using a plugin, shortcode, checkbox, or manual condition for each card—while keeping the solution reusable, lightweight, and SEO-friendly.

Diagnosis:

• The site used modular HTML .card elements to display custom content blocks
• Each card rendered by default, regardless of whether custom fields contained data
• Manually editing every WordPress template or array condition was not scalable
• A dynamic, front-end solution was needed to manage visibility and hide empty content

This approach also needed to work with different categories, taxonomies, and future content-based layouts.

Resolution Steps:

1. Scoped the solution to the Custom Post Type

Using PHP, the JavaScript file was enqueued only on relevant custom post type templates (such as Attorneys or Team Members). This avoided unnecessary script loading on unrelated WordPress posts, widgets, sidebars, or search results and kept performance optimized.

2. Wrote lightweight JavaScript

On page load, the script checks each .card element and evaluates its text content. If the content is empty or contains only whitespace, the card is hidden from display.

js 

CopyEdit 

document.addEventListener(‘DOMContentLoaded’, function () {   const cards = document.querySelectorAll(‘.card’);   cards.forEach(card => {     if (!card.textContent.trim()) {       card.style.display = ‘none’;     }   }); });

This JavaScript-based solution works seamlessly with WordPress themes, REST API-driven content, Elementor layouts, and custom HTML structures—without affecting the editor experience.

3. Scalable and flexible implementation

The logic can be easily extended to hide specific content blocks, manage conditional visibility, or support additional selectors. It also integrates well with ACF, custom fields, accordions, widgets, and future WordPress functionality.

Final Outcome:

Empty content cards—such as unused Court Admissions, credentials, or education sections—were automatically removed from the front-end display. The result was a cleaner, more professional layout with improved usability, reduced clutter, and better content control across custom post types.

This reusable solution now applies to multiple WordPress templates, categories, and CPT-driven pages without relying on third-party plugins or manual editing.