How to Create Your Own Twitter Widget
112Even if there’s a lot of quality WordPress widgets available, sometimes none exactly fits what you need. In that case, you’ll have to create your very own widget. It may sound difficult at first, but it is not if you have a little programming experience.
In this tutorial, I’ll show you how to write a simple widget to allow your readers to share your posts on their Twitter accounts.
1 – Creating Files and the Directory
Let’s start by creating a directory on your hard drive. On this tutorial, I’ll call it Twit It. Under this directory, create a file named twitit.php.
Edit the twitit.php file and paste the following code, which is telling WordPress that this file is a widget, specify the plugin/widget name and version and also give the credits to the author:
1 2 3 4 5 6 7 8 9 | <?php /* Plugin Name: Twit It Plugin URI: http://www.wprecipes.com Description: A simple "Twit It" widget for WordPress Author: Jean-baptiste Jung Version: 1 Author URI: http://www.catswhocode.com */ |
2 – Creating the Functions
Now, we have to create the main function, which will be called when your widget has been added to a widget-ready zone.
This function will simply echo a link to Twitter with the post URL as a parameter.
Append the code below to the twitit.php file:
1 2 3 4 5 | function twitit() { global $wp_query; $thePostName = $wp_query->post->post_name; echo '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.$thePostName.' : '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>'; } |
Now, we have to deal with user defined parameters.
On the functions.php file from their theme, users can define some variables as such as $before_widget, $before_title, and so on. Theses variables are used to display a custom image, text or html tags within widgets. For example, the $before_title variable allow the users to specify something to appear before widget titles, to ensure a perfect theme integration.
This function will get all parameters from the functions.php file in order to make the widget perfectly integrated on the user’s theme.
1 2 3 4 5 6 7 8 | function widget_twitit($args) { extract($args); echo $before_widget; echo $before_title; echo $after_title; twitit(); echo $after_widget; } |
We’re almost done. We now have to create an initialization function, and hook the widget. This point is very important because it register the group of functions we just wrote as a widget.
1 2 3 4 5 6 | function twitit_init() { register_sidebar_widget(__('Twit It'), 'widget_twitit'); } add_action("plugins_loaded", "twitit_init"); ?> |
Save the file. You now have a fully functional “Send to Twitter” widget! You can install it on your blog like any other widget.
Styling the Widget
Now that you installed the widget, you saw how functional it is, but therefore, it is not very visually appealing. Happily, we added a #twitit css id on the container, which means that it will be easy to style it with CSS.
Simply paste the following styles to the style.css file from your theme. If you want, you can download and use the background image below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #twitit{ background:#fff url(images/twitit.jpg) no-repeat top left; height:120px; position:relative; width:320px; } #twitit a{ font-size:18px; font-weight:bold; position:absolute; top:30px; right:25px; } |
Complete Widget Code
Here’s the complete code I have used for the example widget:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?php /* Plugin Name: Twit It Plugin URI: http://www.wprecipes.com Description: A simple "Twit It" widget for WordPress Author: Jean-baptiste Jung Version: 1 Author URI: http://www.catswhocode.com */ function twitit() { global $wp_query; $thePostName = $wp_query->post->post_name; echo '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.$thePostName.' : '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>'; } function widget_twitit($args) { extract($args); echo $before_widget; echo $before_title; echo $after_title; twitit(); echo $after_widget; } function twitit_init() { register_sidebar_widget(__('Twit It'), 'widget_twitit'); } add_action("plugins_loaded", "twitit_init"); ?> |
That’s all for now! As you saw, creating a WordPress widget is definitely easy. The widget we created together is quite basic, but I’m sure it is a solid basis to get started with widget development.
About the author: Jean-Baptiste Jung is a 27 year old blogger from the French-speaking part of Belgium. Jean blogs about WordPress on WpRecipes and about Web Design and Development on CatsWhoCode.com. You can follow him on Twitter.
Enjoy this post? You should follow me on Twitter!
Isn’t that blue bird from Iconfactory’s Twitterrific program?
mmm yeah! thay shouldn’t be there (not mention about Twitterrific… and you erased the “Twitterrific” text) :S … http://twitter.com/Twitterrific
Nice :)
Isn’t there already a plugin like that?? Or was that you..
Great and very useful custom coded widget. Thanks for sharing.
it easy because you show it,, to start from scratch,,
emmm who knows..
A friend of mine suggested I learn this and create my own widget – I never seem to like what’s available and would always change things ;) Thing is, I consider myself almost illiterate when it comes to computers ;) I can use them, but creating something from scratch scares me!
Now I think this fear really was irrational as it seems like a fairly easy task. I know things will get harder as I go, but the start seems too good to pass it up :)
Thanks for effectively killing my fear of programming !
Good luck with it all! It must seem daunting at first, but really, even when you make mistakes (Everyone does!), you can only learn from them. No harm done, so no need to be afraid! :D
I tried writing my own plugin once, but I failed miserably at it. Maybe I’ll try this and mess around with it to more familize myself with the wordpress add_action thingies… *shrug*
the click to edit feature is timed? is this a plugin? that’s so cool!
Yep, it’s called AJAX Edit Comments. You can check it out here: http://wordpress.org/extend/plugins/wp-ajax-edit-comments/ :)
Hey, thanks for this post. It gives a basic idea about creating WP widgets.
Thanks for the lesson. I usually have to rely on others to create the code for me. This helps me figue out how to do it on my own.
Story added…
Your post was featured at Do Follow Community! Here is the link to vote it up and promote it: http://dofollow.net/Internet/…
If you wanted to learn a bit more about playing around with widgets would it be php you need to learn or is there more to it than that?
Great Job your instructions are very easy to follow
and precise again GREAT JOB
Frank Gorka
This is just perfect for my new blog! I have been meaning to find ways on how I can grab or create eye-candy twitter widgets like I find in most sites. So, this is exactly how it is done, thanks so much for sharing. The birdie btw, is really cute. :)
Really well-done how to post. I’ve been wondering how to do this and the answer was presented very simply right here. Thank you!
I will try it, it looks very good.
I’ve been meaning to jump onto twitter or the forums and ask if anyone knows of a plugin which performs this exact function. I’ll be implementing this at my blog asap. Thanks for another useful post.
nice tips :)
Just getting in to twitter, this is well cool,
lots of new stuff coming out of twitter one to watch.
Twitter rocks Thanks for sharing.
How about a code for non widget users ? Thanks :)
Really thanks for this code,.
I’d make this if it didn’t include the twitteriffic logo, which I don’t see an update to this post after several months of being notified of this pretty big boo-boo…
Cool. I would learn it and tell my twitter follows to put it on their blog (if they have) to follow me.
Ah, that’s a clever idea! Very good use for it. Let us know how it works out!
You can make it as a plugin to make life easy for those technophobia folks.
Hey I created a tool that lets you do stuff like this a bit easier. It’s at widgetifyr.com. I do this all the time take a widget that works almost like I need then strip out the guts and create a new widget. Now with my new wordpress widget builder it’s super easy. Let me know that you think.
Glenn
Man, wish i would have found this post a couple months back. I was not satisfied at all with the premade widgets, not to mention the unreliable nature of it being hosted on a different server than my own. Nice tutorial, great post!
.-= Josiah – Youtube Backgrounds´s last blog ..Call of Duty 4: Modern Warfare =-.
It is very useful
App Tool…
is this widget can be used on blogger?or may you have another widget like this, that provide for blogger user?
.-= ote tatsuya´s last blog ..Links for 2009-07-22 [Digg] =-.
Woww…nice tutorial, may be it can be implemented on other CMS…hemmm…let me try it…thanks :D
Ooh perfect, I have added my own twitter widget to my website :D.
nice share buddy its really easy I try this its working well here. Now I have my own twitter widget. Thanks for sharing…..
Every one using the twitter ,great help for all blogger thanks.
Thanks a lot for this tutorial.
wow, that was so helpful and it looks so easy now compared to when i was starting. thanks
freebies
Hey I created a tool that lets you do stuff like this a bit easier. It’s at widgetifyr.com. I do this all the time take a widget that works almost like I need then strip out the guts and create a new widget. Now with my new wordpress widget builder it’s super easy. Let me know that you think.
Hey I created a tool that lets you do stuff like this a bit easier. It’s at widgetifyr.com. I do this all the time take a widget that works almost like I need then strip out the guts any. Let me know that you think.
yrccojbmnmvz
Seems like a complicated thing to get right, but this is by far the best tutorial I have read on the topic to date. Keep the great articles following friend.:D
Hi there,
Nice information really helpful share i also try it and amazingly its start work I am very happy to create my own twitter widget thanks dude for sharing.
is twitter a big site that rolled on hype, celebrity power and media’s repetition. I hope Ashton Kutcher made some money for promoting twitter. Now everybody is tweeting. :)
just what i was looking for, thanks for sharing the codes.
women clothes
thank you for this!
I am currently working on a widget based on this post. Thanks!
Thanks this is great!!!
Really well done thanks for sharing :)
What else can I say, but thank you. Have yu tried submitting this to the wordpress plugin directory.
Hi there,
Nice information really helpful share i also try it and amazingly its start work I am very happy to create my own twitter widget thanks dude for sharing.
very useful….thanks!
Great tutorial. Thanks for sharing. I may now have the knowledge to give it a go!
Awsome tutorial, Im still a bit novice for this excersise but im going to work at it for the next couple days.
Thanks alot for the post!
How do I make a link, so when users click on the link, it will redirect them to twitter and ready to tweet a redefine tweet.
Check out the Twitter section in this post for the code you need: http://www.problogdesign.com/wordpress/social-bookmarking-link-codes-for-33-of-the-biggest/
Excellent instructions and very easy to follow. I’m new at this more techie stuff but I think I will give it a try. Thanks for sharing it with us.
it cushy because you exhibit it,, to move from scratch,,
Thanks for this instruction!
Really interesting article on how to create your own twitter widget. I’ll be sure to create my own for my site. Thanks
Really well-done how to post. I’ve been wondering how to do this and the answer was presented very simply right here. Thank you!
Thanks for teaching us how to make such a widget. 9+
This is very helpful in adding a follow me twitter on my website
I’m really excited to sit down and create this widget. Other ASP.NET ones simply don’t cut it. Thanks a lot for sharing.
nice article, thanks for sharing with us.
nice article, nice tips on how to make twitter look better.
Hey, nice information really helpful share i also try it and amazingly its start work I am very happy to create my own twitter widget thanks dude for sharing.
If you want to put twitter widget into your website in a much easier way (without coding, javascript knowledge) you might want to check out http://www.twitblend.com/widget
this service allows you to create dialogue or conversation from selected tweets then you can share and put it into your website/blog with their widget
very helpful tutorial! thank you so much
Beatufull site, a great information, keep it up.
I’m so happy I stumble upon this blog! A lot of helpful info I really needed to know these stuff, I had a hard time with those foreign characters.
Thank you so much!
nice information, this help me a lot
Ganhar Dinheiro Online
Thanks for this instruction!
Being new to blogging I found your site to be very helpful. When I first started blogging I did not have a good understanding of all the complexities. Thanks for the information.
Hello!
Really well-done how to post. I’ve been wondering how to do this and the answer was presented very simply right here. Thank you!
This was easy even for someone with my limited even for someone with my limited knowledge. Thanks for the step by step process.
reat looking theme and nice and simple!
I appreciate the work that your are doing!!
Whay i am cant do it ?
Great Job your instructions are very easy to follow
and precise again GREAT JOB
Great post.Nice widget.Thank you.
I love the Twitter Search Widget so I have spent some time trying to get it to work for me.
Great post… My WordPress blog looks cool with this twitter widget :)
very goood site. thankx.
Nice work, but still not that simple
is not it too long code ?
I dont know much about codes, unfortunately
i love this sit
I liked the comment was that I was really looking for
Wow I did not expect it to be so easy to create a widget.
Great read.
I just love it when I have a problem that I can not find the solution to and the a single article like this shows me how it is done.
I now have my own twitter widget. Awesome.
Interesting post, thanks dude.
Just made my first twitter widget and smiling from ear to ear. I’m surprised a few comments say that could’t get this to work – it was very simple and i don’t see how you could go wrong! :)
is this just for wordpress? i’m using dreamweaver.
it is useful,thanks for sharing
thanks for sharing!I can understand it .
What if your theme doesn’t have a function.php file in it?
thanks nice site.
Hey man!
I wanna just say thanks! This article helps me a lot. You dont belive how longer I was looking for something like that! Really thanks!
Here in my countrie is kind of new bussines Twitter Widget and I hope earn a little more with that!
Excellent! Your article has a ton readers. How did you get so many viewers to look at your site I’m jealous! I’m still studying all about posting articles on the web. I’m going to look around on your blog to get a better understanding how to get more visable. Thank you!
I like it! Este tópico é realmente interessante.
Great widget to use. thanks
need some advised on how to modify my logo
http://www.premier-number-plates.co.uk/help.php
i like some action
Good post. I will be dealing with some of these issues as well..
nice article, is so much better, very nice
Nice article,help- me
thanks
GOOD
thanks
very weel
What was very helpful! I was trying to put another twitter widget on my website but it never works as expected! thx a lot
Please use this code in your theme file function.php :-
<img src="/images/heading-arrow.png” />
RECENT REVIEWS
‘5’ );
$recent_posts = wp_get_recent_posts( $args );
echo ‘
‘;
foreach( $recent_posts as $recent ){ $author=get_the_author_meta(‘user_nicename’, $recent[‘post_author’]);
echo ‘
‘ . $recent[“post_title”].’
‘. esc_attr($author).’ ‘.esc_attr($recent[‘post_date’]).’
‘;
}
echo ‘
‘;
}
function update($new_instance, $old_instance) {
// processes widget options to be saved
}
function form($instance) {
// outputs the options form on admin
}
}
to add twitter functionality in mm_recent_post function
Please use this code in your theme file function.php :-
/*
add_action( ‘widgets_init’, ‘init_karam_recent_posts’ );
function init_karam_recent_posts() { return register_widget(‘mm_recent_posts’); }
class mm_recent_posts extends WP_Widget {
function mm_recent_posts() {
parent::WP_Widget( ‘widget_recent_cpt’, $name = ‘Recent Posts & Comments’ );
}
function widget($args, $instance) {
// outputs the content of the widget
?>
<img src="/images/heading-arrow.png” />
RECENT REVIEWS
‘5’ );
$recent_posts = wp_get_recent_posts( $args );
echo ‘
‘;
foreach( $recent_posts as $recent ){ $author=get_the_author_meta(‘user_nicename’, $recent[‘post_author’]);
echo ‘
‘ . $recent[“post_title”].’
‘. esc_attr($author).’ ‘.esc_attr($recent[‘post_date’]).’
‘;
}
echo ‘
‘;
}
function update($new_instance, $old_instance) {
// processes widget options to be saved
}
function form($instance) {
// outputs the options form on admin
}
} */
to add twitter functionality in mm_recent_post function