How to remove scroll bar and limit tweets on Jetpack Twitter Timeline

[note color=”#ffffd6″]

Update 19-Aug-2013

This works on Jetpack 2.3.5 too!

Update 21-Jun-2013

WordPress has released Jetpack 2.3. This version of Jetpack now has the option to remove the scroll bars from the Twitter Timeline widget built in. However it still lacks the option to limit the number of tweets displayed. To enable this feature the steps described below are still valid.

Update 22-May-2013

If the below steps are too hard or confusing for you, just download this file or this file for if you are using Jetpack 2.3.1 or higher, unzip it and replace your twitter-timeline.php inside wp-content/plugins/jetpack/modules/widgets with it. Just make sure you make a backup copy of the original file just in case.

[/note] Recently Twitter decided to retire their API v1 and this affected many widgets and plugins based on it including the WordPress Jetback Twitter Widget. To address this change Jetpack released a new widget called Twitter Timeline with their latest version of Jetpack 2.2.3.

However with this initial release the Timeline widget is lacking some important features such as limiting the number of tweets displayed. Also the the widget shows a nasty vertical scroll bar which cannot be removed using the available widget options. After researching for a bit I have found a solution which will fix both these issues.

First of all the Jetpack Twitter Timeline widget is based on Twitter’s Embedded Timelines. After looking at the documentation I found out that there is a customization attribute called data-tweet-limit which will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. So the fix was to add this attribute to the Jetpack widget.

Step by Step

Before you continue with this fix please note that it involves the editing of Jetpack core files and all these edits will be lost the next time you update Jetpack. Also it might be a good idea to backup the Jetpack files in case you mess up.

1. Go to wp-content/plugins/jetpack/modules/widgets using your online file manager or FTP client.
2. You will need to edit the twitter-timeline.php file in this directory. You can download this file to your computer and use a text editor like Notepad++ or your default system text editor to edit the file.
3. Find $data_attribs = array( and add 'tweet-limit' to this array. It should now look like this $data_attribs = array( 'widget-id', 'theme', 'link-color', 'border-color', 'chrome', 'tweet-limit' );
4. Search the file and look for public function update . Under this function add the following lines of code just below $instance['widget-id'] = is_numeric( $instance['widget-id'] ) ? $instance['widget-id'] : '';
   Enable storing the tweet limit

   $instance['tweet-limit'] = sanitize_text_field( $new_instance['tweet-limit'] ); $instance['tweet-limit'] = is_numeric( $instance['tweet-limit'] ) ? $instance['tweet-limit'] : '';

   1 2	$instance['tweet-limit'] = sanitize_text_field( $new_instance['tweet-limit'] ); $instance['tweet-limit'] = is_numeric( $instance['tweet-limit'] ) ? $instance['tweet-limit'] : '';

   What this bit of code does is that it will enable storing of the tweet-limit variable along with all the other widget options.
5. Next look for public function form . Under this function add  'tweet-limit' => '5',  to the $defaults = array . Now the array should look like this.
   
   Form Defaults Array

   public function form( $instance ) { $defaults = array( 'title' => esc_html__( 'Follow me on Twitter', 'jetpack' ), 'width' => '', 'height' => '400', 'widget-id' => '', 'link-color' => '#f96e5b', 'border-color' => '#e8e8e8', 'theme' => 'light', 'chrome' => array(), 'tweet-limit' => '5', );

   1 2 3 4 5 6 7 8 9 10 11 12

   public function form( $instance ) { $defaults = array( 'title'        => esc_html__( 'Follow me on Twitter', 'jetpack' ), 'width'        => '', 'height'       => '400', 'widget-id'    => '', 'link-color'   => '#f96e5b', 'border-color' => '#e8e8e8', 'theme'        => 'light', 'chrome'       => array(), 'tweet-limit' => '5', );

   This is adding the tweet-limit instance to the widget options form and setting its default value to 5.
6. Now we’ll be adding a text box to the widget options to enter the tweet-limit. To do this, still under the public function form  function add the following code just above the last <?php tag at the bottom of the file.
   
   Add tweet limit text box to widget options

   <p> <label for="<?php echo $this->get_field_id( 'tweet-limit' ); ?>"><?php _e( 'Tweet Limit (1-20):', 'jetpack' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'tweet-limit' ); ?>" name="<?php echo $this->get_field_name( 'tweet-limit' ); ?>" type="text" value="<?php echo esc_attr( $instance['tweet-limit'] ); ?>" /> </p>

   1 2 3 4

   <p> <label for="<?php echo $this->get_field_id( 'tweet-limit' ); ?>"><?php _e( 'Tweet Limit (1-20):', 'jetpack' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'tweet-limit' ); ?>" name="<?php echo $this->get_field_name( 'tweet-limit' ); ?>" type="text" value="<?php echo esc_attr( $instance['tweet-limit'] ); ?>" /> </p>

    
7. After making all these changes save the twitter-timeline.php file and upload it back onto your server, overwriting the original file.
8. Now you should be able to enter the tweet limit in the widget options and the Timeline widget should be displayed without the scroll bars.

If you are using a caching plugin such as WP Super Cache, you might need to clear your cache for these changes to take effect.

Limitations

Please note that the tweet limit can only be an integer between 1 and 20. So maximum tweets can be only 20 and minimum is 1. Also as I mentioned above all these edits will be overwritten once you update Jetpack to a new version. However Jetpack might have this feature added by default in there next update making these edits unnecessary in the future.

Let me know in the comments below if you are having trouble with this fix.