#29 Widget with Tabs on Sidebar

Amy Marsh Is A Fashion Technologist In Training

sidebar widget


It is the second to last day!!


Today I will be showing you how to add another widget to your sidebar, in this case it will be stream of post’s which a user can select to read or share. At the moment our feed is set up to show the 30daysofcoding category, however after the 30daysofcoding is complete we will have a category showing exactly what Chloé and I are getting up to in the fashion technology world, whether it be an event we are attending, or a day spent coding. By completing this we will have a stronger level of engagement with our readers.


I have chosen to use tabs as in the future I will have this widget doing multiple other things with other tabs, but really it is an extra you may wish to just shown the live feed by itself.


Let’s get started!



To start with open up your sidebar.php file and find this section of code:



Enter in this code just above the line of code you have just found:



I will now explain the code above, this section of code is the php, it decides how many posts will be displayed, which category is going to displayed and sets it so that if you are in a post that could be displayed it is not shown in the sidebar whilst you are in the post. The query then pulls out the posts and next section shortens the title of a post if it is over 35 characters long:



This section of code sets up what is displayed in the tab for each post:



You will have added thumbnail images on day 8 of 30daysofcoding using this code so your code should look like this (with the newly added ‘tab-thumb’ image as well:



You will need to add an extra thumbnail image called ‘tab-thumb’ for this tutorial:



Next add this section of code to the end of the main.js file just before the closing ‘});’ :



Open up your footer.php page and add this section of coding where you reference your other jQuery files:



You will also need to add these file’s to your site and in the folder js. In order to to this download this and search for the files ‘jquery.hashchange.min.js and jquery.easytabs.min.js and add them to your site.


Now you need to sign up to Addthis because they provide sharing tools which you can use to track engagement. Once you have signed up create a profile and you will be given a Profile ID:

Screen Shot

Add this to the bottom of the footer.php file just before the closing </body> make sure the ‘pubid’ in the code below equals your Profile ID:



Finally add the styling at the bottom of the style.css file:




Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!


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

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="">