Twitter is one of the most popular social networking and micro-blog that allows users to publish and read messages within 140 characters, which is also known as tweets. Created in March 2006 by Jack Dorsey, the service quickly sweeps the global, and gained more than 500 million users as of 2012, generating 340+ million tweets daily.
With the huge user base, Twitter has been an easy method to attract readers for companies and brands. Using this tool on your WordPress website can bring more visitors for it. It’s easy to embed the default Twitter widget. However, as Twitter API is constantly changing, it’s better to create your own Twitter widget and get it attached to your WordPress site seamlessly.
In below part, we create a custom Twitter widget for our WordPress site, which can be shown in the sidebar. Unlike the default Twitter widget, it can showcase the details on the articles at the top section. Everything is just like the following screenshot.
Step 1. Get the Twitter App
At first, we need to create a Twitter app. Log into your Twitter account, and click developer to go to Twitter Developer.
Go to My application tab, and click create your application. You can see the following create an application page where you need to fill the application details.
Fill out the needed information, agree the terms of services, and create your application. Now, you have done it. You are linked to the application page, and you need to remember the following data in the OAuth settings:
Step 2. Add App Details
To quickly add some details to the theme, we suggest you use the customizer class. Adding the following code into the theme’s function.php file.
Then, you also need a class file with the name you want. Add it to the directory of your theme, and copy and paste the code from this coding source site.
Besides, remember to include the following class in function.php to make the code can execute.
At present, everything is done. You can get the following interface, and complete the details.
Step 3. Integrate The App
We have got all of the App details in the front step, but we don’t contact with the API. So we need to finish it in this step. Actually, it is a bit of difficult, but fortunately, others have done a big effort on it. In this guide, we use Codebird to do this. Download the it and locate it to your theme folder with the following settings and you can invoke the $cb instance.
Step 4. Create Widget
Now, it’s time to create a widget. Personally, we recommend you put widgets into an independent file. Create a new file in it, copy and paste the code into this file from here.
We just create the function framework, but no content. So we will go function by function in the following.
- You can specify the title and name of the widget in the first function.
- The function of form represents the backend form, and you can put some functions in it and make them easy to handle.
- The update function allows you to add some special code to saving the process. It’s quite simple, the following the is the total code.
- The last widget function takes responsibility for the frontend widget display. It’s the most important part of the process. First, you should create the common template required for showcasing the widgets.
- $args represents all the information. We out put it in order to use this widget is harmony with other widgets.
Then, you need to fulfill the get_tweets() function. Before making it, we can analyze that the get_tweets function need to do the following things:
Get the tweets from your database. After getting the results, we need to save them to the database to ensure we don’t get to it one more time in the next grab.
To achieve the above purpose, we can start 3 functions as get_tweets() to get tweets from the database, retrieve_tweets() to pull some tweets, and save_tweets to save the tweets list from Twitter to database.
Note that all the coding stuff needed can be found from this page.
So far, the widget is completely created. Once you understand the fundamentals of how the widget is created, you can add much information in it and customize it as you want.