#30 Widget with Tabs on Sidebar- Part Two with Twitter

Amy Marsh Is A Fashion Technologist In Training



It is my final day for #30daysofcoding eek! Make sure to still check out this blog though as myself and Chloé will be giving you an insight to a fashion technologist life as well as give some coding tips along the way!


Today I will be showing you how to add an extra tab to your already added sidebar widget that includes a twitter stream. Gaining a following is important on any social media platform when having a blog. Therefore displaying your twitter clearly showing what you tweet about will help this.


Let’s get started!



First start by opening up your sidebar.php file, in your aside tag with an id “Live-feed” add an extra tab by entering in this code into the ul:


The ul list should now look like this:



Next sign in to twitter and go on this page:


Screen Shot


Create a widget to the setting you wish, press ‘Create widget’ and copy the code:

Screen Shot


Next back on the sidebar.php file add this section of code underneath the closing div of the tab -section code. Place a div around it with an id called ‘Tweets’ like so:



I finished by adding some simple styling to the div:



Leave a comment with any questions or to submit your progress and challenge complete!

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

5 thoughts on “#30 Widget with Tabs on Sidebar- Part Two with Twitter

  1. Where exactly is this? ‘Next back on the sidebar.php file add this section of code underneath the closing div of the tab -section code’

    • Hi Faye!
      The ‘tab-section’ div is a div I created in the first part of this tutorial which can be found here: http://thefashiontechnologist.com/30daysofcoding/29-live-sidebar/
      Are you using your own theme or the toolbox theme? The actual sidebar.php file can be found in the toolbox theme. If you are using another theme there should be another file (maybe with a slightly different name) that relates to the sidebar functions.
      Hope this helps?

        • Yeah I am looking into it, the twitter feed does appear when you select the tab and refresh the whole page so looking into the initialising of the feed itself.. but will reply back when I figure anything out. x

        • Hi Faye! I switched around the tabs because the twitter code initialises on page load and now it is working. Hope this helps you? x

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">