WordPress Cryptocurrency Dashboard Widget

A custom WordPress dashboard widget displaying the top 10 cryptocurrencies with icons, real-time prices, and 24-hour percentage changes using the free Coinpaprika API. This widget provides at-a-glance crypto market information directly in your WordPress admin dashboard with automatic updates and a clean, professional display.

Creating the Dashboard Widget Plugin

The following code creates a complete WordPress plugin that adds a cryptocurrency dashboard widget to your admin area. The widget displays the top 10 cryptocurrencies ranked by market cap, with visual indicators for price movements.

<?php
/*
Plugin Name: Crypto Top 10 Dashboard Widget
Plugin URI: https://example.com/crypto-dashboard-widget
Description: Displays top 10 cryptocurrencies with icons, prices and percentage changes using Coinpaprika API
Version: 1.0
Author: Your Name
Author URI: https://example.com
License: GPL2
*/

// Register the dashboard widget
add_action('wp_dashboard_setup', 'register_crypto_dashboard_widget');

function register_crypto_dashboard_widget() {
    wp_add_dashboard_widget(
        'crypto_top10_widget',          // Widget ID
        'Top 10 Cryptocurrencies',      // Widget title
        'crypto_dashboard_widget_content', // Display function
        'crypto_dashboard_widget_configure'  // Configuration function (optional)
    );
}

// Widget content display function
function crypto_dashboard_widget_content() {
    // Add widget styles
    echo '<style>
        .crypto-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 13px;
        }
        .crypto-table th, .crypto-table td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .crypto-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        .crypto-icon {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            border-radius: 50%;
            background-color: #f0f0f0;
            color: #333;
            font-weight: bold;
            font-size: 10px;
            vertical-align: middle;
        }
        .crypto-positive {
            color: #0ecb81;
            font-weight: 600;
        }
        .crypto-negative {
            color: #f6465d;
            font-weight: 600;
        }
        .crypto-refresh {
            float: right;
            margin-top: 5px;
        }
        .crypto-loader {
            text-align: center;
            padding: 20px;
        }
    </style>';
    
    // Add refresh button
    echo '<button id="crypto-refresh-btn" class="button crypto-refresh">Refresh</button>';
    
    // Create container for crypto data
    echo '<div id="crypto-container">
            <div class="crypto-loader">Loading cryptocurrency data...</div>
          </div>';
    
    // Add JavaScript to fetch and display data
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // Function to fetch crypto data from Coinpaprika API
        function fetchCryptoData() {
            $('#crypto-container').html('<div class="crypto-loader">Loading cryptocurrency data...</div>');
            
            $.ajax({
                url: 'https://api.coinpaprika.com/v1/tickers',
                data: { limit: 10 },
                type: 'GET',
                success: function(data) {
                    if (data && data.length > 0) {
                        renderCryptoData(data);
                    } else {
                        $('#crypto-container').html('<p>No cryptocurrency data available.</p>');
                    }
                },
                error: function(xhr, status, error) {
                    $('#crypto-container').html('<p>Error loading cryptocurrency data. Please try again later.</p>');
                    console.error(error);
                }
            });
        }
        
        // Function to display the crypto data in a table
        function renderCryptoData(data) {
            var html = '<table class="crypto-table">' +
                       '<thead>' +
                       '<tr>' +
                       '<th>Rank</th>' +
                       '<th>Coin</th>' +
                       '<th>Price (USD)</th>' +
                       '<th>24h Change</th>' +
                       '</tr>' +
                       '</thead>' +
                       '<tbody>';
                       
            $.each(data, function(i, crypto) {
                var price = parseFloat(crypto.quotes.USD.price).toFixed(2);
                var change = parseFloat(crypto.quotes.USD.percent_change_24h).toFixed(2);
                var changeClass = change >= 0 ? 'crypto-positive' : 'crypto-negative';
                var changePrefix = change >= 0 ? '+' : '';
                var symbol = crypto.symbol;
                
                html += '<tr>' +
                        '<td>' + crypto.rank + '</td>' +
                        '<td><span class="crypto-icon">' + symbol.charAt(0) + '</span>' + crypto.name + ' (' + symbol + ')</td>' +
                        '<td>$' + numberWithCommas(price) + '</td>' +
                        '<td class="' + changeClass + '">' + changePrefix + change + '%</td>' +
                        '</tr>';
            });
            
            html += '</tbody></table>' +
                    '<p><small>Last updated: ' + new Date().toLocaleString() + ' | Data from Coinpaprika API</small></p>';
            
            $('#crypto-container').html(html);
        }
        
        // Helper function to format numbers with commas
        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
        
        // Load data when page loads
        fetchCryptoData();
        
        // Set up refresh button
        $('#crypto-refresh-btn').on('click', function() {
            fetchCryptoData();
        });
        
        // Refresh data every 5 minutes
        setInterval(fetchCryptoData, 300000);
    });
    </script>
    <?php
    
    // Fallback for when JavaScript is disabled
    echo '<noscript>';
    display_server_side_crypto_data();
    echo '</noscript>';
}

// Server-side fallback function for when JavaScript is disabled
function display_server_side_crypto_data() {
    $response = wp_remote_get('https://api.coinpaprika.com/v1/tickers?limit=10');
    
    if (is_wp_error($response)) {
        echo '<p>Error fetching cryptocurrency data.</p>';
        return;
    }
    
    $cryptos = json_decode(wp_remote_retrieve_body($response), true);
    
    if (empty($cryptos)) {
        echo '<p>No cryptocurrency data available.</p>';
        return;
    }
    
    echo '<table class="crypto-table">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Coin</th>
                    <th>Price (USD)</th>
                    <th>24h Change</th>
                </tr>
            </thead>
            <tbody>';
    
    foreach ($cryptos as $crypto) {
        $price = number_format($crypto['quotes']['USD']['price'], 2);
        $percent_change = number_format($crypto['quotes']['USD']['percent_change_24h'], 2);
        $change_class = ($percent_change >= 0) ? 'crypto-positive' : 'crypto-negative';
        $change_prefix = ($percent_change >= 0) ? '+' : '';
        $symbol = $crypto['symbol'];
        
        echo "<tr>
                <td>{$crypto['rank']}</td>
                <td><span class='crypto-icon'>" . substr($symbol, 0, 1) . "</span>{$crypto['name']} ({$symbol})</td>
                <td>\${$price}</td>
                <td class='{$change_class}'>{$change_prefix}{$percent_change}%</td>
            </tr>";
    }
    
    echo '</tbody></table>';
    echo '<p><small>Last updated: ' . date('Y-m-d H:i:s') . ' | Data from Coinpaprika API</small></p>';
}

// Optional configuration function
function crypto_dashboard_widget_configure() {
    // Add configuration options if needed
    $refresh_interval = isset($_POST['crypto_refresh_interval']) ? absint($_POST['crypto_refresh_interval']) : 5;
    
    if (isset($_POST['submit'])) {
        $refresh_interval = absint($_POST['crypto_refresh_interval']);
        update_option('crypto_widget_refresh_interval', $refresh_interval);
    }
    
    ?>
    <p>
        <label for="crypto_refresh_interval">Auto-refresh interval (minutes):</label>
        <input class="widefat" id="crypto_refresh_interval" name="crypto_refresh_interval" type="number" min="1" step="1" value="<?php echo $refresh_interval; ?>">
    </p>
    <?php
}

PHP

How the Widget Works

This dashboard widget uses the Coinpaprika API to fetch real-time cryptocurrency data and display it in an attractive, easy-to-read format within your WordPress admin dashboard. Here’s a breakdown of its key features:

API Integration

The widget connects to Coinpaprika’s free API endpoint /v1/tickers to fetch data about the top 10 cryptocurrencies ranked by market capitalization. This endpoint provides comprehensive information including prices, market caps, and percentage changes over different time periods.

Visual Representation

Each cryptocurrency is displayed with:

A simple icon showing the first letter of the cryptocurrency’s symbol
The full name and symbol (e.g., Bitcoin (BTC))
Current price in USD with proper formatting
24-hour price change percentage with color coding (green for positive, red for negative).

Performance Features

Client-side rendering: Uses jQuery AJAX to fetch and render data without reloading the page.
Auto-refresh: Automatically updates cryptocurrency data every 5 minutes (configurable)
Manual refresh: Includes a refresh button for on-demand updates
Graceful degradation: Provides server-side rendering fallback when JavaScript is disabled

Technical Implementation

The widget is implemented as a proper WordPress plugin with:

A main plugin file with appropriate WordPress headers
Registration hooks to add the widget to the WordPress dashboard
Content display functions for both JavaScript and non-JavaScript environments
CSS styling for an attractive, consistent appearance
Optional configuration capability for customizing refresh intervals

Installation Instructions

Create a new folder named crypto-top10-widget in your WordPress plugins directory (wp-content/plugins/)
Place the above code in a file named crypto-top10-widget.php within that folder
Activate the plugin from your WordPress admin dashboard
The widget will automatically appear on your dashboard

Customization Options

You can modify this widget by:

Adjusting the CSS styles to match your admin theme
Increasing or decreasing the number of cryptocurrencies displayed (modify the limit parameter)
Adding additional data columns like market cap or volume
Changing the refresh interval in the widget settings

This implementation uses the Coinpaprika free API, which provides extensive cryptocurrency market data without requiring an API key for basic usage

Creating the Dashboard Widget Plugin

How the Widget Works

API Integration

Visual Representation

Performance Features

Technical Implementation

Installation Instructions

Customization Options

Related Posts

Crypto Donation

Convert Uploaded Images to WebP Format

Smart Speculative Loading for WordPress 6.8+

Trending now