This tutorial is for WordPress developers who want to integrate a GitHub login button into their WordPress themes. eCommerce sites and Forums require you to login, and providing a GitHub login button make the registration and login process faster for users as they don’t have to fill up long forms.
Today we will look at the two possible methods for integrating Github Login to WordPress sites.
Table of Contents
- Including The GitHub OAuth WordPress library
- WordPress Github Plugins & Other Resources
Including The GitHub OAuth WordPress library
I have created a Github OAuth library for WordPress which handles all the tough task of Github OAuth login. This library also creates necessary REST API URLs required for Github Login.
Extract the zip file in your theme folder. Now you will have a inc directory in your theme folder which has all necessary files for GitHub login.
Loading Github OAuth WordPress Library
Now you need to load the library into WordPress. Inside your theme’s
functions.php file include
require_once( "inc/githuboauth.php" );
When user clicks on the Sign In with GitHub button you need to redirect user to:
site_url() . "/wp-admin/admin-ajax.php?action=github_oauth_redirect"
This URL will handle all core functionality of Sign In with GitHub. Once the user has been logged in, the user will be redirected to the homepage of the website.
Creating a GitHub App
Users who install your theme needs to create a GitHub App for their website.
While creating a Github App, Github asks for a callback URL. Users will have to use
get_site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_callback'
as callback URL.
Once they have created a GitHub App they need to copy the Client ID, Client Secret and App name from GitHub App dashboard and store them as WordPress options.
Use the following option names to store the option values.
update_option( "github_key", $client_id_variable ); update_option( "github_secret", $client_secret_variable ); update_option( "github_app_name", $github_app_name_variable );
This is all you need to do to have a GitHub login button in your theme. Letâ€™s create a GitHub Login widget that displays a GitHub Login Button.
GitHub Login Widget
Here is the code for creating a Github Login Widget.
You can put this code inside a plugin also. Make sure you pack the GitHub OAuth WordPress library with your plugin also.
Let’ss see how the above code works:
- We first included the GitHub OAuth library.
- Then we created a Widget that displays a Login button on the frontend and displays keys input boxes on backend.
- When users submit the widget form on the backend the values are saved as WordPress options.
- When someone clicks on the GitHub Login button on the frontend of the widget, the users are redirected to the Redirect URL as mentioned above. The redirected URL handles all the login task.
Making GitHub REST API Calls
Github provides different access tokens for different users. GitHub OAuth WordPress library stores the access tokens as user metadata. So make Github REST API calls using this library only if the user is logged in using GitHub.
Some example REST API calls:
Now you have learned how to create a GitHub Login button. If you integrate it in your theme then you can place it button anywhere. If you integrate it in the plugin then you need to put in a widget.
WordPress Github Plugins & Other Resources
WordPress Github Plugin
The WordPress Github Plugin is a WordPress plugin that displays the github profile of the provided user profile.
- Easily integrates with wordpress.
- Displays subscription and fork statistics for the profile
- Ajax driven
- Simple shortcode
- Exhaustive documentation
WP Github Repository plugin
The WP Github Repositories WordPress plugin is a Widget for displaying your own repository in your Blog, with several Themes. The Widget is responsive and easy to use and to customize. it’s working in WordPress 3.6 +
- The Widget have six theme,
- Work in all major modern browser,
- Easy to use and to customize
GitHub Issue Creator
One of the best things about GitHub is its issue tracker. You can reference and close issues from commit messages, as well as assign an issue to a particular team member.
However, as great as the feature is, it’s impossible to let your client create issues for your projects without adding them as a team member.
As a result, GitHub Issue Creator was designed to make a bridge between your client’s website and GitHub. You can embed a “new ticket” form on their website that will create an issue on your GitHub repository. Plus, you won’t have to put your GitHub API credentials on their server. Everything is kept on your server.
GitHub Activity Timeline Widget
Github WordPress Widget
Allows a user to add a widget to show their Github repositories on their site. Based around the main Github site and its API. Plugin displays a list of repositories the user has on the site, as well as the percentage of commits to the project.
Plugin that allows you to embed details from github just by pasting in the URL as you would any other embed source. Currently supports:
- User profiles
- Project milestone summaries
- Project contributors
WP GitHub Tools
Use the custom GitHub Commit widget to display a list of the latest updates from a repository. Additionally, you can use shortcodes to add commit lists or embed any gist. The plugin will cache the GitHub response for a certain time period. You can change this value to any WordPress schedules you have isntalled (default: hourly, half-day, daily). To get more time frames you will need an additional plugin that extends the cron schedules.
WP Github provides three sidebar widgets which can be configured to display public profile, repositories, commits, issues and gists from github in the sidebar. You can have as many widgets as you want configured to display different repositories.
WP Github Commits
Displays the latest commits of a github repo in the sidebar. The Plugin provides a sidebar widget which can be configured to display commits from a github repo in the sidebar. You can have multiple widgets with different repo configured for each one of them.
This plugin doesn’t contain any feature (widget or shortcode) that you can use directly once the plugin is activated. This plugin contains API to help you in making a call to GitHub API resources. There’s
includes/tools.php file that show you how to use the API from this plugin to make a call to various GitHub resources (for instance to get repository information).
WP Github Gist
WP Github Gist WordPress Plugin, provides the ability to embed gist and files from Github in your blog posts or pages. Even though Github doesn’t provide a way to embed files, this Plugin still works by using the gist-it service.