How to Display Plugin and Theme Information in WordPress

Showcasing the specific plugins, themes and other tools used to build your WordPress site has a variety of benefits. Visitors can discover new extensions to try out and gain confidence that you create your content by using the best solutions available.

According to statistics from WordPress community hub ThemeIsle, over 55 million WordPress sites have been created. And the WordPress plugin directory now includes over 60,000 plugins!

With this massive ecosystem, displaying details on the exact plugins and themes powering your site helps provide transparency. Readers can better evaluate your recommendations knowing the tools you rely on.

In this comprehensive guide, we will compare two straightforward methods for presenting plugin and theme information on your WordPress site:

Method 1) Utilize the WP Plugin Info Cards plugin to dynamically fetch and showcase details with no coding needed

Method 2) Manually add shortcodes to display core plugin/theme data from WordPress

Let‘s take an in-depth look at how each approach works.

Using WP Plugin Info Cards to Showcase Plugin & Theme Details

The WP Plugin Info Cards plugin makes displaying rich information cards incredibly easy. We‘ll walk through setup and key features.

Installing and Configuring the Plugin

Once installed, the plugin automatically adds a toolbar button to post/page editor. No special configuration is required on the settings page:

When editing a post or page, you‘ll see the new button for generating shortcodes:

Clicking the button launches a popup where you can pick plugin vs theme, enter a slug, choose from dozens of designs and insert a shortcode in just a few clicks.

For example, here is a shortcode to display details on the Floating Social Bar plugin:

[wp-pic slug="floating-social-bar"]

This will output the rich info card anywhere on your site:

Additional Features

Beyond the basics outlined above, the WP Plugin Info Cards plugin has a number of extra capabilities:

• Addons Support – Display details on addons for plugins like Elementor
• Custom Images – Use your own photos instead of banners
• Visual Editor – Drag and drop designer for custom layouts
• Analytics – See how many times cards are displayed
• Caching – Enable caching for improved performance

For example, you can show data on the full Elementor ecosystem with this addon info card:

[wp-pic slug="elementor" type="addon"]

And display a custom icon using the image parameter:

[wp-pic slug="google-analytics" image_url="https://example.com/ga-icon.png"]

Video Walkthrough Tutorial

Check out this 5-minute video showing the entire process of installing the plugin and adding info cards:

https://www.youtube.com/watch?v=ZQY0WIqGFuo

Now let‘s see some examples of the beautifully designed layouts available in WP Plugin Info Cards.

Unique Plugin & Theme Info Card Designs

The plugin includes tons of customization options for adjusting visual appearance. For both plugin and theme cards, change alignment, structure (box, vertical, horizontal), font sizes, colors, borders, spacing and much more.

Here the Twenty Twenty-Two theme is displayed with custom CSS styling:

And the Smush image optimization plugin using the "Box Shadow" design:

You can see dozens more card examples on the WP Plugin Info Cards site.

Now let‘s compare the benefits and downsides to instead manually adding shortcodes.

Manually Adding Plugin & Theme Info Shortcodes

Using shortcodes is a simple way to display basic plugin and theme details without needing an extra plugin installed.

Here is the format:

[wpplugin slug="PLUGIN_SLUG"]

[wptheme slug="THEME_SLUG"] 

For example, to showcase Yoast SEO:

[wpplugin slug="wordpress-seo"]

Displays:

Some key parameters for customizing output include:

show_downloads – Hide/show download counts
show_rating – Hide/show rating stars
show_tested – Hide/show tested WP version
show_updated – Hide/show last updated date

Here we hide ratings and downloads for the Astra theme:

[wptheme slug="astra" show_rating="false" show_downloads="false"]

Displays clean card with just core details:

For a full list of supported parameters, check the shortcode reference at CodeReference.

Comparing Plugin vs Manual Shortcodes

The WP Info Cards plugin makes adding rich, visually appealing cards easier, especially for non-developers. However, basic shortcodes still provide value for simple needs or adding data dynamically.

WP Plugin Info Cards Benefits:

• Automatic fetching of latest details
• Beautiful out-of-box designs
• No coding needed for customization
• Advanced features like custom images

Manual Shortcodes Benefits:

• Requires no additional plugin
• Lightweight performance
• Works well for adding data via hooks/code

So in summary, its best practice is:

• Use WP Plugin Info Cards for enhanced appearance and dynamic fetching
• Use shortcodes when coding info cards data or prefer ultra simple

Next let‘s go over some pro tips for taking your plugin/theme information cards to the next level!

Actionable Tips for Advanced Information Cards

Both the WP Plugin Info Cards plugin and standard shortcodes support parameters for deeper customization.

Here are some actionable tips:

Display Custom Graphics

Specify the image_url parameter to show custom icons, logos or other graphics related to a plugin/theme:

[wp-pic slug="google-analytics" image_url="https://example.com/ga-icon.png"]

Graphics help cards stand out visually. Download free icons at IconFinder.

Format Information Card Styling

While default styling looks great, adding some custom CSS enables full flexibility.

For example, here we set widths, spacing, borders and font styling:

.wp-plugin-info-card {
  width: 300px;
  margin: 20px; 
  border: 1px solid #EEE;
  font-family: Helvetica;
}

Review built-in CSS classes starting with ".wp-plugin-info-card" to target elements.

Display Dynamic WordPress Data

Both methods pull plugin/theme details from WordPress by default. You can also use hooks to inject additional or dynamic data.

Some ideas:

• Integration details
• Analytics stats
• Custom messaging
• Related content

Here we add integration data on plugin activation:

function my_plugin_activated( $plugin ) {

  if( $plugin == ‘woocommerce‘ ) {

    echo ‘<p>Powered by WooCommerce!</p>‘;

  }

}
add_action( ‘wppic_after_title‘,‘my_plugin_activated‘ );

For more on hooks, check out our complete WordPress actions and filters tutorial.

Recap and Next Steps

Congratulations, you now know two excellent methods for presenting plugin and theme details on WordPress sites. Showcasing the tools you use provides helpful transparency for visitors.

Here‘s a quick checklist to recap how to move forward:

• Decide if manually adding shortcodes vs utilizing the WP Plugin Info Cards plugin best fits your needs
• Install chosen method and test adding sample cards
• Customize visual design, imagery, hooks and data outputted
• Strategize on optimal pages and posts to showcase your stack

We invite you to share any other tips on displaying plugin/theme information in the comments section below!