QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads WordPress Frontend Twitter OAuth Login

WordPress Frontend Twitter OAuth Login

twitter-oauth-wordpress

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 .

require_once("inc/twitteroauth.php");

Redirecting users

When user clicks on Sign In with twitter button you need to redirect user to

site_url()."/wp-admin/admin-ajax.php?action=twitter_oauth_redirect"

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

site_url()."/wp-admin/admin-ajax.php?action=twitter_oauth_callback"

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_key", $consumer_key_variable);
   
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.

<?php

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.

<?php
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.

Oct 16, 2014Narayan Prusty
Login User into WordPress without PasswordWordPress Frontend Facebook Login
Comments: 1
  1. Paulina
    5 years ago

    I aam sure this piece of writing haas toucched all the internt
    people, iits really really nice piece off writing on building up new webpage.

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 1 Comment WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Downloading and including the Twitter OAuth WordPress library
  • Loading Twitter OAuth WordPress library
  • Redirecting users
  • Creating and Installing Twitter App
  • Twitter Login Widget
  • Making Twitter REST API Calls
  • Conclusion
Related Articles
  • WordPress Frontend Facebook Login
  • Underscores.me Tutorial
  • WordPress Enable or Disable Auto Update
  • Attaching Icons to WordPress Theme Menu Items
  • Creating a One Page WordPress Theme
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license