WP Cards

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.

Comments

  1. jacobkilgore

    Hello David,

    WP Cards is the first plugin I found that presents the content of my website in the way I want. Thank you.

    I do think the circles of Card – Spotlight should be a bit smaller. How can I change them from size 250 to 200?
    http://thegrandphilosophy.com/

    1. David Scott Tufts

      @jacobkilgore In your css file, add this line: .spotlight-view .img-circle { width:200px; }

  2. Tatou Dembele

    Hello, I cannot install the plugin. Can someone help me? It is said that the plugin has not been tested with my current version of WordPress, the latest.

  3. anandgurnaniA

    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?

    1. David Scott Tufts

      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.

      WP CARD’S INCLUDED TEMPLATE FILES
      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

      CREATING NEW CARDS
      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:
      < ?php class wp_cards_spotlight_widget extends WP_Widget { public static $classname = __CLASS__; public function __construct() { parent::__construct( __CLASS__, 'Card - Spotlight', array( 'description' => ‘A spotlight widget for full width “sidebars”.’,
      ‘classname’ => self::$classname
      ) );
      }

  4. swapnildhanrale29

    Hi @david where i can see the demo for your plugin?

Leave a Reply