Creating a Reddit Login Button for WordPress

0

This tutorial is aimed at WordPress developers who want to add a Reddit login to their WordPress theme. For themes built for ecommerce, forums and other sites that require users to login, providing the option for a Reddit login button makes the registration and login process both faster and easier for users as they don’t have to complete a form.

The Reddit OAuth WordPress Library

I have created a Reddit OAuth library for WordPress which handles all of the tough tasks of the Reddit OAuth login.

This library also creates the necessary WordPress REST API URLs required for Reddit login.

Once you’ve downloaded the ZIP file above, extract the contents into your theme folder. Now you will have an /inc directory in your theme folder which has all necessary files for a Reddit login.

Loading the Reddit OAuth WordPress Library

Now you need to load the library into WordPress. Inside your theme’s functions.php file, just include the following:

require_once("inc/redditoauth.php");

Redirecting Users

Next, when the user clicks on the Sign In with Reddit button, you need to redirect user:

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

This URL will handle all of the core functionality of Sign In with Reddit. Once the user has been logged in, the user will be redirected to the homepage of the website.

Creating and Installing a Reddit App

Users who install your theme need to create a Reddit app representing your website. Users need to follow these instructions:

  1. Visit the Reddit apps page.
  2. Click on the Create an App button.
  3. Now fill in the form. Choose the app type as web app and for redirect URI, pass the URL pointing to site_url() . "/wp-admin/admin-ajax.php?action=reddit_oauth_redirect"‘s value.

After you have created an app, you will have an App ID and App Secret.

Once they have created a Reddit app, they’ll need to copy their Reddit username, API key and Secret Key from the project dashboard and store them as WordPress options.

You need use the following option names to store the options values:

update_option("reddit_client_id", $client_id_variable);
update_option("reddit_client_secret", $client_secret_variable);
update_option("reddit_username", $app_name_variable);

This is all you need to do to have a Reddit login button integrated with your theme.

Now let’s create a Reddit Login widget which displays a Reddit login button.

Creating a Reddit Login Widget

In this section, I’ll list the code for creating a Reddit login widget. You can also put this code inside a plugin if you wish. You’ll just need to make sure that you include the Reddit OAuth WordPress library with your plugin.

<?php

require_once("inc/redditoauth.php");

class Reddit_Login_Widget extends WP_Widget 
{
    public function __construct() 
    {
        parent::__construct("Reddit_login_widget", "Reddit Login", array("description" => __("Display a Reddit Login Button")));
    }
         
    public function form( $instance ) 
    {
        // Check values
        if($instance) 
        {
            $title = esc_attr($instance['title']);
            $api_key = $instance['api_key'];
            $secret_key = $instance['secret_key'];
            $username = $instance['username'];
        } 
        else
        {
            $title = '';
            $api_key = '';
            $secret_key = '';
            $username = '';
        }
        ?>
 
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php echo "Title"; ?></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('api_key'); ?>"><?php echo "Client Id"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('api_key'); ?>" name="<?php echo $this->get_field_name('api_key'); ?>" value="<?php echo $api_key; ?>" />
        </p>
         
        <p>
            <label for="<?php echo $this->get_field_id('secret_key'); ?>"><?php echo "Client Secret"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('secret_key'); ?>" name="<?php echo $this->get_field_name('secret_key'); ?>" value="<?php echo $secret_key; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('username'); ?>"><?php echo "Reddit Username"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('username'); ?>" name="<?php echo $this->get_field_name('username'); ?>" value="<?php echo $username; ?>" />
        </p>
 
        <p>
            While creating a Reddit app use "<?php echo get_site_url() . '/wp-admin/admin-ajax.php?action=reddit_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['api_key'] = strip_tags($new_instance['api_key']);
        $instance['secret_key'] = strip_tags($new_instance['secret_key']);
        $instance['username'] = strip_tags($new_instance['username']);
        update_option("reddit_client_id", $new_instance['api_key']);
        update_option("reddit_client_secret", $new_instance['secret_key']);
        update_option("reddit_username", $new_instance['username']);
        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=reddit_oauth_redirect'; ?>"><input type="button" value="Login Using Reddit" /></a>
            <?php
        }
        echo $after_widget;
    }
}
register_widget("Reddit_Login_Widget");

Let’s look at how the above code works:

  1. We first included the Reddit OAuth library.
  2. Then we created a widget that displays a login button on the front-end and displays the keys input boxes on backend.
  3. When users submit the widget form on the backend, the values are saved as WordPress options.
  4. When someone clicks on the Reddit login button on the front-end of the widget, the users are redirected to the Redirect URL as mentioned above. The redirected URL handles the login task.

Accessing Access Token

To make Reddit REST API calls, you need to use an Access Token. You can retrieve the access token using the following code.

get_user_meta(get_current_user_id(), "reddit_access_token", true);

If you receive a Token Expiration error when making REST API calls, simply call this function.

reddit_refresh_access_token();

This function will then renew the access token.

Final Words

You’ve now learned how to create a Reddit login button. If you integrate it in your theme, then you can place this button anywhere, but if it’s in a plugin then you’ll need to put in a widget. If you have any questions, please feel free to leave a comment below and I’ll be sure to help you out.


This post was written by Narayan Prusty. We are very grateful that Narayan has written this post for us, however, the views expressed here belong to the author, and do not necessarily reflect the views and opinions of wpContent.
Share.

About Author

Narayan is a web astronaut. He is the founder of QNimate. He loves teaching. He loves to share ideas. When not coding he enjoys playing football. You will often find him at QScutter classes.

Leave A Reply