Fahad Murtaza

Don’t take our word for it, try CardCrafter live. <a href="https://tastewp.com/plugins/cardcrafter-data-grids" rel="nofollow ugc">Full-featured demo</a> on a real WordPress site. No signup, no download, no risk.
CardCrafter is the #1 WordPress plugin for displaying data as beautiful card grids. Transform your WordPress posts, JSON data, and custom content into professional, responsive card layouts. No coding required.
🆕 NEW in v1.12.0: Native WordPress Posts integration! Display your blog posts, pages, or custom post types as stunning card grids with featured images, excerpts, and automatic formatting.
Perfect for: 
• Team Directories – Display staff members with photos and bios 
• Product Showcases – Feature products with images, prices, and descriptions 
• Portfolio Galleries – Present your work in elegant grid layouts 
• Blog Post Grids – Convert WordPress posts into visual card displays 
• Service Listings – Highlight your services with card-based layouts
Trusted by 10,000+ WordPress sites for enterprise-grade data visualization with instant setup and professional results.
Why CardCrafter?
<ul>
<li>🎨 Beautiful by Default: Modern, clean card designs that look professional out of the box.</li>
<li>📱 Fully Responsive: Cards automatically adapt to any screen size.</li>
<li>⚡ Lightweight: Pure JavaScript, no jQuery. Fast and efficient.</li>
<li>🔍 Interactive: Built-in search and sorting for easy data navigation.</li>
<li>📊 Data Export: Export displayed data as CSV, JSON, or PDF for business use.</li>
<li>🔧 Flexible Layouts: Choose between Grid, Masonry, or List view.</li>
</ul>
<h3>🚀 Key Features</h3>
<ul>
<li>🧱 Gutenberg Block: Native WordPress block editor support with visual configuration.</li>
<li>📝 WordPress Posts Grid: Transform your blog posts into beautiful card layouts with one click.</li>
<li>Instant Search & Sort: Users can filter and sort cards instantly (Client-side).</li>
<li>Multiple Layouts: Grid, Masonry, and List views to suit your content.</li>
<li>Customizable Columns: Display 2, 3, or 4 cards per row.</li>
<li>Smart Field Mapping: Automatically detects image, title, subtitle, description, and link fields.</li>
<li>Professional Data Export: Export as CSV for spreadsheets, JSON for system integration, or PDF for reports.</li>
<li>Live Admin Preview: Test your JSON sources before publishing.</li>
<li>Dark Mode Support: Cards automatically adapt to dark color schemes.</li>
</ul>
<h3>💡 Perfect For</h3>
<ul>
<li>Team Directories: Showcase your team members with photos and bios.</li>
<li>Product Catalogs: Display products with images, prices, and descriptions.</li>
<li>Portfolio Galleries: Present your work in an elegant grid layout.</li>
<li>Service Listings: Highlight your services with card-based layouts.</li>
<li>Testimonials: Display customer reviews in beautiful cards.</li>
</ul>
<h3>Usage</h3>
Display WordPress Posts 
Display your blog posts, pages, or custom post types as beautiful cards.
<pre><code>[cardcrafter-data-grids post_type="post"]
</code></pre>
Show WooCommerce Products 
Display your products in a grid layout.
<pre><code>[cardcrafter-data-grids post_type="product"]
</code></pre>
Team Directory (Sorted) 
Display team members sorted alphabetically by title.
<pre><code>[cardcrafter-data-grids post_type="team" wp_query="orderby=title&order=ASC"]
</code></pre>
News Category 
Show only posts from the ‘news’ category.
<pre><code>[cardcrafter-data-grids post_type="post" wp_query="category_name=news&posts_per_page=6"]
</code></pre>
Featured Products 
Display products that have a ‘featured’ meta key set to ‘yes’.
<pre><code>[cardcrafter-data-grids post_type="product" wp_query="meta_key=featured&meta_value=yes"]
</code></pre>
Team by Author 
Show team members created by a specific author (ID 5).
<pre><code>[cardcrafter-data-grids post_type="team" wp_query="author=5&orderby=menu_order"]
</code></pre>
Portfolio with Custom Fields (ACF) 
Map your custom fields to card elements automatically.
<pre><code>[cardcrafter-data-grids post_type="portfolio" image_field="project_image" subtitle_field="client_name"]
</code></pre>
Product with Descriptions 
Use custom fields for price and features.
<pre><code>[cardcrafter-data-grids post_type="product" subtitle_field="price" description_field="product_features"]
</code></pre>
Instant Demo 
Automatically loads team demo data with professional banner.
<pre><code>[cardcrafter-data-grids]
</code></pre>
Gutenberg Block (Recommended) 
1. Add the “CardCrafter” block to any post/page 
2. Configure your data source in the sidebar settings 
3. Choose layout, columns, and interactive features 
4. Preview updates live in the editor
Load from JSON URL 
Load data from an external JSON source.
<pre><code>[cardcrafter-data-grids source="https://example.com/team.json"]
</code></pre>
Masonry Layout 
Display cards in a Pinterest-style masonry layout.
<pre><code>[cardcrafter-data-grids source="https://example.com/products.json" layout="masonry" columns="4"]
</code></pre>
Shortcode Attributes
<ul>
<li><code>source</code> (optional) – URL of your JSON data. Omit for instant demo mode.</li>
<li><code>post_type</code> (NEW!) – WordPress post type to display (post, page, product, etc.)</li>
<li><code>wp_query</code> (NEW!) – Custom WordPress query parameters (category=news&author=5)</li>
<li><code>posts_per_page</code> (NEW!) – Number of WordPress posts to display (default: 12)</li>
<li><code>layout</code> – “grid”, “masonry”, or “list” (default: grid)</li>
<li><code>columns</code> – 2, 3, or 4 (default: 3)</li>
<li><code>items_per_page</code> – 6, 12, 24, 50, or 100 (default: 12)</li>
<li><code>image_field</code> – JSON field for image (default: image)</li>
<li><code>title_field</code> – JSON field for title (default: title)</li>
<li><code>subtitle_field</code> – JSON field for subtitle (default: subtitle)</li>
<li><code>description_field</code> – JSON field for description (default: description)</li>
<li><code>link_field</code> – JSON field for link (default: link)</li>
</ul>

CardCrafter – Data-Driven Card Grids

Transform JSON data and WordPress posts into beautiful card grids. Perfect for teams, products, portfolios, and blogs.

Braad

Plugin Cards lets you display WordPress 4.0 style cards with plugin information for any plugin that lives on the wordpress.org repository. All of the custom queries that are possible using the wordpress.org API are possible with this plugin, including queries for plugins by:
<ul>
<li>Slug</li>
<li>Author</li>
<li>Tag</li>
<li>Search term</li>
<li>Brose terms: popular, new, & beta</li>
<li>A wordpress.org user’s favorites list</li>
<li>Any other custom query you pass in via an included filter</li>
</ul>
This plugin uses the same wordpress.org API that your wp-admin uses when you are searching for new plugins, and it uses as much of the admin CSS and core functionality as possible to bring you a purposefully stock experience.
I have also included a number of filters in the plugin that allow you to customize everything. You can use a custom query, include custom fields not shown by default, use custom icons, use custom plugin urls, add to or override the information shown in each section of the output, override the entire output with your own, and more.
This plugin is <a href="https://github.com/BraadMartin/plugin-cards" title="Plugin Cards on Github" rel="nofollow ugc">on Github</a> and I encourage feature requests and pull requests.
<h4>Features</h4>
<ul>
<li>Query the wordpress.org plugin repo by all methods supported by the wordpress.org API, including by slug, author, tag, popular, new, beta, user’s favorites, and search term</li>
<li>Cards match the design introduced in WordPress 4.0</li>
<li>Uses the wordpress.org API to get plugin information</li>
<li>Caches results to minimize hits on the API</li>
<li>Default fields include plugin name, icon, description, author link, star rating, active install count, last updated and compatible up to</li>
<li>Uses SVG plugin icon if available, then retina icon if available, then regular icon</li>
<li>Uses the WP native Dashicons for the star ratings</li>
<li>Intelligently Responsive</li>
<li>Easily customize the look of the cards with CSS</li>
<li>Easily customize the functionality of the entire plugin with provided filters</li>
</ul>
With Plugin Cards you can easily display a custom list of plugins for any purpose.
<h4>Usage</h4>
This plugin adds a shortcode <code>[plugin_cards]</code> that you can use to display the plugin cards anywhere on your site.
The following parameters can be used to create your query:
<pre><code>[plugin_cards slug="easy-digital-downloads"]
[plugin_cards author="markjaquith"]
[plugin_cards user="matt"] // Displays user's favorites list
[plugin_cards tag="slider"]
[plugin_cards browse="popular"]
[plugin_cards browse="new"]
[plugin_cards browse="beta"]
[plugin_cards search="gallery"]
</code></pre>
Note: The wordpress.org API only supports querying by one parameter at a time, so currently only one parameter can be included in the shortcode to build the query. If this ever changes I will add support for querying by multiple parameters to this plugin.
Note: The parameter is required for the shortcode to work. Simply using [plugin_cards] will result in a silent fail.
You can also set the max number of results using the max_results parameter like this:
<pre><code>[plugin_cards max_results="10" browse="popular"]
</code></pre>
<h4>Advanced Usage</h4>
This plugin includes a number of filters that you can use to customize the display of the cards and add plugin information to the cards. I recommend reading through the code if you really want to understand how the filters can be used. Here are some examples:
Use a custom query
<pre><code>function custom_plugin_cards_query( $custom_query_args, $atts = array(), $fields = array() ) {

 // Show the 10 most popular plugins with only certain fields returned
 $custom_query_args = array(
 'per_page' => 10,
 'browse' => 'popular',
 'fields' => array(
 'banners' => true,
 'icons' => false,
 'reviews' => true,
 'rating' => true,
 'num_ratings' => true,
 'downloaded' => false,
 'active_installs' => false,
 'short_description' => false,
 'sections' => true,
 'downloadlink' => true,
 'last_updated' => true,
 'homepage' => true,
 )
 );

 return $custom_query_args;

}
add_filter( 'plugin_cards_api_query_args', 'custom_plugin_cards_query', 10, 3 );
</code></pre>
Then you’d have to use one of the output filters and some CSS to get the new fields to show on the page. There is a lot that is possible with the <code>plugin_cards_api_query_args</code> filter, too much to cover here, but the key is setting the right main query param and setting the fields that you want returned.
Use custom URLs
<pre><code>function custom_plugin_card_urls( $plugin_url, $plugin = null ) {

 // Point URLs to a custom endpoint based on the plugin slug
 $plugin_url = 'https://domain.com/custom-plugins/' . esc_attr( $plugin->slug );

 // Change the URL of a specific plugin
 if ( 'woocommerce' === $plugin->slug ) {
 $plugin_url = 'http://www.woothemes.com/woocommerce/';
 }

 return $plugin_url;

}
add_filter( 'plugin_cards_plugin_url', 'custom_plugin_card_urls', 10, 2 );
</code></pre>
The complete list of simple filters that work exactly like plugin_cards_plugin_urls is:
<pre><code>plugin_cards_plugin_url
plugin_cards_plugin_name
plugin_cards_short_description
plugin_cards_plugin_author
</code></pre>
There are also some advanced filters that allow you to override the HTML output of entire sections, including:
<pre><code>plugin_cards_plugin_icon
plugin_cards_action_links
plugin_cards_plugin_rating
plugin_cards_last_updated
plugin_cards_install_count
plugin_cards_plugin_compatibility
</code></pre>
These filters can be used like this:
Use custom plugin icons
<pre><code>function custom_plugin_card_icons( $plugin_icon, $plugin = null, $plugin_url = '' ) {

 // Replace all plugin icons with kittens
 $plugin_icon = '<a href="' . esc_url( $plugin_url ) . '" class="plugin-icon"><img src="http://domain.com/kittens.jpg" /></a>';

 // Replace the icon for a specific plugin
 if ( 'equal-height-columns' === $plugin->slug ) {
 $plugin_icon = '<a href="' . esc_url( $plugin_url ) . '" class="plugin-icon"><img src="http://domain.com/custom-icon.jpg" /></a>';
 }

 return $plugin_icon;

}
add_filter( 'plugin_cards_plugin_icon', 'custom_plugin_card_icons', 10, 3 );
</code></pre>
There is also one special filter <code>plugin_cards_cache_expiration</code> that allows you to set how long you want the results of the API request to be cached. The default is 2 hours (expressed as number of seconds).
If you want a hook added just let me know. Pull requests are welcome <a href="https://github.com/BraadMartin/plugin-cards" title="Plugin Cards on Github" rel="nofollow ugc">on Github</a>.

Plugin Cards

Loooove this!

Works perfectly, looks good, and saves me tons of time.



Great Plugin

Small plugin that solves one task extremely well! Thanks for making this :)

Display plugin cards that match the style introduced in WordPress 4.0. Uses the wordpress.org API and supports custom queries.

CardCrafter – Data-Driven Card Grids vs Plugin Cards