Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
The easiest way to show off plugins or themes on your site.
WP Plugin Info Card is the easiest way to showcase WordPress.org hosted plugins and themes.
With four layouts, 14 color schemes, and 3 helper shortcodes/blocks, you'll find WP Plugin Info Card flexible enough to meet your design and layout needs.
Please view the video below for a brief teaser of what WP Plugin Info Card can do for your site.
This thirteen-minute video (below) gives you an extensive overview of how WP Plugin Info Card works.
WP Plugin Info Card comes with fourteen color schemes
Alternatively, in the admin menu, head to Settings->WP Plugin Info Card.
Find out how to show your plugins that are hosted with Easy Digital Downloads
Easy Digital Downloads is a great tool for selling plugins, and now with WP Plugin Info Card, you can now show these plugins on the frontend using WP Plugin Info Card.
For the EDD integration to work correctly, it is recommended that you have two add-ons installed:
Software Licensing (Required)
(Recommended, not Required)
Head to the Plugin Info Card admin options and select the EDD tab.
Check the "Enable Easy Digital Downloads" toggle and switch it to on. Save your settings.
Head to EDD's settings under Extensions. Make sure readme parsing is enabled and that you have a valid downloadable readme.
License creation must be enabled
License creation must be enabled in order to sell your downloads. It is also required to show your plugins using the WP Plugin Info Card, as it enables extra fields for your plugin..
Add as much plugin information as possible to your download, including:
Setting a Download image (featured image)
Setting a banner image
Plugin homepage
Make sure your Readme has as much information as possible as well.
You'll find additional settings for the Plugin Info Card in the right sidebar. Make sure these are filled out for each download.
You can also override the ratings if you don't have the Reviews plugin installed or have ratings elsewhere.
You can add the card either via block or shortcode.
The card will show up as normal on the frontend, albeit with EDD data.
If you make any changes to your download, you'll have to clear the Plugin Info Card cache.
You can do so by clearing the transient and options cache.
If you need additional support getting Plugin Info Card working with Easy Digital Downloads, please .
WP Plugin Info Card comes with four layouts
WP Plugin Info Card comes with five different layouts.
The card layout is a condensed layout that shows some quick stats about the plugin or theme.
The Card can be flipped to reveal more information about the plugin or theme.
The WordPress layout plays on the default WordPress plugin embed but provides more relevant stats.
The Large layout is a larger layout to showcase your plugins or themes in a beautiful bold layout.
The Flex layout is a layout that stretches and is ideal when you need WP Plugin Info Card to take up the full width of a template.
The Ratings layout puts the plugin rating front-and-center and can quickly show off the quality of a plugin.
Type in WP Plugin Info Card
Install the plugin
Activate the plugin
After activation, you will be taken to the plugin's settings screen.
Display a list of all of your site's plugins
The wp-pic-site-plugins shortcode displays a list of your site's plugins.
Third-party plugins: (plugins not hosted on the WordPress Plugin Directory) are excluded from this site list.
Here's an example of the shortcode in use:
The following are the shortcode parameters.
The ID surrounding the container that contains the site plugins.
The number of columns (1-3) for the site plugins layout.
The gap between columns in pixels.
The gap between rows in pixels.
The scheme used. Can be scheme1 - scheme14.
The layout used. Can be card, flex, wordpress, ratings, and large.
A slug can be set in the shortcode attributes to override the title or disable the plugin from displaying.
Simply use the plugin or theme slug in the shortcode attributes.
Here's an example:
The query block allows you to display a group of plugins based on a search
When you first insert the block, you will be prompted to enter some query parameters.
You can also sort the results by active installs, downloads, or last updated.
Once you click on Query and Configure, you can further customize using the sidebar options.
WP Plugin Info Card comes with three blocks.
You can find them in the block inserter (+ Button) under the WP Plugin Info Card category.
You can also use a / slash command and just type in /plugin to view the blocks.
[wp-pic-site-plugins cols="2" col_gap="20" row_gap="20" scheme="scheme13" layout="large"]
[wp-pic-site-plugins cols="2" col_gap="20" row_gap="20" scheme="scheme13" layout="large" easy-digital-downloads="Easy Digital Downloads" query-monitor="false"]Display a plugin card with screenshots.
You can use the plugin screenshots shortcode to display a plugin card with screenshots anywhere shortcodes are supported.
Here is an example of the shortcode in use, using default settings.
The following are the parameters for the shortcode:
The Unique ID surrounding the card's HTML structure. This is randomized if omitted.
The plugin slug for the WordPress.org asset.
Can be:
none - No icon style
border - Icon with a border
bw - Black & White icon
Determine if you would like a rounded icon or not for the plugin icon.
Can be:
true - Rounded icon
false - Square icon
Choose from several built-in color themes.
Can be:
default
blossom
crimson
velvet
Set to true to override the built-in color themes and provide your own custom colors.
Override the plugin's title with something more custom or shorter than the original title.
Enable or disable the context menu that shows extra information about the plugin.
Can be:
true
false
Enable or disable the screenshots that display with the plugin.
Can be:
true
false
Align the output according to the theme. Can be:
center
wide
full
Hex code for the background of the plugin container.
Hex code for the main text color.
The hex code for the border color of the plugin container.
The hex code for the border of the contextual menu.
The hex code for the contextual menu color.
The hex code for the contextual menu color on hover.
The hex code for the contextual menu text color.
The hex code for the contextual menu text color on hover.
The hex code for the background of the screenshots section.
The hex code for the border of the screenshots section.
The hex code for the screenshot arrows background color.
The hex code for the screenshots arrows background color on hover.
The hex code for the arrow color.
The hex code for the arrow color on hover.
The hex code for the star color when showing ratings.
The hex code background color for the meta section.
The hex code for the text color of the meta sectioin.
Disable animated gifs from showing in the screenshots. This can help speed up loading time.
Show off a GitHub info card with shortcuts to your repository.
The block allows you to insert any public repository and display it in a beautiful layout.
First is finding the block, which I recommend using a / command for.
Using the slash command, find the GitHub Info Cards Grid block. Use slash command: /git
From there, you can enter the repo information, including username and repo.
The blocks are split into two. You have a main grid block and a child GitHub Info Card block.
In the main block's toolbar, you'll find the following shortcuts.
Switch themes
Switch between Large and Card layouts
Add a New Card
You can also switch themes via the block's sidebar options.
If multiple cards are in one grid, the grid layout settings will be displayed.
You can also control the visibility settings of certain sections by toggling them on or off. This applies to all cards within the grid.
The child block's toolbar allows you to:
Edit the GitHub repo's username and repo name.
Refresh the repo in the block editor.
Change the theme of all child blocks.
Change the appearance of all child blocks.
For the child block, the block controls allow you to override various sections of the card, including:
Repo name
Repo author
Homepage URL
Sponsors URL
Additional button controls allow you to customize the button, both in changing the button's text, and the button's URL.
Lastly, you would publish the changes and view the cards on your site.
By default, GitHub Info Cards are disabled. This is because they require a GitHub Personal Access Token to gather repository information.
Navigate to the admin settings and locate the GitHub Info Cards section.
Finding the Admin SettingsWhen prompted, enter your GitHub Personal Access Token. Here's an article on how to .
If successful, you will be shown your current rate limit.
You'll now be able to use the GitHub Info Cards block and shortcode.
The WP Plugin Info Card block is essentially a wrapper for the wp-pic shortcode.
When first inserting the block, you'll be presented with entering a type and plugin slug.
The slug can be comma-separated if you would like to display more than one plugin or theme at a time.
Switching to the Appearance tab will allow you to select a layout and a scheme.
Once you've selected a slug and layout, you can click on Preview and Configure. This will reveal an info card for a plugin or theme.
From the block's toolbar menu, you can edit the scheme and layout of the info card.
Finally, you can also set the layout/scheme in the sidebar options as well.
Create GitHub Info Cards With Plugin Info Card
The GitHub integration for WP Plugin Info Cards allows you to share practically any public GitHub repo.
A GitHub Personal Access Token is Required.
To avoid rate limit issues, a GitHub personal access token is required. I've written an article on .
A GitHub Info Card can be added via the or .
Display your active plugins in a grid
The Site Plugins Card Grid block will allow you to display all of your active plugins.
When you first insert the block, you'll have to load the plugins. Since these plugins are pinging the WordPress Plugin's API, it may take a minute to gather all of the information.
Once the plugins are loaded, you can change the scheme and layout used.
[wp-pic-plugin-screenshots slug="simple-comment-editing"]
/git to Find the Block
light
feathers
caramel
[wp-pic-plugin-screenshots slug="highlight-and-share" skip_animated_gifs="true"]The cards can be displayed in a Large or Card layout.
It features:
A top bar with language, license, and quick links.
An author bar with avatar, repo name, and author.
A stats bar with quick links to stars, forks, watchers, and current release.
A description.
A last updated bar and call-to-action.
The large layout is horizontally aligned and features a prominent call-to-action.
The card layout is center-aligned and features a prominent stats bar and call-to-action.
Here are the various themes for the GitHub Info Cards.
You can choose from several custom colors to make the GitHub card your own.
You can adjust the columns from 1-3 columns and also set a row and column gap for the grid.
Use wp-pic-query to output a set of plugins based on a query
Show off a plugin card with screenshots.
Search the plugin or theme directory for a keyword. Example of retrieving plugins that have to do with higlighting.
Search for a specific plugin or theme tag.
Retrieve a list of plugins or themes based on the .org username.
Retrieve a user's favorite plugins.
Browse, if specified, can have the following values.
featured
popular
updated
favorites
How many results should be returned.
This is an appearance attribute. Choose from 1 to 3 columns for the output.
The gap between columns in pixels.
The gap between rows in pixels.
A slug can be set in the shortcode attributes to override the title or disable the plugin from displaying.
Simply use the plugin or theme slug in the shortcode attributes.
Here's an example:
[wp-pic-query search="highlight"][wp-pic-query tag="dark,four-columns" per_page="4" type="theme" layout="wordpress" align="center" ajax="yes" cols="2"][wp-pic-query author="automattic" per_page="6" type="plugin" layout="wordpress" align="center" ajax="yes" cols="2"][wp-pic-query user="briKou" per_page="4" type="plugin" layout="wordpress" align="center" ajax="yes" cols="2"][wp-pic-query browse="popular" per_page="6" type="plugin" layout="card" margin="1rem" ajax="yes" cols="2"][wp-pic-query tag="buddypress" per_page="2" type="theme" layout="large" align="center" align="center"][wp-pic-query author="ronalfy" per_page="6" type="plugin" layout="wordpress" align="center" ajax="yes" cols="2" alerts-dlx="Alerts DLX" wp-ajaxify-comments="false" simple-comment-editing="Conversational Editing"]When you first enter the block, it will ask for the plugin slug. Go ahead and add your plugin slug; if it is found, you'll be taken to a new screen where you can configure the block.
There are several block options, which can further customize the block.
You can adjust how the icon appears for the plugin, and even make the icon black & white.
The Context menu displays extra links to the plugin's various sections. If disabled, the context menu will not display.
Sometimes the plugin title can be a bit long or has marketing text in it. You can customize how the plugin title is output based on this override.
If you want to display a plugin without screenshots, you can disable the option here.
For the appearance of the block, there are several "color themes" to choose from.
If you want to create a new color theme, select "Customize the colors," and you'll be able to select from several colors and be able to save your own custom color theme.
Use [wp-pic] to output a single plugin.
The wp-pic shortcode can be used to display a single or multiple plugins. See below for the shortcode parameters.
Example shortcode:
Can be of type plugin or theme. Type plugin is default.
The slug (required) parameter can be a single or comma-separated string of plugin slugs.
Comma-separate the slugs to be in multi mode, which will output multiple plugins.
A slug can be set in the shortcode attributes to override the title.
Simply use the plugin or theme slug in the shortcode attributes.
Here's an example:
You can do the same for themes:
This can be set to improve the margin around the plugin card.
none
compact
comfortable
spacious
Used to target the top, bottom, or both margins of the plugin card.
both
top
bottom
This must be set to true if there are multiple slugs. The following extra attributes assist in multi output:
cols (1-3)
col_gap - Gap in pixels between items
row_gap - Gap in pixels between rows
Default is “card” so you may leave this parameter empty. The default layout can be set in the admin settings.
Available layouts are:
card
large
flex
wordpress
Select a card color scheme. Available schemes are scheme1 through scheme14. The default scheme can be set in the admin settings.
Designate an image that will take the place of a plugin's default banner.
Set the alignment of the info card. Values can be:
center
left
right
Set the container ID of the plugin wrapper.
The default is: default: wp-pic-PLUGIN-SLUG.
Set the margin for the info card. The default is no margin.
Whether to clear the float of the container. Default is empty.
Choices are:
below
after
By default, the info card are cached at 720 seconds, so as to not ping the WordPress plugin API in excess.
You can change this expiration when outputting your cards.
Whether to load the plugin in via Ajax.
Choices are: yes and no.
Whether to output any strings associated with a plugin or theme.
For plugins: url, name, icons, banners, version, author, requires, rating, num_ratings, downloaded, last_updated, download_link
For themes: url, name, version, author, screenshot_url, rating, num_ratings, downloaded, last_updated, homepage, download_link
Custom Plugin Cards allow you to use custom plugins with WP Plugin Info Card
Custom Plugin Cards are the latest addition to WP Plugin Info Card. They allow you to create third-party plugins that can be shared with the world and displayed using WP Plugin Info Card.
Create and display third-party plugins.
Configure whether Custom Plugin Cards and REST are enabled.
Enable or disable a REST API for your plugin.
Export single or multiple plugins to a JSON file.
Import single or multiple plugins via a JSON file.
Copy and share a REST URL to import a plugin remotely.
Keep third-party plugins up to date with the REST API.
Click on "Add New Plugin" in the sidebar to create a new plugin.
You'll be prompted to enter several pieces of information about the plugin. Please fill in as much information as possible. You're able to edit it later.
The Plugin Slug: The plugin slug will be used in WP Plugin Info Card to display the plugin.
Once you've saved the plugin, it'll display in the plugin list. You can then use the slug to display the plugin using WP Plugin Info Card.
To configure Custom Plugin Cards, head to the advanced settings in the admin panel.
Click on "Configure Settings" to reach the settings for Custom Plugin Cards.
From the Advanced settings, you can configure whether custom plugins are enabled. If disabled, no custom plugins will display on the frontend. If enabled, then the custom plugins created will be displayed if available.
If you choose to enable the REST API, then any plugin you create can have a REST API endpoint available. This REST URL can be shared with other users, and the plugin can be imported and synced via this REST API.
Once enabled, you can also choose how often you ping the REST APIs you are subscribed to. The recommended time is 14 days, but you can adjust this sooner or later.
Please note that this relies on others having their REST API available for consumption. A user can enable their REST API for the initial import, but restrict it later.
When editing a plugin, you can enable a REST API for the plugin.
You can set a passcode so that others can access your REST API URL. If you don't want people to access your REST API to update a plugin, you can change the passcode or disable REST in the admin settings.
The REST API Data Version is used to alert others when your data has changed, particularly with the images. The text is auto-updated, but the images will only be auto-updated if the version has changed.
You can copy a plugin's REST URL by clicking the contextual menu on the plugin's screen and copying it.
Once copied, a REST URL can be imported.
An individual plugin may be exported by opening the Contextual Menu and clicking Export Plugin. This plugin will then be exported via a JSON format.
You can export multiple plugins by clicking the checkbox options for a plugin.
Import a plugin by clicking the "Import Plugin" button.
Select a "JSON" file exported from WP Plugin Info Card.
Once the import is successful, the plugin will show up in your plugin list.
Once someone has shared a REST URL with you, you can import it by clicking the "Import Plugin" option and selecting "Import from REST API."
You can use the plugin's slug to display it using WP Plugin Info Card.
You'll then be able to preview the block on the frontend.
[wp-pic slug="simple-revisions-delete" layout="large" scheme="scheme1" align="right" margin="0 0 0 20px" containerid="download-sexion" ajax="yes"]// Some code
[wp-pic type="theme" slug="zerif-lite"][wp-pic slug="wp-plugin-info-card"][wp-pic slug="highlight-and-share,simple-comment-editing" multi="true" cols="2" col_gap="40" row_gap="40"][wp-pic slug="wp-plugin-info-card,highlight-and-share" multi="true" cols="2" highlight-and-share="test highlight" wp-plugin-info-card="test"][wp-pic type="theme" slug="twentytwentyfour,twentytwentythree" multi="true" cols="2" twentytwentyfour="2024" twentytwentythree="2023"][wp-pic slug="highlight-and-share,simple-comment-editing" multi="true" cols="2" col_gap="40" row_gap="40"][wp-pic slug="wp-plugin-info-card" layout="wordpress"][wp-pic slug="wp-plugin-info-card" scheme="scheme14"][wp-pic slug="wordpress-seo" image="http//www.mywebsite/custom-image.jpg"][wp-pic slug="wordpress-seo" align="right" margin="0 0 0 20px"][wp-pic slug="wordpress-seo" clear="after"][wp-pic type="theme" slug="zerif-lite" expiration="60"]
Display a card from GitHub in a large or card format.
You can use the GitHub card shortcode to display GitHub cards anywhere shortcodes are supported.
Here is an example of the shortcode in use, using default settings.
The following are the parameters for the shortcode:
Required Attributes
username
string
Layout & Display Attributes
Sample shortcodes:
Spacing & Margin Attributes
Sample shortcode with a comfortable margin on the bottom:
Color Customization Attributes
The style attribute must be custom for custom colors to register.
Sample shortcode:
Display Toggle Attributes
Sample shortcode:
Button Configuration Attributes
Sample shortcode:
Content Override Attributes
Sample shortcode:
CSS Classes
The shortcodes generate CSS custom properties (variables) that you can override in your theme:
Modern browsers with CSS Grid support
Responsive design that works on mobile and desktop
Graceful fallbacks for older browsers
[github-info-card username="dlxplugins" repo="highlight-and-share"]style
string
light
Style slug (options: dark, light, bw, purple, colorful, custom)
style - dark
Dark theme
style - light
Light theme
style - bw
Black and White theme
style - purple
Purple theme
style - colorful
Colorful theme
style - custom
Use custom colors
iconcolorhover
string
#111827
Icon color on hover
bordercolor
string
#d0d7de
Border color
languagebgcolor
string
#24292f
Programming language badge background
languagetextcolor
string
#fff
Programming language badge text color
sponsorscolor
string
#bf3989
Sponsors section color
buttonbgcolor
string
#1a7f37
Button background color
buttonbgcolorhover
string
#2c974b
Button background color on hover
buttontextcolor
string
#fff
Button text color
buttontextcolorhover
string
#fff
Button text color on hover
showlastupdated
boolean
true
Show the last updated timestamp
overridebuttonurl
string
-
Custom button URL when override is enabled and buttontype is custom
sponsorsurloverride
string
-
Override the sponsors URL
organizationurloverride
string
-
Override the organization URL
homepageurloverride
string
-
Override the homepage URL
avatarimageurl
string
-
Override the avatar image URL
-
GitHub username or organization name
repo
string
-
GitHub repository name
layout
string
large
Card layout style (options: large, card)
align
string
center
Block alignment (options: center, wide, full)
horizontalalign
string
center
marginspacing
string
none
Margin spacing style (options: none, compact, comfortable, spacious,extreme)
marginspacingtarget
string
both
Target for margin spacing (options: both, top, bottom)
backgroundcolor
string
#fff
Card background color
textcolor
string
#24292f
Main text color
iconcolor
string
#666
showtopbar
boolean
true
Show the top information bar
showauthorbar
boolean
true
Show the author information section
showstatsbar
boolean
true
buttontype
string
github
Type of button to display (options: github, website, sponsor, download,star, custom)
overridebutton
boolean
false
Whether to override the default button
overridebuttontext
string
View on GitHub
nameoverride
string
-
Override the repository name display
loginoverride
string
-
Override the username display
versionoverride
string
-
class
string
-
Additional CSS classes for custom styling
uniqueid
string
auto-generated
Unique identifier for the card needed for custom colors and styles (auto-generated if not provided)
Horizontal alignment (Options: left, center, right)
Icon color
Show the statistics bar (stars, forks, etc.)
Custom button text when override is enabled
Override the version information
[github-info-card username="dlxplugins" repo="highlight-and-share" style="bw" layout="card"][github-info-card username="dlxplugins" repo="highlight-and-share" style="dark" layout="large"][github-info-card username="dlxplugins" repo="highlight-and-share" style="dark" layout="large" marginspacing="comfortable" marginspacingtarget="bottom"][github-info-card username="dlxplugins" repo="highlight-and-share" style="custom" layout="large" marginspacing="comfortable" backgroundcolor="#DDD"][github-info-card username="dlxplugins" repo="highlight-and-share" style="purple" layout="large" marginspacing="comfortable" showtopbar="false"][github-info-card username="dlxplugins" repo="highlight-and-share" style="bw" overridebutton="true" overridebuttontext="View" overridebuttonurl="https://dlxplugins.com" buttontype="custom"][github-info-card username="dlxplugins" repo="highlight-and-share" style="light" layout="large" marginspacing="comfortable" nameoverride="Highlight and Share"][github-info-card username="dlxplugins" repo="highlight-and-share" style="light" layout="large" marginspacing="comfortable" loginoverride="DLX Plugins"][github-info-card username="dlxplugins" repo="highlight-and-share" style="light" layout="large" marginspacing="comfortable" loginoverride="DLX Plugins" avatarimageurl="https://secure.gravatar.com/avatar/b1f98471cbb84ddeb26979e992e4492775c4cbd8ee643454790c7a8f42c67e38?s=200&d=mm&r=g"]:root {
--wppic-gap-sm: 8px;
--wppic-gap-md: 16px;
--wppic-gap-lg: 24px;
--wppic-grid-col-gap: 24px;
--wppic-grid-row-gap: 24px;
}
:root {
--wppic-github-background-color: #fff;
--wppic-github-text-color: #24292f;
--wppic-github-icon-color: #666;
--wppic-github-icon-color-hover: #111827;
--wppic-github-border: #d0d7de;
--wppic-github-language-bg: #24292f;
--wppic-github-language-color: #fff;
--wppic-github-sponsors-color: #bf3989;
--wppic-github-button-bg: #1a7f37;
--wppic-github-button-bg-hover: #2c974b;
--wppic-github-button-text-color: #fff;
--wppic-github-button-text-color-hover: #fff;
}