IAM

ARTICLE

WordPress Plugins: GitHub and Biography

In this article I want to present two (very) simple Wordpress Plugins used on my personal page. Wordpress User Biography is used to enable authors add regular status messages, so called “Biography Parts”. In contrast, Wordpress Github allows to easily include the latest commits and releases of GitHub repositories using shortcodes.

Lately, I have been busy working on my personal webpage to

  • replace the "Biographical Info" field by regular status updates - similar to timeline updates on popular social networks,
  • and integrate GitHub (that is, show latest commits from several repositories),

The result are two (very) simple WordPress Plugins. Although these are far from stable, I want to share these plugins.

WordPress User Biography

WordPress "User Biography" complements the "Biographical Info" section of each WordPress author profile by an extra "Biography" section. Each author may add regular status messages consisting of a date and text, see figure 1. These status messages can easily be integrated into WordPress templates.

biography_screenshot

Figure 1: The "Biography" section of the WordPress profile.

Installation. The plugin can be downloaded from GitHub:

User Biography on GitHub

Installation is accomplished by creating a new folder user-biography within wp-content/plugins and copying the downloaded files (mainly user-biography.php) into wp-content/plugins/user-biography. The plugin can be activated in "Plugins" > "Installed Plugins".

Usage. Basic usage is illustrated by figure 1. A "Biography Part" can be added by checking "Add Biography Part" and adding the corresponding text. By clicking "Update profile", the "Biography Part" will be added and all other changes to the profile will be saved. Now, the "Biography Part" will occur directly under the "Add Biography Part" field - the date and text can be changed.

Theme integration. The created "Biography Parts" can easily be integrated into any WordPress Theme. For example, in author.php the following code snippet could be used:

<div class="author-biography">
    <?php $query = new WP_query('post_type=ub_part&post_author=' . $user->ID . '&orderby=date&post_limits=10'); ?>
    <?php while ($query->have_posts()): $query->the_post(); ?>
        <blockquote class="author-description">
            <?php str_replace('<p></p>', '', the_content()); ?>
            <small>
                <?php $day = get_the_date('d'); ?>
                <?php if ($day == 1): ?>
                    <?php echo $day; ?><sup>st</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?>
                <?php elseif ($day == 2): ?>
                    <?php echo $day; ?><sup>nd</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?>
                <?php elseif ($day == 3): ?>
                    <?php echo $day; ?><sup>rd</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?> 
                <?php else: ?>
                    <?php echo $day; ?><sup>th</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?>
                <?php endif; ?>, <?php echo $user->display_name; ?>
            </small>
        </blockquote>
    <?php endwhile; ?>
</div>

All the "Biography Parts" can easily be retrieved using the query:

$query = new WP_query('post_type=ub_part&post_author=' . $user->ID . '&orderby=date&post_limits=10');

where the "Biography Parts" have the unique post_type ub_part.

The latest "Biography Part" can also be shown under each post (as below this post) using:

function article_footer() {
    // Get corresponding user.
    $id = get_the_author_meta('ID');
    $user = get_user_by('id', $id);
    
    ?>
    <div class="article-author">
        <?php $query = new WP_query('post_type=ub_part&post_author=' . $user->ID . '&posts_per_page=1'); ?>
        <?php while ($query->have_posts()): $query->the_post(); ?>
            <blockquote class="author-description">
                <h3><?php echo __('ABOUTTHE', 'iamdavidstutz'); ?><b><?php echo __('AUTHOR', 'iamdavidstutz'); ?></b></h3>
                <?php str_replace('<p></p>', '', the_content()); ?>
                <small>
                    <?php $day = get_the_date('d'); ?>
                    <?php if ($day == 1): ?>
                        <?php echo $day; ?><sup>st</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?>
                    <?php elseif ($day == 2): ?>
                        <?php echo $day; ?><sup>nd</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?>
                    <?php elseif ($day == 3): ?>
                        <?php echo $day; ?><sup>rd</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?> 
                    <?php else: ?>
                        <?php echo $day; ?><sup>th</sup><?php echo strtoupper(get_the_date('F')); ?><?php echo get_the_date('Y'); ?>
                    <?php endif; ?>, <a href="<?php echo get_author_posts_url($user->ID); ?>"><?php echo $user->display_name; ?></a>
                </small>
            </blockquote>
        <?php endwhile; ?>
        <?php // IMPORTANT! ?>
        <?php wp_reset_postdata(); ?>
    </div>
    <?php
}

Both examples are taken from my personal template (which is also available on GitHub).

WordPress GitHub

The WordPress GitHub plugin uses a GitHub PHP client available on GitHub: tan-tan-kanarek/github-php-client. Currently, the plugin allows to display the latest commits of a collection of repositories hosted on GitHub. The plugin is available on GitHub and the latest commits are shown below:

WordPress GitHub on GitHub

Installation. The plugin can be installed by copying the downloaded files to wp-content/plugins/wordpress-github and activating the plugin using "Plugins" > "installed Plugins".

Settings. Usually, without authentication, GitHub limits the number of requests to the GitHub API. This may be problematic; therefore, in "Settings" > "GitHub", the plugin allows to enter GitHub username and password.

Note: The password is currently saved as plain text in the WordPress database. I intend to allow the usage of GitHub API tokens which can be created on GitHub under "Edit profile" > "Applications" > "Personal access tokens". Then, the token is entered as username and the password is left empty. However, currently this authentication option is not working.

Usage. The plugin provides several shortcodes:

  • The shortcode github-commits can be used to display the latest commits of a set of repositories:
    [github-commits repositories="davidstutz/wordpress-github" limit="5" template="bootstrap"]
    
    where the parameter template can be omitted when using the default template. The shortcode will produce the HTML shown above.
  • The shortcode github-releases can be used to display the latest releases:
    [github-releases repositories="davidstutz/bootstrap-multiselect" limit="3" template="bootstrap"]
    
    where, again, the parameter template may be omitted.

Templates. As indicated above, the plugin is based on templates. As my personal webpage is based on Twitter Bootstrap, two templates are provided: default (by omitting the template parameter) and bootstrap. The templates can be adapted in wp-content/plugins/wordpress-github/wordpress-github.php:

protected static $templates = array(
    'default' => array(
        'github_commits' => '<li class="wp-github-commit"><b><a href="https://github.com/:repository" target="_blank">:repository</a>@<a href=":html_url" target="_blank"><code class="wp-github-commit-sha">:sha</code></a></b>: :message <a href=":user_html_url" target="_blank"><img style="display:inline;" height="20" width="20" class="wp-github-commit-avatar" src=":user_avatar" /> :user_login</a>, :date</li>',
        'github_releases' => '<li class="wp-github-release"><b><a href="https://github.com/:repository" target="_blank">:repository</a>/<a href=":html_url">:tag_name</a></b>: :name <a href=":tar_html_url" class="wp-github-release-tar">tar</a>, <a href=":zip_html_url" class="wp-github-release-zip">zip</a>, :date</li>',
    ),
    'bootstrap' => array(
        'github_commits' => '<li><a href=":user_html_url" target="_blank"><span class="label label-primary">:user_login</span></a> <a href=":html_url" target="_blank"><span class="label label-default">:sha</span></code></a></b> :message</li>',
        'github_releases' => '<li><b><a href=":html_url" target="_blank">:tag_name</a></b> <a href=":zip_html_url" target="_blank">.zip</a> <a href=":tar_html_url" target="_blank">.tar</a></li>',
    ),
);
What is your opinion on this article? Let me know your thoughts on Twitter @davidstutz92 or LinkedIn in/davidstutz92.