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

1. Download the archive and unzip
2. Upload the ‘github-stars-widget’ folder to the /wp-content/plugins/ directory
3. Activate the plugin through the ‘Plugins’ menu in WordPress
4. In Appearances->Widgets, add the GitHub Stars widget to the section of your theme you want to display them in.
5. 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;
}

The above CSS looks like this (will vary based on your theme):

Download

Changelog

1.0.1

Just some spelling fixes