Show your latest Tweet on top of Content Column in Thesis Theme

by Ashwin

Thesis Theme makes life a lot simpler, if you are trying to customize your blog.  In this post, I will show you how to display your latest tweets at the top of your content column.  You can either choose to display this only on the Home page or on all pages.

Verified to Work with Thesis Theme 1.8! Enjoy!

What we will Create?

This is what we are trying to create in this tutorial – the latest twitter update on the top of your content column.  There is also a link to your Twitter profile home page.

thesistwittertop_1

How do we get this?

As with any other customization in Thesis Theme, this requires changes in the following files found under the //custom folder.

  • custom_functions.php
  • custom.css

Changes in custom.css

Copy the following code into your custom.css file towards the bottom.  I have suitably demarcated the code with a comment, so that you can easily identify it later.

/* Twitter widget Before content */
#twitter_div {
  background:transparent url(images/twitter_verysmall.gif) no-repeat scroll 0 10px;
  padding:10px 0 10px 48px; position:relative;
}
#twitter_div li {
  font-family:georgia,serif;
  font-size:1em;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:normal;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}
#twitter_div li span {
  display:block;
  font-size:1.1em;
  font-style:italic;
}
#twitter_div ul {
  margin:0 0 8px 12px;
}
#twitter_div li span a a:visited {
  color:#2A69A3; text-decoration:none;
}
#twitter_link {
  color:#2A69A3;
  text-decoration:none;
  font-size:1em;
  font-style:italic;
  float:right;
  margin-right:25px;
}
/* Twitter widget Before content */ 

I have used a very small Twitter icon that displays on the left corner.  You can download the icon from here (right click and ‘Save as’).

twitter_verysmall

Copy this file into your //custom/images folder.

Changes in custom_functions.php

Now copy the following code into your custom_functions.php file.  This code uses the ‘thesis_hook_before_content’ of Thesis.  So if you are already using this Hook in your Thesis Customization, just add only the HTML portion of this code towards the end (if you have any problems, feel free to contact me).

/* Latest Tweets above Content column */
function twitter_before_content() {
  if (is_home()) { ?>
  

In the above code, there are a couple of points where it is mentioned as **yourtwitter**. Replace them with your Twitter username.

Current Code as is, would display the Twitter updates only on your home page. If you want this to be displayed on all other pages and posts, just remove the following

  • if (is_home()) from the top
  • } from the bottom

Tip: For the sake of this tutorial, I have used the thesis_hook_before_content hook. But you can easily replace with other hooks like thesis_hook_before_post_box, thesis_hook_before_post, thesis_hook_after_post, thesis_hook_after_post_box, etc., depending on where you need the Twitter updates to appear. Love the power of Thesis!

Conclusion

And, that’s it. Now just reload your page and see your latest tweet right there at the top. Contact me @thotsunlimited or in case you face any issues with setting this up on your Thesis Blog. I would love to help!

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • http://twitter.com/tublogger/status/4023775667 Ashwin

    Show your latest Tweet on top of Content Column in Thesis Theme http://bit.ly/KxI4P #thesiswp

  • http://twitter.com/tublogger/status/4023794751 Ashwin

    @pearsonified @diythemes Show your latest Tweet on top of Content Column in Thesis Theme http://bit.ly/KxI4P

  • http://twitter.com/tublogger/status/4023809211 Ashwin

    Show your latest Tweet on top of Content Column in Thesis Theme http://bit.ly/2zaRvu

  • http://twitter.com/wordpress_top50/status/4023830099 WordPress wptop50.de

    By @-tublogger Show your latest Tweet on top of Content Column in Thesis Theme http://bit.ly/KxI4P #thesiswp #-WordPress

  • http://twitter.com/tublogger/status/4047035989 Ashwin

    Show your latest Tweet on top of Content Column in Thesis Theme http://bit.ly/HL6ng

  • http://www.MattFlies.com Matt Langford

    Nice tut! I especially like the highlighted tweet from some dude named @Matt425!

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Thanks Matt! Yeah @Matt425 is a cool friend of mine =)

  • http://thesispress.com/show-your-latest-tweet-on-top-of-content-column-in-thesis-theme Show your latest Tweet on top of Content Column in Thesis Theme — Thesis Press Visual Guides

    [...] Read the rest of the story… [...]

  • http://twitter.com/avinashdsouza Avinash d'Souza

    This doesn;t seem to be working for me Ashwin…the gif just refuses to show up. Also, the formatting isn't kicking in like on your blog….

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Avinash,

    A couple of questions – are you using the code as is or done some changes. If yes, can you send me the code that you use.

    Also a link to your Blog would be appreciated. Let me just take a look.

  • http://twitter.com/avinashdsouza Avinash d'Souza

    Very strange…but it works like a charm now. Probably because I deleted all the other code… :-)

    Need a bit of help in styling though…need the “Join me on Twitter” link on the same line as the number of days. Firebug testinf isn't letting me move the twitter link div up past a point.

    Also, is there anyway of giving the entire widget a background and a border?

    Still in sandbox mode so no link…

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    For showing the 'Join' link on the same line as the time (or days) – use the following:

    /custom/images/tipicon-medium.jpg” align=”left” style=”border:none;vertical-align:center;” width=”30″ height=”45″/>
    Have a Tip for all Bloggers and Social Media Users out there? /contact”>Contribute and be featured on the sidebar of this Blog (with a do-follow link to your Blog/Website of course!)









    and the CSS:

    #twitter_link_new {
    color:#2A69A3;
    text-decoration:none;
    font-size:1em;
    font-style:italic;
    float:right;
    margin-top:-15px;
    padding-right:20px;
    }

    Actually negative margin will do the trick…

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    You can apply background and the border styles to the CSS element:

    #twitter_div

    This will spruce up your Twitter box!

  • http://twitter.com/thoughtfarm/status/4865942381 Michael Totten

    Great #thesis tutorial for adding twitter: http://bit.ly/TkGoz

  • John

    I followed this code exactly and it works in Firefox 3, but breaks my homepage in IE8.

    Any ideas?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Hi John,

    Thanks for letting me know. I will check it later in the day on IE8 and let you know is something needs a change.

  • John

    thanks. fyi, I am running your tut on Thesis 1.6 which was just released today.

  • John

    Hi Ashwin… any luck?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Hi John,

    No complete solution yet – I had set it up on my sandbox site – https://thoughtsunlimited.net/apps/sandbox/

    Works good on FF, Safari and Chrome and older IE. Breaks only on IE8. Few observations:
    - Problem is caused by

    I am still looking to find a workaround… Will let you know once I have something

  • John

    Thanks for looking into it, glad it's not my imagination. Hope you figure it out soon, this is an awesome mod.

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Thanks John. I will surely let you know if I solve the problem :)

  • Alexandru

    Hy!

    How can i actually show this on another page other than home.Let's say about page?
    Replacing if (is_home()) with what?

    tks

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Hi Alexandru,

    To display on Single Posts (and not home page) – if (is_single())

    To display on all Pages (non Posts) – if(is_page())

    To display on specific Page – if(is_page('2'))

    Here '2' is the Page id. You can go to WP Dashboard->Pages and hover the mouse over the Page name. On the status bar you can see the Page id there.

    To use a combination – show in Single Posts and Page with id=2,

    if (is_single() || is_page('2'))

    This also would work.

    Let me know if you want to know more…

  • John

    any luck?

  • John

    fyi, if I remove from the custom functions and then reload, it does not break IE8, but it is not showing the tweet. So it has to be related to that java code, yes?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Yes even i found that the issue is with Javascript. Refer to the my earlier chain of comments:

    - Problem is caused by

    So this API is out of our hands!

  • juanbravo

    hey man, how to add some gray background here? thank you..

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    You should be able to do it – by tweaking the '#twitter_div' CSS element.

    right now the background element is:

    background:transparent url(images/twitter_verysmall.gif) no-repeat scroll 0 10px;

    here you should be able to replace 'transparent' with the 'hex color code' to get the background.

    Let me know if it works.

  • juanbravo

    that's working, but the link to subscribe is not had the background…
    i want the link to subscribe is also have the same background.. thank you before

  • http://twitter.com/yamasas/status/6179719362 yamasas

    [twitter] Show your latest Tweet on top of Content Column in Thesis Theme http://bit.ly/5vfS5N

  • shamrock

    Can I run this in a exec php widget on wordpress?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Yes in Theory you should be able to do it. Let me know if it did not work.

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Yes in Theory you should be able to do it. Let me know if it did not work.

  • manavecplan

    Hi Ashwin,

    Quick question here…what would be the css to move the day count (eg. 14 mins ago) to the same line as the status? Thnx…

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    The link you specific actually comes from Twitter API.

    The best I think is to tweak with this CSS.

    #twitter_div li span a { … }

    I don't have the exact code yet – but a float:right; and a top negative margin should help.
    Let me know if it works.

    Thanks.

  • manavecplan

    Nope…that didn't quite work out.

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Let me try it this weekend on my sandbox and let you know. Thanks.

  • manavecplan

    Thanx a ton Ashwin…much appreciated as always!

  • http://www.jobgrand.com Rodelio Lagahit

    after loading the codes in the custom_functions I got this error “Parse error: syntax error, unexpected '?' in /home7/diwanagc/public_html/jobgrand/wp-content/themes/thesis_17/custom/custom_functions.php on line 34″

    what did i miss? just copied the code and edit only ***yourtwitter*** nothing more nothing less…

  • http://www.powerwebbusiness.com/ Ashwin

    @Rodelio

    Can you try this code instead? The code in the post has some character escapes, which are removed here…

    /* Latest Tweets above Content column */
    function my_thesis_before_content() {
    if (is_home()) { ?>












    }
    }
    add_action('thesis_hook_before_content', 'my_thesis_before_content');
  • http://www.lagahit.com Rodelio Lagahit

    Thanks! worked like a charm.. but gotta catch the twitter bird coz it's missing.. :) once again, thank you!

  • http://themethesis.com/tutorials/47-customizations-for-the-thesis-theme/ 47 Customizations for the Thesis Theme

    [...] Show Your Latest Tweet on Top of Content Column in Thesis Theme Learn how to display your latest Tweet in a prominent spot on your blog. [...]

  • http://www.pentestit.com Max

    Hey Ashhwin,

    For some reason, all I see is the half Twitter bird and no tweet. Can you please let me know what the problem might be?

  • http://www.powerwebbusiness.com/ Ashwin

    Max,

    Whenever the Twitter API down or non-responsive – and there is no tweet to show – only half of the Twitter bird is shown…

    Can you check if this happens all the time?

  • http://www.k9stud.com Puppies for Sale

    As a new user of Twitter, this tutorial will help me a lot. I will surely follow your instructions.

  • rys

    you can also refer to this site on how to display your latest tweets using twitter API
    as easy as 1 2 3..

    http://www.ryscript.co.cc/web/how-to-display-la...

    thanks

  • http://twitter.com/thotsunlimited/status/23986757748 Ashwin

    Show your latest Tweet on top of Content Column in #thesiswp Theme – http://bit.ly/dnsaRF #wordpress

  • http://jorgeledesma.net Jorge Ledesma

    Just tried it again, simply copy and paste into custom.php and not working FYI, thanks looking forward to see it working

blog comments powered by Disqus

Previous post: 4 ways to use your Email for Social Networking

Next post: