WP Cards

I developed WP Cards to introduced the card design concept to WordPress. You can find the plugin files here.

“Cards” have become very popular in the last couple of years since the launch of Google Now (http://www.google.com/landing/now/#cards). Many leading social networks have also used card design on their sites, including Twitter, Pinterest, and Spotify.

Cards are page elements that are mobile friendly and are designed to work across all device sizes and typically offer the user a content excerpt, an image, or a video. A well-designed card provides the user with pertinent time-sensitive information or with a clear call-to-action to click or tap through to more information. The homepage of this site (davidscotttufts.com) uses cards to display content in a grid view or list view layout.

WP Cards uses WordPress widgets and full-page width sidebars to add the ability to drag-and-drop widgetized cards to a website’s homepage. A theme developer just needs to add the included “home.php” file in their theme, or add a call to a dynamic sidebar to their existing home file, and their theme’s homepage will automatically support full-page width cards.

One of the greatest benefits of adding WP Cards to a WordPress theme is that a website admin can reconfigure their site’s homepage on-the-fly without any programming skills or the need to depend on a programmer to make the changes. The admin just needs to log into the WordPress admin area, click-through to the Widgets admin page and drag-and-drop cards into the homepage’s card sidebar. Adding new page elements, moving page elements up and down, or removing page elements can happen in just a matter of seconds, and the website’s homepage is automatically updated.

WP Cards also supports adding a “Jumbotron” card area to the “header.php” file, Jumbotron cards can be configured to only show up on certain types of pages on the website. For example, a “Search Jumbotron” card can be configured to show up on just the website’s search and 404 pages. Or a “Registration Jumbotron” can be configured to appear just on the website’s homepage.

WP Cards is a framework for adding the card concept to an existing WordPress theme, and is designed to be full extended by other developers. WP Cards comes with a number of already developed cards and can be easily extended by adding new cards to the WP Cards’ “cards” directory, or by adding a “cards” folder to a theme or child theme’s root directory. WP Cards automatically loads all widgets (which use a pre-defined naming convention) from these “cards” directories into the widgets section of the WordPress admin area.

WP Cards’ default cards were built using Bootstrap 3 and are dependent on the Bootstrap 3 CSS and JavaScript files.

WP Cards automatically adds three sidebar areas to the WordPress widgets admin page, these are named “Card Staging Area”, “Header Jumbotron Cards”, and “Home Page Cards”. The “Card Staging Area” is just a sandbox widget area for building out cards before adding them to a live page. The plugin includes a “page-staging.php” file that can be added to an existing theme for admins to preview their cards on. An admin would just have to create a new private page called “Staging” and the logged in admin would be able to view all cards in the card staging area.

Having cards stored in widget areas generated by the WP Cards plugin enables a website admin to switch out WordPress themes over time, the website’s existing cards will still be available to be used and maintained on a new theme.

7 replies on “WP Cards”

Hello David. Thank you, this looks wonderful and i checked out the site on the mobile. – I want to make these cards, swipeable as in tinder and shareable as in pinterest. Is that possible? If the funtionality of wp cards can be used as a base and needs to be extended could you guide me in the right direction?

Extending WP Cards Within an Existing Theme
WP Cards was made to work with a theme’s existing files, if the site’s current theme has a “loop.php” or an “excerpt.php” file, WP Cards will use those files by default. If those files do not exist within the currently active theme, WP Cards will use its own template files which are located within the “/wp-content/plugins/wp-cards/templates/” directory path. Any file that exists within that directory can be overwritten by creating a file by the same name within the website’s active theme.

Template View File Location
Loop /wp-cards/templates/loop.php
Loop Banner View /wp-cards/templates/loop-banner.php
Loop Featurette View /wp-cards/templates/loop-featurette.php
Loop Grid View /wp-cards/templates/loop-grid.php
Loop Image View /wp-cards/templates/loop-image.php
Loop List View /wp-cards/templates/loop-list.php
Loop Mini View /wp-cards/templates/loop-mini.php
Loop Spotlight View /wp-cards/templates/loop-spotlight.php
Loop Tile View /wp-cards/templates/loop-tile.php
Excerpt /wp-cards/templates/excerpt.php
Excerpt Banner View /wp-cards/templates/excerpt-banner.php
Excerpt Featurette View /wp-cards/templates/excerpt-featurette.php
Excerpt Grid View /wp-cards/templates/excerpt-grid.php
Excerpt Image View /wp-cards/templates/excerpt-image.php
Excerpt List View /wp-cards/templates/excerpt-list.php
Excerpt Mini View /wp-cards/templates/excerpt-mini.php
Excerpt Spotlight View /wp-cards/templates/excerpt-spotlight.php
Excerpt Tile View /wp-cards/templates/excerpt-tile.php

All of the cards, or widgets, that come with WP Cards by default can be found within the “/wp-content/plugins/wp-cards/cards/” directory. However, any one of these cards can be overwritten by the current theme by creating a “cards” directory within the current theme and placing a card by the same name within of the theme’s cards directory.
Creating new cards is as simple as dropping customized cards, which are nothing more than WordPress widgets inside of the theme’s “cards” directory. In order for the cards to show up in the widget admin area, the widget’s file and class names need to follow a special naming convention. For example, the “Spotlight” card’s file is named “card-spotlight.php” and the class is named “wp_cards_spotlight_widget”. The file needs to be prefixed with “card-” followed by the card name and class needs to be prefixed with “wp_cards_” followed by the card name and finally with “_widget”.

See the “card-spotlight.php” sample code here:
‘A spotlight widget for full width “sidebars”.’,
‘classname’ => self::$classname
) );

This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. Will you update it?

Thank you

Leave a Reply