Thesis makes customizing your Twitter feed incredibly easy. Thanks to the Custom.css file, you can make a few simple tweaks to your Twitter widget and your Tweets can look freakin’ sweet.
Installing The Widget
From the Dashboard, go to Plugins→Add New. Search for “Twitter For WordPress.” The top result should be what you want. Click “Install” in the upper right hand corner of the widget. Then, click “Install Now” in the new window that opens. From the next screen, click “Activate Plugin.”
Now that the plugin is activated, go to Appearance→Widgets. In the Widgets area, drag “Twitter #1″ to the sidebar of your choosing. Also, notice at the bottom of the Widgets page that you can add more Twitter Widgets, if you are that crazy for sharing updates.
Now Comes The Tweaking
In my example, I put the following in my Custom.css:
.custom .twitter-item { margin-bottom: 0em; padding: .5em 0 .5em 0; border-bottom: 1px solid #000; }
.custom .twitter-item:hover { background: #ccc; }
.custom .twitter-item a { color: #ffff00; }
.custom .twitter-item a:hover { color: #ff00ff; }Don’t Forget To Pick Up Your Copy Of Thesis!
Also, help keep Thesis Tutor alive by donating!
{ 18 comments… read them below or add one }
Hey, Matt, how come on each of your posts, I can’t see the first image? I’m using IE. I just see the graphic block icon. Weird.
I was changing things while you were looking at it. Should be all better.
That was neat! Thanks for that. However, do you have any suggestions for the best twitter plugin out of so many out there?
@mohan
Just use the one I used in the video.
Hi Matt,
Great tutorials. What tools do you use for editing CSS and PHP.
@jcameron
@Jim
I use Dreamweaver. But, I will soon be editing all files through Thesis’ new file editor which is part of Thesis 1.6
Hey TT,
Just wanted to thank you for the great tutorials. Very helpful indeed. Oh, just so you know, I’ve linked to the Thesis Tutor and am recommending you as a dude w/ skills on my new site (link above). Click on “The Masters” tab and you’ll find you. If you would like me to add/change any of the things I’ve said about you (so as to introduce your specialty to those who might be in need), please feel free to shoot me an email and I’ll jump on it asap.
Thanks again bud…
Dude, I love your videos!!!
Hi,
Great video – who needs words?
All done and installed on NoMorePencils with a variation on the color scheme.
Next step – those little icons.
Excellent tutorial. Any easy way to add a twitter icon to the widget? This is surely the place for it…
Hi Matt! Thanx for all great tutorials.
I just copied and pasted the code above here – did everything the way you say – but look, the tweets are missing clickable links/urls. What have I done wrong?
My Tweets are at the bottom of the right sidebar. (At the moment.)
Sorry, found it now in widget’s setting options.
/Cheers
Hi Matt
Great site and great tutorials. I’m just starting out with Thesis and would like to get the Twitter feed working on my site. Your video is excellent, but I wondered what the next step(s) might be for only having this appear on one page, ie on my blog page?? Sorry, probably a dumb question.
Thanks
Gary
That has to be done through custom_functions.php. Sorry to get back so late!!!
Hi Matt,
thanks for this nice and clear tutorial. Do you know if something new has came out in the last months about Twitter in WordPress+Thesis?
thanks
Jaume
hmm. I’m not sure. But I know some good ideas are floating around. Let me know if you find something
Great tutorial! I implemented it on my testsite and want to use it later on.
There’s is one thing but I am afraid it has to to with the plugin itself: the title of the widget became a link which is not consistent with the rest of my widget titles. Can you force this in the stylesheet or do I have to tackle the plugin?
I am trying to get my sidebar to stay on the side. On the main page it is on the side but as soon as you click a link it drops to the bottom of the page. Can anyone help me?
Here is the website