This tutorial is for WordPress developers who want to integrate Twitter login button in WordPress themes. E-Commerce, Forum etc themes require you to login, providing a Twitter login button make the registration and login process faster for users as they don’t have to fill up long forms.
Downloading and including the Twitter OAuth WordPress library
I have created a Twitter OAuth library for WordPress which handles all the tough task of Twitter OAuth login. This library also creates necessary REST API URLs required for Twitter 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 Twitter login.
Loading Twitter OAuth WordPress library
Now you need to load the library into WordPress. Inside your theme’s “functions.php” file include .
Redirecting users
When user clicks on Sign In with twitter button you need to redirect user to
This URL will handle all core functionality of Sign In with Twitter. Once the user has been logged in, the user will be redirected to the homepage of the website.
Creating and Installing Twitter App
Users who install your theme needs to create a Twitter App for their website.
While creating a Twitter App, Twitter asks for a callback URL. Users will have to use
as callback URL.
Once they have created a Twitter App they need to copy the Consumer key and Consumer secret from Twitter App dashboard and store them as WordPress options.
Use the following option names to store the options value.
update_option("twitter_oauth_consumer_secret", $consumer_secret_variable);
This is all you need to do to have a Twitter login button in your theme.
Let’s create a Twitter Login widget which displays a Twitter Login Button.
Twitter Login Widget
Here is the code for creating a Twitter Login Widget.
You can put this code inside a plugin also. Make sure you pack the Twitter OAuth WordPress library with your plugin also.
require_once('inc/twitteroauth.php');
class Twitter_Login_Widget extends WP_Widget
{
public function __construct()
{
parent::__construct("twitter_login_widget", "Twitter Login", array("description" => __("Display a Twitter Login Button")));
}
public function form( $instance )
{
// Check values
if($instance)
{
$title = esc_attr($instance['title']);
$consumer_key = $instance['consumer_key'];
$consumer_secret = $instance['consumer_secret'];
}
else
{
$title = '';
$consumer_key = '';
$consumer_secret = '';
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'twitter_login_widget'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('consumer_key'); ?>"><?php _e('Consumer Key:', 'twitter_login_widget'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('consumer_key'); ?>" name="<?php echo $this->get_field_name('consumer_key'); ?>" value="<?php echo $consumer_key; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('consumer_secret'); ?>"><?php _e('Consumer Secret:', 'twitter_login_widget'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('consumer_secret'); ?>" name="<?php echo $this->get_field_name('consumer_secret'); ?>" value="<?php echo $consumer_secret; ?>" />
</p>
<p>
While creating a Twitter app use "<?php echo get_site_url() . '/wp-admin/admin-ajax.php?action=twitter_oauth_callback' ?>" as callback URL.
</p>
<?php
}
public function update( $new_instance, $old_instance )
{
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['consumer_key'] = strip_tags($new_instance['consumer_key']);
$instance['consumer_secret'] = strip_tags($new_instance['consumer_secret']);
update_option("twitter_oauth_consumer_key", $new_instance['consumer_key']);
update_option("twitter_oauth_consumer_secret", $new_instance['consumer_secret']);
return $instance;
}
public function widget( $args, $instance )
{
extract($args);
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
if($title)
{
echo $before_title . $title . $after_title ;
}
if(is_user_logged_in())
{
?>
<a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout"><input type="button" value="Logout" /></a>
<?php
}
else
{
?>
<a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=twitter_oauth_redirect'; ?>"><input type="button" value="Login Using Twitter" /></a>
<?php
}
echo $after_widget;
}
}
register_widget("Twitter_Login_Widget");
Let’s see how the above code works:
- We first included the Twitter OAuth library.
- Then we created a Widget which displays a Login button on frontend and displays consumer keys input boxes on backend.
- When users submit the widget form on backend the values are saved as WordPress options.
- When someone clicks on the Twitter 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.
Screenshots of the Twitter login widget
Making Twitter REST API Calls
This library is not only limited to just logging in but you can make request to various twitter REST apis after user is logged in.
Here is an simple example of making GET, POST and DELETE requests.
require_once('inc/twitteroauth.php');
$connection = new TwitterOAuth(get_option('twitter_oauth_consumer_key'), get_option('twitter_oauth_consumer_secret'), get_user_meta(get_current_user_id(), 'twitter_access_token', true), get_user_meta(get_current_user_id(), 'twitter_secret_access_token', true));
$connection->post('statuses/update', array('status' => 'Learning from QNimate'));
$connection->delete('statuses/destroy/12345');
$connection->get('https://api.twitter.com/1.1/followers/ids.json', array('screen_name'=>wp_get_current_user()->user_login))
Conclusion
Now you have learnt how to create a Twitter Login button. If you integrate it in your theme then you can place it button anywhere. If you integrate it in plugin then you need to put in a widget.
@narayanprusty
