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

by Ashwin

in Thesis Theme,Wordpress

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.

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 my_thesis_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 @tublogger or in case you face any issues with setting this up on your Thesis Blog. I would love to help!

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 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
  • Puppies for Sale
    As a new user of Twitter, this tutorial will help me a lot. I will surely follow your instructions.
  • 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?
  • 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?
  • 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...
  • 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');
  • Travel Junkie
    Thanks! worked like a charm.. but gotta catch the twitter bird coz it's missing.. :) once again, thank you!
  • 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...
  • Ashwin
    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. :-(
  • Ashwin
    Let me try it this weekend on my sandbox and let you know. Thanks.
  • manavecplan
    Thanx a ton Ashwin...much appreciated as always!
blog comments powered by Disqus

Previous post:

Next post: