A pretty simple and useful plugin, Page Template Dashboard lets see you what templates your…
In WordPress 4.0, the team introduced a new way of viewing and installing plugins that has become quite popular. Building on this, WP Plugin Info Card allows you to show basic information about any plugin in the WordPress plugin repository in a sleek template that flips over to reveal download links and more stats.
What’s it Do?
WP Plugin Info Card gives you a new shortcode which you can use to highlight a link to a plugin on any post or page on your site. Simply include the slug of a plugin hosted in the WordPress.org plugin repository, and the plugin will automatically pull in the logo, banner and meta information about that plugin, such as downloads, rating. When users click on a plugin card, it flips over (using some cool CSS animations) and gives a link to download a plugin directly, or visit the page on WordPress.org. All of this can be customized with shortcode parameters. As an added bonus, the plugin also allows you to add a widget to your dashboard if you’d like to track plugin’s on the back-end.
How’s it Work?
After you intstall and activate the plugin, you can start using it right away. To do so, you simply have to make use of the included shortcode [wp-pic]. The only required parameter for this shortcode is a plugin slug:
Simply doing this will add a plugin info card on your posts or pages. If you visit the front-end of your page, you will see a card which includes a logo at the top, the plugin title, and a little information about the plugin (rating, downloads, and WP version required). At the bottom is a “Download” link. If you click this, then the card will flip over, and show the plugin’s banner at the top, with a direct link to the zip file so users can download the plugin on the fly. This will also include a link to the plugin’s page on WordPress.org.
There are also several other parameters that you can use with the shortcode. For instance, the plugin automatically pulls in an SVG file for the logo and banner image. However, you can also choose to pull in a JPG or PNG image.
[wp-pic slug="ninja-forms" logo="256x256.jpg" banner="jpg"]
SVG is generally a better bet because it ensures that it will scale well on any device, but in practice many plugins haven’t added SVG images to their repositories yet, so it may be better to fall back to a JPG or PNG file. You can also replace the logo with a custom image by using the image parameter.
[wp-pic slug="wordpress-seo" image="http://yoursite.com/link/to/image.jpg"]
Replacement images should be 175×175 pixels, and will replace the logo image on the front of the plugin.
There are also a few parameters that the plugin includes to style the info card a bit differently.
[wp-pic slug="theme-check" align="right" containerid="info-card" margin="20px 0"]
This will align the info card to the right, add an HTML ID on the parent div named “info-card” and add 20 pixels of margin to the top and bottom. Lastly, the custom parameter can be used to specify which meta information you want to include on a plugin’s card. For more information about the shortcode parameters, you can visit the plugin’s website.
In terms of styling the plugin, it uses fairly basic CSS to get the job done, with a little bit of jQuery to aid the flip animation. You can see the full stylesheet for reference, but it is easy enough to customize the colors and layout to get it looking the way you want.
If you want to track plugins outside from the front-end site, WP Plugin Info Card also has a way for you to add a dashboard widget to the WordPress admin. Simply visit the WP Plugin Info menu option, scroll down to the bottom and check the “Enable dashboard widget” box. Underneath this, you can enter in the slug of every plugin you want to track, and click “Add Plugin”. After this, you can visit Dashboard in the admin and see the new widget in action. It will have a list of plugins you added, with the meta information for each. I’m sure this is a handy feature for plugin developers looking to keep track of their own plugins.
Costs, Caveats, Etc.