Focus Cards Documentation

Focus Cards functionality comes in the form of a Thesis Box that can be added to your Focus-powered WordPress website.

Installation and Settings

After installing and activating the Focus Cards Box, you’ll need to visit the settings page, which you can access two different ways.

First, from the Boxes menu in your Thesis Admin

Focus Cards via the Thesis Boxes menu

And second, from the Focus Cards → Settings item in the WP Admin menu:

Focus Cards via the WP Admin menu

Once you’re on the settings page, you can set the basic options for your Focus Cards, and then you’ll be ready to go!

We’ll walk through each option below.

Important! Even if you don’t change any settings, you still need to click the green Save Focus Cards button one time—this will add the necessary CSS to your stylesheet to support Focus Card output.

Card Style

The Focus Cards Box supports 4 basic display styles, and you can see each of these styles in action below:

  • Standard: Simple box shadow
  • Soft: Larger box shadow for a softening effect
  • Subtle: “Barely there” box shadow
  • Flat: No box shadow
Focus Cards: Standard style

The standard Card style includes a modest drop shadow that really makes your Cards pop!

Focus Cards: Soft style

The soft Card style includes a large, spread out drop shadow that lends an air of sophistication to your Cards.

Focus Cards: Subtle style

The subtle Card style adds a very small drop shadow that makes your Cards stand out without being obnoxious.

Focus Cards: Flat style

The flat Card style is only suitable if the background color of your Cards differs from the color of your content area.

Card Corners and Corner Radius

By default, your Cards will have rounded corners to set them apart from other, more basic display items in Focus.

If you’d like your Cards to have squared-off corners instead, simply select the square option.

Also, you can change the corner radius by selecting a spatial value from Focus that will determine the degree of rounding:

  • x6 — smallest
  • x5* — default value
  • x4 — more rounded
  • x3 — very rounded
  • x2 — cartoonishly rounded

Card Behavior on Hover

By default, your Cards do not react when a visitor mouses over them.

However, if you’d like to add some kinetics to your presentation, you can select the slightly raised option for an attention-grabbing scaling effect when a visitor interacts with your Cards!

Interior Card Spacing

This option determines how much whitespace surrounds the text portion of your Cards, which includes the title and the accompanying text that appear beneath the Card image.

To keep spacing proportional with the rest of your design, you must select a spatial value from Focus to determine the amount of whitespace in your Cards:

  • x2* — one full unit of whitespace (default)
  • x3 — moderate whitespace
  • x4 — less whitespace

Card Title Font

To add some visual distinction to your Cards, you might wish to present your titles in a different font.

Simply select Font 1, Font 2, or Font 31 from the available dropdown, and BOOM—instant font gratification!

1 Font 1, Font 2, and Font 3 are defined in your Focus Design Options.

Card Title Weight

Your Card titles will display in bold by default, but if you want to use a normal font weight instead, simply select the normal option here.

Important! In order for your Cards to display properly, you need to click the green Save Focus Cards button—even if you haven’t changed any options!

This will add the Card CSS to your stylesheet and ensure everything is perfectly integrated into your Focus environment.

Create, Edit, and Manage Your Cards

Focus Cards are added to your WordPress environment as a custom post type, and this makes it easy to create and manage them the same way you handle Posts and Pages.

In the following video, I’ll show you how to create a Focus Card, and I’ll also explain each of the options on the Card creation screen.

Creating Focus Cards is as easy as creating basic Posts or Pages.

Displaying Your Cards with Shortcodes

Focus Cards functionality includes two shortcodes you can use to display your Cards:

  • [card] — output a single Card
  • [card_group] — output multiple Cards (with presentation options)

I’ll show you how to use each of these shortcodes in the following video. Beneath the video, you’ll find additional details about the parameters you can use to refine your Card output.

Use the built-in shortcodes to create the perfect presentation!

Card Shortcode

Focus Card shortcodeThe basic Card shortcode accepts 3 parameters you can use to affect the resulting output:

  • id — (required) the ID of the Card you wish to display
  • class — (optional) add an HTML class to the Card output
  • depth — (optional) for OCD HTML source indentation

Note: Whenever you use the [card] shortcode, you’ll need to include an id parameter, or else nothing will display!

The other two parameters are optional, though you may find the class parameter useful if you want to apply special CSS styles to a Card in a specific context (like on your home page, for example).

Here’s what that might look like:

[card id="1234" class="card-big"]

This shortcode will output the Card with an ID of 1234, and the resulting HTML will include the card-big class on the Card container.

Card Group Shortcode

The Card Group shortcode is the easiest way to output multiple Cards in a grid. You can use the following 7 parameters to create the presentation you want:

Focus Card group slug

Use the slug value to specify a group!

  • group — (optional) a group slug name; all Cards in the specified group will be displayed
  • ids — (optional) a comma-separated list of Card IDs to display in the specified order
  • grid — (optional, only 2-4 are allowed) the number of columns in your grid
  • class — (optional) add an HTML class to the group container
  • card_class — (optional) add an HTML class to each individual Card
  • wrap — (optional) add an HTML wrapper around the group output
  • depth — (optional) OCD HTML source indentation

Pro tip: While all parameters are optional, the [card_group] shortcode will only produce output if you include either the group or ids parameter.

Card Group Shortcode Examples

// Display all Cards from the 'products' group
[card_group group="products"]

// Display Card 1234 followed by Card 5678
[card_group ids="1234,5678"]

// Display all 'products' in a 2-column grid
[card_group group="products" grid=2]

// Display all 'products' in a 3-column grid that fills up the total layout width
[card_group group="products" grid=3 wrap="extend"]

// Display Card 1234 followed by Card 5678 in a 2-column grid that fills up the total layout width
[card_group ids="1234,5678" grid=2 wrap="extend"]

Changelog

  • 1.0 — TBD