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.
Installation. The plugin can be downloaded from GitHub:
User Biography on GitHubInstallation 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 GitHubInstallation. 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 parametertemplate
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 parametertemplate
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>', ), );