WordPress : Creating a Twitter Widget

Here is an easy way to create a fairly customisable Twitter Widget for your WordPress blog. For the following, we need to add the code to the functions.php file within the root of your theme’s file.

1. The Widget

Firstly, you need to create the function for the actual widget. The function here uses a Twitter Widget to display the latest tweets from your account. You can change certain variables in here as you wish, such as the background colour and the text colour.

2. The Twitter Widget admin

Next, we create the admin for the widget; this is what appears once we drag the widget into a sidebar and WordPress gives us a list of options for it.
Here we are creating options for the Twitter username, width and height of the box. You could also add in the colours for the background and text if you wish, just add in extra ones like in the example below.

3. Registering the Widget

Now all that is left to do is to register the widget this is done with the following 2 lines of code.

4. Using the Widget

Now to use this widget and add it to one of your sidebar menus go to Appearance -> Widgets in your WordPress admin and it will be available to add to your sidebars with the title ‘Twitter Widget’. Once you drag it to your sidebar, it will give the options which you can manage. Simply add your Twitter username, the width it should be and the height the box should be. Now the widget should appear on the front end of your site in the sidebar you put it in.

5. Full code

Below is the full code for creating the Twitter Widget. Simply add it to your functions.php file in your theme folder.

Depending upon your styling and the CSS you use on your site, it should create a widget in your sidebar like this.

15 Comments

  1. Hi!

    I’ve been looking for this kind of tutorial and finally found it, but it’s not working for me. I keep getting an error, it says that on line 11 is missing an “,” or “;”. Can you help me? I have wordpress 3.0.4

    Alex

    • the color of the lines after that one looks different than normal, I guess because that double quote.

      I’m sure it’s something simple but I’m quite new to php. I saw in other example that all the lines are preceded by “echo “""

      Alex

          • Anywhere in there should be fine. Then it’ll appear on the widgets page as box you can add to the sidebar.

            So long as you remove the php tags if it’s already inside some obviously.

  2. Working version for copy paste :P, the problem was with the ” ‘ symbols :

    function twitter_widget()
    {
    $settings = get_option("widget_twitter");

    $twitter_id = $settings['twitter_id'];
    $twitter_width = $settings['twitter_width'];
    $twitter_height = $settings['twitter_height'];

    ?>
    <img src="/images/twitter.png" alt="">Twitter Feed

    <script src="/js/widget.js" type="text/javascript">

    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 3,
    interval: 6000,
    width: "",
    height: "",
    theme: {
    shell: {
    background: 'transparent',
    color: '#ccc'
    },
    tweets: {
    background: 'transparent',
    color: '#232323',
    links: '#f9a424'
    }
    },
    features: {
    scrollbar: false,
    loop: true,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
    }
    }).render().setUser("").start();

    <?php

    }

    function twitter_widget_admin() {

    $settings = get_option("widget_twitter");

    // update options
    if (isset($_POST['update_twitter'])) {

    $settings['twitter_id'] = strip_tags(stripslashes($_POST['twitter_id']));
    $settings['twitter_width'] = strip_tags(stripslashes($_POST['twitter_width']));
    $settings['twitter_height'] = strip_tags(stripslashes($_POST['twitter_height']));

    update_option("widget_twitter",$settings);
    }

    echo '
    Twitter Name:
    ';
    echo '
    Width:
    ';
    echo '
    Height:
    ';
    echo '';

    }

    register_sidebar_widget('Twitter Widget', 'twitter_widget');
    register_widget_control('Twitter Widget', 'twitter_widget_admin');

  3. Hello,

    I stumbled upon this page when looking up something else on WordPress and noticed some comments of people having difficulty implementing the code so thought I’d suggest some help, if the author doesn’t mind? (in which case please remove my post)

    I’ve actually written my own widget to help people with getting Twitter posts in to their blog with no programming involved but with the twist of making it flexible for customisation via CSS. The plugin is called ThinkTwit – please feel free to check it out and if you find it helpful or it needs new features let me know.

    Steve

Leave a Reply