WordPress GitHub Stars Widget

A tiny little WordPress plugin that puts your GitHub stars in a widget for your footer or sidebar.

The Widget refreshes its content once every hour. You can force an update by re-saving the widget’s preferences in Appearance->Widgets.

Installation

Download the archive and unzip
Upload the ‘github-stars-widget’ folder to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress
In Appearances->Widgets, add the GitHub Stars widget to the section of your theme you want to display them in.
Input your username and number of stars to display in the widget settings.

Styling the output

Stars are displayed in a definition list (<dl>). Each star has a term (<dt>) with the linked title, and a definition (<dd>) with the project description.

<aside class="widget bt_github_stars">
    <h1 class="widget-title">Users’s GitHub Stars</h1>

    <dl class="stars_list">

        <dt class="star_title">
            <a href="https://github.com/asdf-vm/asdf" target="_blank">★ <span class="star_owner">repo-owner</span><span class="star_slash">/</span><strong class="star_name">repo-name</strong></a>
        </dt>
        <dd class="star_description">Repo description</dd>
    </dl>
    <p class="stars_link">→ See all of <a href="https://github.com/user?tab=stars">user's stars on GitHub</a></p>
</aside>

Some example CSS, pulling colors from the Nord palette:

.bt_github_stars {
    background: #2e3440;
    padding: 10px;
    border-radius: 8px;
}

.star_title a {
    color: #ffc000 !important;
    transition: color .05s linear;
}

.star_title a:hover,
.star_title a:hover .star_owner,
.star_title a:hover .star_name {
    color: #ffc000;
    transition: color .5s linear;
}

.star_owner {
    font-weight: 300;
    color: #80a0c2;
}

.star_slash {
    color: #87649f;
}

.star_name {
    color: #eceff4;
    font-weight: 600;
    font-size: 112%;
}

.star_description {
    color: #86c0d1;
    margin: 0 .5em 1em 1em;
}

.stars_link, .stars_link a {
    color: #ffc000;
}