Yes, some of you might have already figured out what kind of service we’re writing about here. ManageWP is a service that allows you to manage all your WordPress websites from one single dashboard. What does it mean?

Lets quickly run over the main features:

• Firstly, that means that you no longer have to remember all logins and passwords for your sites or keep them in long spreadsheets. With ManageWP dashboard you can access all your websites with one click.
• Performing an upgrade of WordPress, plugins and themes across all of your sites is easy as clicking one ‘Upgrade all’ button. You can also install plugins and themes to multiple sites at once, from a variety of sources (your favorites list, WordPress.org, your computer or any URL).
• You can backup all your sites from ManageWP dashboard at any time or restore a previous backup. ManageWP can backup both your entire website or just the database. You can also set automatic scheduled backups.
• ManageWP allows you to set up a new, fully loaded, WordPress site in minutes. Or use ManageWP’s clone tool to clone any of your existing sites from one domain, subdomain or folder to another.
• With all sites under one roof, doing bulk operations becomes easy. Whether you want to post an article to multiple sites, manage your blogroll links or add users, ManageWP allows you to do it effortlessly across any number of sites at once.

How does it work? Do you have to provide them with all your passwords? The answer is no. Access to your site is governed by the ManageWP Worker plugin that you install directly onto your blog. That means that the only password ManageWP stores is the one needed for their central dashboard. So lets get started and take a deeper look into this service.

Features

Dashboard

Once you’ve installed the plugin and linked your website with ManageWP you can access all the features it offers. The dashboard is clean and easy to use. Plus it looks just like your casual WordPress dashboard so you don’t have to worry about adapting to a new and unfamiliar platform.

In the main view you can see which plugins or themes have an update available, below there are post revisions aka post autosaves and spam comments. You can also view the recent comments and posts. In the top right there is a pageview statistics graph and scheduled backups below it.

Manage Plugins & Themes

ManageWP dashboard allows you to instantly and simultaneously install themes or plugins for all of your websites. You can also opt to Activate plugins after upload. Looking through all the plugins is also made easy. In my opinion, the only drawback is the plugin horizontal layout so you have to scroll the window quite far if you’ve got a lot of plugins installed.

Backup

With ManageWP, you can set up scheduled backups to Amazon S3, Dropbox, your own server, any external FTP or an email address for all of your blogs with just a few clicks. You can choose between daily, weekly or monthly backups. Note – this feature is only available for the professional and business pricing plan.

Migrating/cloning sites.

This feature comes in handy if you need to setup a new network of identically modified websites. The theme and all plugins are installed automatically so you don’t have to spend time setting up every blog manually.

Bulk Actions

ManageWP allows you to bulk add/export websites, create new pages, posts and links for all of your websites.

It’s pretty clear with the pages and posts – although I don’t see a good reason why one would like to publish the same post on several blogs, the function does it’s job. Again you’re given the default WordPress text editor so there’s nothing unfamiliar to master.

The Bulk add users feature is bloody useful if you’re willing to add a writer for a set of blogs. You can find this feature under the Users section.

Note – all the bulk features are only available for professional and business pricing plan.

Self-hosted version

ManageWP also offers self-hosted version which allows you to run the service on your own dashboard. Self hosted allows you to have an unlimited number of blogs, host everything on your server and add your own features. It’s created for companies and organizations managing hundreds or even thousands of websites and is currently available only as Enterprise license.

Pricing

ManageWP will be offering three pricing plans where the price then depends on the number of websites you’ll manage (you can choose from a range between 10 and 500). The pre-order is launching on December 6th. All users that sign up now will receive a 30% life-time discount on any hosted service plan that they pre-order for as long as they maintain their service.

• 30 day free trial so you can test the service before paying for it.
• Free plan which allows you to use the Standard features for up to three (five, if you refer some friends) websites.
• Annual plans, and you will get two months free when you sign up for these.

Below you can see the pricing plans for 10, 100 and 500 websites.

10 websites

• Standard: $7/month
• Professional: $21/month
• Business: $42/month

100 websites

• Standard: $40/month
• Professional: $120/month
• Business: $240/month

500 websites

• Standard: $70/month
• Professional: $210/month
• Business: $420/month

Interview

Since this series focuses on the startups we wanted to ask a couple of questions to the founder of ManageWP Vladimir Prelovac.Vladimir Prelovac is the the CEO of Prelovac Media, an internet company located in Belgrade, Serbia. Besides ManageWP he’s also written a book on WordPress plugin development and created other stunning services and plugins.

1. There aren’t many alternatives who can compete with ManageWP. How did you come up with the idea of ManageWP?

As with most good ideas, it was a stroke of luck and a hint of opportunity. A friend of mine was rambling about how he had trouble managing his blogs, and I suddenly realized there is nothing like that available for WordPress, which is, after all, the world’s biggest internet publishing platform. The world needed something like ManageWP, so I decided it was time to make it.

2. As far as I understand ManageWP began in 2010. Why did it take so long to finish beta testing and establish a fully functional service?

ManageWP is an extremely complex piece of software. What makes it unique is that we really tried to make it run smoothly on literally thousands of different server configurations that WordPress would run on. That was our biggest challenge. Scalability was also an important focus for us — some of our users are managing thousands of blogs. But knowing that ManageWP can load data from 1800 websites in less than two minutes… it makes it all worth it.

There is also a list of spectacular features that we are pushing to integrate into ManageWP. Some startups, for example, are satisfied with only offering backup solutions for WordPress. But that functionality is only a tiny piece of the overall picture. Backup features are critical — and something we pride ourselves in offering — but it is only one piece of the 23 major features currently offered by ManageWP, with many more on the way. And with all the great ideas coming in from our beta users, we know that the value we can provide will continue to grow.

Another thing is that we had to ensure that ManageWP would work with services that WordPress users already deeply value. That’s why ManageWP now integrates with Google Analytics and AdSense. And that’s why we already have plans in place to integrate with SEO and uptime monitoring tools in the near future.

And then there is the fact that WordPress is constantly evolving. Adjusting to all the changes is a challenge unless you are willing to work hard to adjust to those changes. Thankfully, our team put in the effort to adapt. So that’s why it all took almost a year and a half to arrive at this point. (And the ride is not over yet!)

Ultimately, our goal is to create a dashboard so useful, so powerful that people will no longer need to log into their WordPress websites or other services. They will be able to log into ManageWP, and everything that the user needs to effectively manage their WordPress sites will be all right there at the user’s fingertips.

Above you can see a screenshot from Wayback Machine with the ManageWP website in 2010.

3. You’ve established a flexible and nice scheme where instead of following a strict milestone schedule the users themselves suggest the ideas you then consider. How did you come up with this method and has it brought the desired results?

Yes! I believe this is one of our strengths at ManageWP. Many of our features were suggested by our users, and that makes it a much more personalized experience for them and for us. After all, nobody could ever have a perfect vision of a product (except maybe Steve Jobs), so it was very important that we listened to our users early on in the development process. We already have around six or seven different ways for users to send us feedback, and I read all of it. The best ideas are sent off to the team for development.

Above you can see a screenshot from ManageWP Google group where users can suggest ideas which then are sent for consideration.

4. Since our series is about successful and fresh startups could you comment on ManageWP from this perspective? How has it grown as a project?

There are different ways to measure the success of a startup. At ManageWP, and from the feedback we have received, it would seem that we created a truly useful service that solves a problem that many people share. Some of our users were excited to learn when we intended to charge for ManageWP, but for the past 12 months, all we wanted to do was focus on creating a genuinely useful product.

And I think that is the most important thing — in order to keep the team passionate and the users interested, you need to have a great product.

5. Your blog says that the number of websites managed by ManageWP has hit 50 000. How do you feel about these results and what are predictions for the future?

Well, looking at numbers like these is always exciting. We hit 50,000 websites near the end of September, but we now manage over 80,000 WordPress blogs. So, when you put it into that perspective, you get really excited as you can see that your product is making a small but measurable change in how the internet works.

Somebody once said that the best way to predict the future is to invent it.

By having a clear vision of where we want to go and by keeping our customers happy, inventing the future is exactly what we are doing. It also helps when we are working with a strong and thriving publishing platform in WordPress. So, all things considered, I am very positive about our future.

Above you can see a screenshot with the exciting announcement.

6. Could you share some of your tips/business principles for others out there willing to make a successful startup?

There are couple of principles that I believe will make any startup’s journey easier:

First is that you need to have a cool product, one that you strongly believe in and you will want to use on your own. This also makes it so much easier to justify putting most, if not all, of your own time, money, and heart into it. You have to realize that there will be many hurdles along the way, as with all things in life, so you better have an idea of what you are doing and why you are doing it.

Second is to launch the beta as soon as possible. This allows you to start listening to your users and getting feedback. They will give great ideas on how to improve your product… for free!

Third is to not create a startup that relies on external funding to succeed. We are completely bootstrapped, which most likely forced us to create a significantly better product than we might have if we were basking in investment money. It motivates you to perform.

Fourth is the speed — making efforts to optimize your application and interface like crazy. Users have never been as impatient as they are today. Also, intuitiveness: the less the users needs to think, the better. You really need to watch other people use your product. You will be surprised by what you will discover.

Do the above things, and people will be drawn to your efforts and will help you to succeed.

7. Additional information

We are launching the pre-order on December the 6th. All users that sign up now will receive a 30% life-time discount on any hosted service plan that they pre-order for as long as they maintain their service, so come check us out! Finally, ManageWP is set to launch in early January.

Conclusion

ManageWP indeed is an amazing and one of the most useful services for WordPress. It’s also a great example of a fresh startup success story. You should definitely check out the free trial if you are running multiple WordPress websites. We’d be glad to hear your feedback and personal experiences. Stay tuned and wait for the next hot startup story.

Little explanation, what we’re doing here

This is something new we are trying out here at 1WD. We are searching for new startups, services we really enjoy and want to share with our readership! The idea is to give better visibility to some outstanding startups and give you a good understanding of what they do and why we think they deserve your attention. Also – we don’t earn anything from these reviews, we just find what we love and review it honestly in detail. When we can, we will always interview the people behind the startup, so you can learn from them, and they can share their passion and story.

I think this new idea and a little shift in focus here at 1WD will be really beneficial for You and feel free to critique what you didn’t enjoy in this article, what you want us to review next and tell us what we did right and if you want more articles like this!

We are very open and if you know about a cool service we could review – just write us in our contact form!

Dainis Graveris

This is huge and shows how important and widely used WordPress is. WordPress doesn’t show signs of slowing down either, so expect these numbers to increase dramatically in the near future. Therefore we also need to learn how to protect ourselves, because there is no popular web technology nowadays not targeted by hackers and robots.

Today I will talk about tips, tricks and plugins to keep your WordPress blog safe from hackers and robots. This doesn’t mean you have to do all of them, but using as many of them as possible is recommended.

1. Always Update

Keeping your WordPress updated all the time is important, because the developers work to solve security issues as well and if they release an update, it is a good idea to update. It takes only a few seconds, is safe (because WordPress backs up your data before actually updating, so you can’t lose anything) and will help your blog run better and be compatible with more plugins too. When you update, do it through your dashboard or if you want to do it manually, do not download the update from another site than WordPress.org.

2. Strengthen your password

Now this shouldn’t be something new to you. If you’ve been on the internet for some time you know strong passwords are recommended. Include small and capital letters, numbers and different symbols to make your password not difficult, but impossible to guess. Once somebody has full access to your blog, it’s not yours anymore!

3. Keep an eye on file permission

It is a good idea to keep an eye on the file permissions. You have a link at the end of the article with a guide about what file permissions are and how should they be used. You can set file permission with FTP clients and FileZilla works just fine, so I recommend it.

4. Use .htaccess

The .htaccess file is available by default in your hosting folder. You can use this file to block different IPs and you can learn how to do this by following the links at the bottom of the article.

5. Use SSL Encryption

SSL Encryption is used for encrypting data your blog sends. This means that nobody accessing your router can intercept the data you use, such as account credentials. This way your data is not only really difficult to intercept, but also to decrypt. The bad in general is that you have to pay for having an SSL encryption, but most of the services out there do a tremendous job and also help you set up the SSL server. However, for WordPress SSL encryption is free and you only have to add this particular line to your wp-config.php:

define (‘FORCE_SSL_ADMIN’, true);

6. Always Back-up

Backing up once a week is something I would like to recommend as well, because no matter how much you protect the blog, anything can happen. There are things you can’t even do anything about (like the host servers getting hijacked – which doesn’t really happen too often, but it is a possibility) and it is good to have a back-up which you can install again right away.

7. Protect the wp-config.php

This is one of the most important files in your WordPress folder, therefore you really have to protect it. You can hide it from public view by inserting few lines of code into your htaccess file:

<Files wp-config.php>

order allow, deny

deny from all

</Files>

This prevents the wp-config.php file from being seen by public users and makes it therefore more difficult to spot for hackers and robots.

8. Never use “admin” as login

A common mistake is to use “admin” as the login username. When you install WordPress, right after the process is done create a new account and use that one as default. The “admin” account is quite dangerous to use because all the robots go for it.

9. Use an SFTP

Most of the time people upload files by using FTP, but you could use a Secure FTP (SFTP) so that the files you send are encrypted. You can find a detailed guide about how to do this here.

Now we move onto plugins you can use to secure your WordPress.

1. Login Lockdown

You can use a plugin called Login Lockdown, but make sure you remember your password. Login Lockdown registers every failed login attempt and the IP of the person, and blocks the ability to login for a range of IPs if the number of failed logins exceeds the number you set. As a default setting, the plugin locks down IPs for an hour after 3 failed logins within 5 minutes. The IP addresses which have been blocked can be removed from the plugin panel in the WordPress dashboard.

Login Lockdown protects your WordPress login page from people trying to guess your password.

2. WP-DB-Backup

I told you earlier you should have backups for your database all the time. This is the plugin that I use for this purpose. It sends you backups on your e-mail or can also store them on the server. You can also set how often you wish the plugin to back up your data.

3. WP Security Scan

Removing the version of WordPress you have should be a basic option, but WordPress makes it difficult. Therefore you need to use a plugin to remove the version of WordPress from the header of your PHP page. Why? Because knowing which version you have means hackers know the security issues you have, therefore this makes it easier for them to hack you.

With all these plugins and tips being listed, I only wish to tell you that WordPress, although very popular and widely used, is threatened all the time by hackers and robots. WordPress security is something that has been discussed long and you should take a look into it, because finding out your blog is hacked and having no backup is definitely not fun. Try to avoid this by backing up regularly and following my tips and you will find yourself less often in troubles.

Further reading

You can read more about this topic on the following links:

Changing File Permissions on WordPress.org

Hardening WordPress on WordPress.org

Block IPs with .htaccess on htaccesstools

WordPress Security Tips and Hacks on Noupe

WordPress Security

11 Best Ways to Improve WordPress Security on ProBlogDesign

So instead of spending a few bucks in order to get a premium membership system, why not create your own? And you can also learn a little bit about WordPress. Big deal, isn’t it? And you will be amazed at how easy is to build such great feature.

This is our first post from 3 and we’ll be talking about user roles, register, show / hide content based on user’s role.

So, Let’s Rock!

How will be our plugin

Our goal here is to get a plugin that allows us to publish premium content (with teasers for non-premium users) and normal content so we will get traffic anyway.

Basic functions:

• Create a new user role – similar to subscriber but able to read premium content
• Create users and add them to this role – sometimes WordPress default register form isn’t enough
• Sidebar login / register – cool feature that may boost your conversion
• Show / hide content based on user role – so premium will see almost everything :)
• PayPal integration – Part 2
• Create and control external db (Payment control)- Part 2
• Manage cron jobs and wp-cron – Part 2
• Different menus for logged in users – Part 2
• Wp-Admin theming – Part 3

Create a new user role

First of all we need to know who is premium member and who isn’t. WordPress doesn’t have a “premium subscriber” role, but is pretty easy to create it.

If you’re not familiarized with basic plugin structure and planning, you should check out this basic tutorial that I’ve done a couple of months ago.

As you can see we have our basic plugin declaration and a simple snippet that create our brand new user role. To make sure this code is working just activate it (duh!) and go to Wp-admin -> users -> Add New and you should see this in your role select:

Did you notice that we’ve set our premium subscriber with ‘read’ and ‘read_premium’ capabilities? Yeah, we will use this read_premium capability to know if user can / cannot see some content. That’s good, but since we’ve just created this capability (right now!) any other user role (including admin) funnily won’t be able to get access to this premium content.

Now we will give them capability to do so:

This is really simple also, you just need be aware that once you give some capability for users (like this ‘read_premium’) they will have it, unless you remove. So if by mistake you add this capability to subscriber just removing the code won’t remove user capability. But this code will:

Ok, let me tell you a secret now, what we’ve done is actually really bad code. WordPress will run it every time it loads, but this snippet just have to run once (once created role and capability they remain intact until you delete them). So after debugging, let’s wrap all this code inside a register_activation_hook:

Create users and add them to this role

Ok, you have your role, but how to create users and add them to this role? Well, we will be talking about payment process later but you can prepare yourself to promote them to premium. Let’s create a function that promote our users (when you have payment, you run it):

But before promoting your users you have to create them, right? So we will prepare our system for doing that outside WordPress default register page, all you have to do is to call this function from anywhere (like from sidebar register, as we will see above):

Sidebar login /register

Let’s boost your conversion rate by creating a simple login / register sidebar form. This time we will need to make some changes in your theme, hope it’s ok with you.

We will need to make some changes in sidebar. Change it as you want, but basic code will be something like this:

So by the end of this point you will have:

• If logged in, logout option and admin link if you’re admin
• If not logged in, login and register form
• Any error will show also

Ok, now we need to put functionality on it. We need to add this to our header.php (before DOCTYPE):

Then you will be able to register, login, and logout :)

Show / hide content based on user role

Now it’s what you were waiting for: how to show and hide stuff based on user role.

We will need a little setup at this point, go to wp-admin -> settings -> reading -> For each article in a feed, show = Summary. Do that so your feed will show only excerpts.

Then at this point we have 2 options, the lazy and the right way. The lazy one is just to add this code to your plugin:

Since this is the lazy option, as always in our lives, it will give more work :D Yeah you will need more setup and trust a lot in your theme developer to do that. But we have a better option, dear fried.

You can go trough your theme and search for crucial files like single.php, category.php, search.php, and why not home.php. Then when you think users can’t see premium content just put this:

This gives you more control, since you may want to give some free content categories ( just add them in your if).

So, what do you think?

As you can see, this is just our start point, dear Padawan. We will dive a little bit more on that later, but hope you’ve had enough fun for now :)

Today we will talk a little more about metaboxes and jQuery, shortcodes, and front-end functionality.

All these things with a pretty practical example of how to make a plugin that will relate posts as a series.

So, let’s rock!

A little recap… and download!

Last time we completed the first three steps:

1. Planning – We’ve made our entity-relationship diagram to know which data we would have to store
2. Create our plugin and custom post type – We’ve created the basic file for our plugin, and registered our series custom post type
3. Post functionality – We’ve made some metaboxes to store custom data, and added them to WordPress’s default post saving function via actions.

If you didn’t read the first part of this tutorial, I highly recommend you to do this now, but if you don’t want to, you can still understand the functions and logic we are using here and make use of it.

Well, for people who are in a hurry, you can download the fully working plugin and make use of it without having to copy/paste all this code ;).

Step 4 – Series functionality

Registering our metabox

After we have control over all our posts related to series, we need to be able to manually edit the series itself.

In order to do this, we will need some metaboxes on them also. So, let’s edit our plugin with this code (here is just the additional code to avoid any confusion with the code that I explained last time, and won’t explain now):

<?php<br /-->//this function will register our metabox for wd_series custom post type
	function wd_call_meta() {
		add_meta_box(
			'series-data', // id of the <div> we'll add
			'Series Custom Data', //title
			'wd_series_options', // callback function that will echo the box content
			'wd_series', // where to add the box: on "post", "page", or "link" page
			'side', //positioning
			'low' //positioning
		);
	}
//with this we call it!
add_action('admin_menu', 'wd_call_meta');
?>

Our HTML metabox and jQuery enhancements

So, as you can see this function doesn’t have the metabox itself, it just says “Hey, WordPress, you should add function wd_series_options as a metabox for this guy!”. So we now need the metabox itself.

This is a tricky part since this box will give the user the ability to add “fake” posts to the series, so our readers could be interested in this series content. So what do we have now is:

• Standard posts for a series, added via post editing screen
• Fake posts for a series, added via series editing screen
• Delete option, to remove a post from a series

We have also the opening / closing option for a series, and a really important attribute, the size of the series, so we don’t get lost in all our counters.

To get this working we will need some jQuery. We will have a “model” row, and when the user wants to add more lines we will get this model and duplicate it inside our form. We have to pay attention in regards to recovering data. We have to dynamically add rows as they are needed by one series. And we have, of course, some CSS for that.

Let’s do it this way:

<?php

function wd_series_options() {
		global $post;
		//get saved data
		$custom    = get_post_custom($post->ID);
		$open      = $custom["open"][0];
		$numFields = $custom["size"][0];

		$openNo = $openYes = "";
		if ($open == "yes") {
			$openYes = "checked = 'checked'";
		} else {
			$openNo = "checked = 'checked'";
		}

		$series_items = array();
		$i = 0;
		while($i < $numFields) {
			$i++;
			$key = "name_".$i;
			$series_items[$i] = $custom[$key][0];
		}
		$numFields++;
?>

<table>
<tbody>
<tr class="space">
<td><label>Open?</label></td>
<td>
				<label><input id="wd_open" name="wd_open" type="radio" value="yes" /> /> Yes, it is open.</label>

				<label><input id="wd_open" name="wd_open" type="radio" value="no" /> /> No, it is closed</label></td>
</tr>
</tbody>
</table>
	<table class="default-line">
		<tr>
			<td><input id="order_K" name="order_K" type="text" value="" size="5" /></td>
			<td><input id="name_K" name="name_K" type="text" value="" /></td>
			<td class="check"><input id="remove_K" name="remove_K" type="checkbox" value="remove" /></td>
		</tr>
	</table>
	<input type="hidden" id="NumFields" name="NumFields" value="<?php echo $numFields; ?>" />
	<table>
		<tr>
			<td>Order</td>
			<td>PostName</td>
			<td class="checkboxTd">Remove?</td>
		</tr>
	</table>
	<div class="ins">
	<?php
		foreach($series_items as $key => $name) {
			echo "<table>";
				echo "<tr>";
					echo "<td><input id='order_$key' name='order_$key' type='text' value='$key' size='5' /></td>";
					echo "<td><input id='name_$key' name='name_$key' type='text' value='$name' /></td>";
					echo "<td class='check'><input id='remove_$key' name='remove_$key' type='checkbox' value='remove' /></td>";
				echo "</tr>";
			echo "</table>";
		}
	?>
	</div>
	<table>
		<tr id="addItem">
<td colspan="3"><a id="clickLink" class="link" onclick="addLine();">Add new line</a></td>
</tr>
</tbody>
</table>
<style type="text/css">
	.default-line {
		display: none;
	}
	#series-data table {
		width: 100%
	}
		#series-data tr.space td {
			padding-bottom: 10px;
		}
			#series-data .space label {
				padding-right: 20px
			}
		#series-data .check {
			text-align: center;
		}
		#addItem td {
			padding-top: 10px;
			text-align: right;
		}
	.checkboxTd {
		width: 20px;
	}
	.link { cursor: pointer; }
</style>
<script type="text/javascript">
	function addLine() {
		jQuery(".default-line").clone().appendTo(".ins");
		var numElem = jQuery("#NumFields").attr('value');
		jQuery(".ins .default-line").fadeIn().removeClass('default-line');
		correctsLine(numElem);
	}
	function correctsLine(nID) {
		//goes switching K to correct number of line
		fieldName  = "order_" + nID;
		jQuery(".ins input#order_K").attr('value', ( parseInt(nID)+1) ).attr('id', fieldName).attr('name', fieldName);

		fieldName  = "name_" + nID;
		jQuery(".ins input#name_K").attr('id', fieldName).attr('name', fieldName);

		fieldName  = "remove_" + nID;
		jQuery(".ins input#remove_K").attr('id', fieldName).attr('name', fieldName);

		//corrects number of fields
		nID++;
		jQuery("#NumFields").attr('value', nID);
	}
	jQuery(window).load(function(){
		addLine(); //adds first (blank) row
	});
</script>

With this code you should see something like this as your series metabox:

Edit our default post saving function

And when you click on “Add new line”, believe me, it should create a fresh and brilliant new line.

Now we have this pretty box, but when you click “Update” nothing happens. This is why we haven’t prepared our WordPress insert post function to treat this data. What we have to do now it to say to WordPress “Hey, when you see this field in wd_series post type, delete all old data and save this new one for me, ok?”.

One important thing to note here is that we must delete all previous data and use some logic to reorder the series when needed.

Our magic here relies on ksort php function, so we save a temporary array and save all the items in the correct order after run this function.

Well, let’s do it:

<?php //we need a function that recieves post_id and $_POST data
function wd_meta($post_id, $post = null) {
//gets our POST custom data and saves it as meta keys, when needed
/* we have to save this metafields: open = Yes / No for open / closed series
size = how many items do we have in this series, so we can adjust our order counter
name_ORDER = the name of the ORDER'th item
post_ORDER = ID of the ORDER'th item
order_POST = Order of the ID (post) */
if( $post->post_type == "wd_series"  ) {
			//update series state (open / closed)
			$open = @$_POST["wd_open"];
			update_post_meta( $post_id, "open", $open );

			$size = @$_POST["NumFields"];
			$i = 0;

			$organize = array();
			while ($i < $size) {
				//let's pre-organize all posts
				$survive = $key = $remove = $order = $name = $post = null;

				$key = "remove_".$i;
				$remove = @$_POST[$key];

				if (empty($remove)) {
					//we won't delete this guy, and we'll put he in his right order
					$key = "order_".$i;
					$order = @$_POST[$key];

					$key = "name_".$i;
					$name = @$_POST[$key];

					$key = "post_".$i;
					$post = get_post_meta($post_id, $key, true);

					if (!empty($name)) {
						$organize[$order] = array( 'name' => $name, 'post' => $post);
						$survive = true;
					}
				}
				//we will pre delete everybody, to prevent trash in here
				$key = "name_".$i;
				delete_post_meta($post_id, $key);

				$key = "post_".$i;
				$post = get_post_meta($post_id, $key, true);
				delete_post_meta($post_id, $key);

				$key = "order_".$post;
				delete_post_meta($post_id, $key);

				//if it won't survive, we delete series_id from post_id
				if(!$survive) {
					$key = "series_id";
					delete_post_meta($post, $key);
				}
				$i++;
			}
			//let's correctly order this
			ksort($organize);
			$i = 0;
			foreach($organize as $item) {
				$i++;

				$key = "name";
				$nam = $item[$key];
				$key = "name_".$i;
				update_post_meta( $post_id, $key, $nam );

				$key  = "post";
				$post = $item[$key];
				if(!empty($post)) {
					$key = "post_".$i;
					update_post_meta( $post_id, $key, $post );
					$key = "order_".$post;
					update_post_meta( $post_id, $key, $i );
				}
			}

			$size = count($organize);
			update_post_meta( $post_id, "size", $size );
		}
	}
	//it's me saying to wordpress "Hey guy, don't forget to save this data when you insert or update posts!"
	add_action("wp_insert_post", 'wd_meta', 10, 2);
?>

Now we have our plugin working, let’s improve it.

Step 5 – Shortcodes and theming functions

Before we can output our posts we have to prepare two kind functions:

• Common theming functions – Something like wd_series($args), so we can use for theming and widgets
• Shortcodes – Something like [wd-series] so we can insert it directly from content edit mode.

Common functions

We will need to run a get_post loop, because probably our series will be shown inside another WordPress loop, so we can’t use WordPress’ default loop. Think about it this way: we will show a series when we are INSIDE a post, right? Thus the best way is via get_post.

Then we will just prepare a simple output function based on current post’s ID so it will show all items for the series related to it.

As we store the series related to this post inside “series_id” custom field, we just need to run a get_post for this series_id and output all metadata about series items.

Since for every item the output function is potentially the same, we will create two functions this time, one for items output and other for complete series output, as follow:

<?php //display item with or without link
function wd_item( $name, $postItem ) {
	if ( ! empty ( $postItem ) ) {
		$link = get_permalink($postItem);
		echo "<a title="$name" href="$link">$name</a>";
	} else {
		echo $name;
	}
}
//output!
function wd_series ($series) {
	$title = get_the_title($series);
	$meta  = get_post_custom($series);

	echo "<h3>$title</h3>";
	$size = $meta["size"][0];
	$i = 1;
	echo "<ol>";
	while ($i <= $size) {
		$key = "name_".$i;
		$name = $meta[$key][0];

		$key = "post_".$i;
		$post_item = $meta[$key][0];

		echo "<li>";
			wd_item( $name, $post_item);
		echo "</li>";

		$i++;

		$name = $post_item = null;
	}
	echo "</ol>";
}
?>

Shortcodes

So with the function above we can output our series in our template, and it is pretty customizable as you can see. But what if you want to give your writers the ability to decide where the series content should appear? Well, to do this you will need a shortcode.

Long story short, they give the ability to call functions via post content. So while I’m writing this post I could write [wd-series] and BAM! our series content would have to appear just above this text.

It is pretty easy to register a shortcode, and as long as we have our output function defined it will be even easier. With no more than six lines you can do it:

<?php // [wd-series]
function wd_series_shortcode() {
              global $post;
              $series = get_post_meta($post--->ID, "series_id", true);

              wd_series($series);
}
add_shortcode( 'wd-series', 'wd_series_shortcode' );
?>

After all this code, you will see something similar to this when you write [wd-series] in your content box:

Are you hungry yet?

This code surely could be improved and I know that some of our brilliant readers could point out some things to make it better. So why not leave a comment and share your thoughts?

And finally, I recommend you dig a little deeper into the  Shortcodes API, since it is a great tool when well used!

I’m not the very first to do something like this with jQuery. But our goal in here is to develop a complete jQuery plugin, from start to finish, with options, and that is easy to customize. And, of course, something that I hope is useful to you

So, let’s rock!

STOC – Smooth Table of Contents jQuery plugin

Since there are a lot of “tocs” around the web, our plugin will be called STOC and the main features are:

• Automatically adds the table of contents to target element
• You can select to search just a part of you page
• You can select what is the first heading we will have to search (h1, h2…)
• You can select the “depth” of the search
• SubItems are made of sublists inside parent item
• You can select which text will display before the table (title)
• You can select whether ol or ul to you listing
• You can enable / disable smooth scrolling

Here is how it should look in our demo:

Here’s a running Demo. You can also download all files here.

Planning and planning – Before code, let’s think about it

The main idea is to have a jQuery plugin that generates a table of content inside the target element. To have this working we need some basic customization with these options:

• Where to search – If the table is generated based on entire page, just a section content
• Depth of H’s – How many “levels” of titles we will have in our search
• Start tag – Which level of heading will be the first on set (h1, h2, h3)
• Title if the box – What to display as box’s title
• List type – whether to have ordered or unordered list

The hardest thing when we are doing something just for fun is to define the scope. Actually it is hard too when we have a “real” project, but when it comes to pet projects it is harder because you just can’t measure accurately what will bring you the expected revenue (fun).

So, what do I do in these cases is list anything that I could do on it, and just cut down what will take too much time and will not be so good to do.

In this case, for example I listed these features:

• Customizable via options – I think this one was essential, so I just kept it
• Smooth scrolling - This one I didn’t see in any other plugin / snippet. It would be good to have, so I kept it.
• Accordion for hierarchy - I found this idea really cool, but useless, I drop it.
• Preview of the text on hover - I’ve stolen this idea of one site but actually didn’t find it useful also, so I drop it.

So what I’ve done here is to define which of the cool features had big potential to be a waste of time. Even if I had more time to code I would never use them, just because they haven’t the expected benefit (fun x time).

Now that we now what we want to do, let’s start to code.

Basic plugin structure with options

First we need to create our file. The standard for jQuery plugins files names is jQuery.PLUGINNAME.js so, our file will be jquery.stoc.js.

We also have all our options defined above, so we need now to save a variable for each one of them, so our user can send his own parameters.

Here is our commented code:

/*
This line creates our function "wrapped" by jQuery container, so we won't have any problem with others libraries
*/
(function($){
/*
Here the standard is $.fn.PLUGINNAME. so when we call $(element).stoc() jquery will run this code
Pay attention that we pass options to our funcion, so when user defines it we can extend our plugin
*/
	$.fn.stoc = function(options) {
	//Our default options
	var defaults = {
		search: "body", //where we will search for titles
		depth: 6, //how many hN should we search
		start: 1, //which hN will be the first (and after it we go just deeper)
		stocTitle: "<h2>Contents</h2>", //what to display before our box
		listType: "ul", //could be ul or ol
		smoothScroll: 1
	};

	//let's extend our plugin with default or user options when defined
	var options = $.extend(defaults, options);

	return this.each(function() {
		//our functions here
		alert("I'm a beta tester alert box!");
	});
};
})(jQuery);

Let’s try a simple demo to see it working. Create this HTML in same folder as our plugin:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Smooth Table Of Contents jQuery plugin - DEMO</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.stoc.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#items").stoc();
		});
	</script>
	<style type="text/css">
		body {
			background: #fafafa url(handmadepaper.png); //via subtlepatterns
		}
			#container {
				position: relative;
				top: 50px;
				width: 960px;
				margin: 0 auto;
				padding-bottom: 20px;
			}
			#container p, #container h1, #container h2, #container h3, #container h4, #container h5 {
				font-family: "arial";
				padding: 10px 20px 0;
				margin: 0
			}
			#items {
				float: right;
				width: 260px;
				padding-bottom: 10px;
				margin:0 0 10px 20px;
				/* rgba with ie compatibility */
				background-color: transparent;
				background-color: rgba(255,255,255,0.4);
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff)";
			}
				#items ul {
					margin: 0 0 0 20px;
					padding: 0 0 5px;
					list-style-type: none;
				}
					#items ul ul {
						font-size: 90%;
					}
				#items ul a {
					font-family: "arial";
					text-decoration: none;
					color: #c10000;
				}
					#items ul a:hover { color: #ff0000 }
	</style>
</head>
<body id="page-1">
	<div id="container">
		<div id="items">
		</div>
		<h1>1 - Phasellus vulputate</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus est, egestas vel aliquet at, pellentesque nec lorem. Pellentesque molestie bibendum eros, eu suscipit nisi volutpat fringilla. Vivamus fringilla nisl ut ante commodo porta. Morbi ipsum nunc, sollicitudin ac pretium pretium, iaculis vel enim. Nulla cursus porta orci, sed vulputate magna feugiat et. Aliquam nibh massa, pharetra tincidunt vehicula ac, pellentesque vitae nibh. In lobortis semper eros fermentum pretium. Sed posuere, urna eget ornare luctus, mi lectus lacinia leo, sit amet faucibus orci ipsum sit amet ipsum. Maecenas sapien neque, ultrices a lacinia sit amet, fermentum non enim. Integer at venenatis orci. In hac habitasse platea dictumst.</p>
		[... lot of more lipsum text with h's here]
	</div>
</body>
</html>

If you create this file, when you load it you should see our pretty beta tester alert. So our plugin is being called (make sure that you add jquery before it, as I’ve done including api.googleapis…). if you want to overwrite any option defined before, you just have to pass it as .stoc({ OPTIONNAME: VALUE }) instead of just .stoc(). For example, to define our search just in #container, add .stoc({ search: "#container" }).

How should we select our headings?

Now we have to prepare our plugin to get all h’s that we have to (based in our options). What we can do is get all the headings we have to, and when we loop through each one of them we will discover which level it is. I think it is easier than trying to get the whole hierarchy for each “tree” of headings.

Since our current object can change as we run our code, we have also to “cache” our current object so we will always now which object we are modifying. Our code now will be:

   return this.each(function() {
		//"cache" our target and search objects
		obj = $(this); //target
		src = $(options.search); //search
		//let's declare some variables. We need this var declaration to create them as local variables (not global)
		var appHTML = "", tagNumber = 0, txt = "", id = "", before = "", after = "", previous = options.start, start = options.start, depth = options.depth, i = 0, srcTags = "h" + options.start, cacheHN = "";

		//which tags we will search
		while ( depth > 1) {
			start++; //we will just get our start level and numbers higher than it
			srcTags = srcTags + ", h" + start;
			depth--; //since went one level up, our depth will go one level down
		}

    });

If you alert you srcTags you will see something like this “h1, h2, h3, h4, h5, h6″. This is what we will pass to jQuery as the elements that we want to search for.

Building our table

We have all our elements, what we have to do is run a function on each one of them with the wonderful each() jQuery function.

Inside each element, we need to:

• Know which level the current element is (tagNumber)
• Set one id to this element, if it doesn’t have one
• Get the elements text
• Test if is its level is lower, higher or equal than previous element and open / close ul’s based on this
  • If element number is higher than previous means that we went down one level (e.g. from h2 to h3)
  • If element number is equals to previous means that we stay on same level (e.g. h4)
  • If element number is lower than previous means that we went up, but we don’t know how many levels (e.g. from h4 to h1)
• Append element HTML to our target item

We also have to correct the last item because if it is not top-level it will let some uls open, and we don’t want it :D

Our commented code now will be:

/* our setup stuff here */
/*inside our return function */
	//which tags we will search
		while ( depth > 1) {
			start++; //we will just get our start level and numbers higher than it
			srcTags = srcTags + ", h" + start;
			depth--; //since went one level up, our depth will go one level down
		}
		src.find(srcTags).each(function() {
			//we will cache our current H element
			cacheHN = $(this);
			//if we are on h1, 2, 3...
			tagNumber = ( cacheHN.get(0).tagName ).substr(1);

			//sets the needed id to the element
			id = cacheHN.attr('id');
			if (id == "") { //if it doesn't have only, of course
				id = "h" + tagNumber + "_" + i;
				cacheHN.attr('id', id);
			}
			//our current text
			txt = cacheHN.text();

			switch(true) { //with switch(true) we can do comparisons in each case
				case (tagNumber > previous) : //it means that we went down one level (e.g. from h2 to h3)
						appHTML = appHTML + "<" + options.listType +"><li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a>";
						previous = tagNumber;
					break;
				case (tagNumber == previous) : //it means that stay on the same level (e.g. h3 and stay on it)
						appHTML = appHTML + "</li><li>"+ before +"<a href=\"#"+ id + "\">" + txt +  "</a>";
					break;
				case (tagNumber < previous) : //it means that we went up but we don't know how much levels  (e.g. from h3 to h2)
						while(tagNumber != previous) {
							appHTML = appHTML + "</" + options.listType +"></li>";
							previous--;
						}
						appHTML = appHTML + "<li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a></li>";
					break;
			}
			i++;
		});
		//corrects our last item, because it may have some opened ul's
		while(tagNumber != options.start) {
			appHTML = appHTML + "</" + options.listType +">";
			tagNumber--;
		}
		//append our html to our object
		appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">";
		obj.append(appHTML);

How to Make our STOC smoother

I’ve stolen CSS trick’s smooth scroll code, but I hope they don’t mind :D

What we have to do here is just put this (compressed) function to load when our smooth scroll in on (if the user doesn’t set it as 0).

/*all code above in here*/
	//append our html to our object
		appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">";
		obj.append(appHTML);

		//our pretty smooth scrolling here
		// acctually I've just compressed the code so you guys will think that I'm the man . Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/
		if (options.smoothScroll == 1) {
			$(window).load(function(){
				function filterPath(string){return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'')}var locationPath=filterPath(location.pathname);var scrollElem=scrollableElement('html','body');obj.find('a[href*=#]').each(function(){var thisPath=filterPath(this.pathname)||locationPath;if(locationPath==thisPath&&(location.hostname==this.hostname||!this.hostname)&&this.hash.replace(/#/,'')){var $target=$(this.hash),target=this.hash;if(target){var targetOffset=$target.offset().top;$(this).click(function(event){event.preventDefault();$(scrollElem).animate({scrollTop:targetOffset},400,function(){location.hash=target})})}}});function scrollableElement(els){for(var i=0,argLength=arguments.length;i<argLength;i++){var el=arguments[i],$scrollElement=$(el);if($scrollElement.scrollTop()>0){return el}else{$scrollElement.scrollTop(1);var isScrollable=$scrollElement.scrollTop()>0;$scrollElement.scrollTop(0);if(isScrollable){return el}}}return[]}
			});
		}

Our final result is this:

(function($){
 $.fn.stoc = function(options) {
	//Our default options
	var defaults = {
		search: "body", //where we will search for titles
		depth: 6, //how many hN should we search
		start: 1, //which hN will be the first (and after it we go just deeper)
		stocTitle: "<h2>Contents</h2>", //what to display before our box
		listType: "ul", //could be ul or ol
		smoothScroll: 1
	};

	//let's extend our plugin with default or user options when defined
	var options = $.extend(defaults, options);

    return this.each(function() {
		//"cache" our target and search objects
		obj = $(this); //target
		src = $(options.search); //search
		//let's declare some variables. We need this var declaration to create them as local variables (not global)
		var appHTML = "", tagNumber = 0, txt = "", id = "", before = "", after = "", previous = options.start, start = options.start, depth = options.depth, i = 0, srcTags = "h" + options.start, cacheHN = "";

		//which tags we will search
		while ( depth > 1) {
			start++; //we will just get our start level and numbers higher than it
			srcTags = srcTags + ", h" + start;
			depth--; //since went one level up, our depth will go one level down
		}
		src.find(srcTags).each(function() {
			//we will cache our current H element
			cacheHN = $(this);
			//if we are on h1, 2, 3...
			tagNumber = ( cacheHN.get(0).tagName ).substr(1);

			//sets the needed id to the element
			id = cacheHN.attr('id');
			if (id == "") { //if it doesn't have only, of course
				id = "h" + tagNumber + "_" + i;
				cacheHN.attr('id', id);
			}
			//our current text
			txt = cacheHN.text();

			switch(true) { //with switch(true) we can do comparisons in each case
				case (tagNumber > previous) : //it means that we went down one level (e.g. from h2 to h3)
						appHTML = appHTML + "<" + options.listType +"><li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a>";
						previous = tagNumber;
					break;
				case (tagNumber == previous) : //it means that stay on the same level (e.g. h3 and stay on it)
						appHTML = appHTML + "</li><li>"+ before +"<a href=\"#"+ id + "\">" + txt +  "</a>";
					break;
				case (tagNumber < previous) : //it means that we went up but we don't know how much levels  (e.g. from h3 to h2)
						while(tagNumber != previous) {
							appHTML = appHTML + "</" + options.listType +"></li>";
							previous--;
						}
						appHTML = appHTML + "<li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a></li>";
					break;
			}
			i++;
		});
		//corrects our last item, because it may have some opened ul's
		while(tagNumber != options.start) {
			appHTML = appHTML + "</" + options.listType +">";
			tagNumber--;
		}
		//append our html to our object
		appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">";
		obj.append(appHTML);

		//our pretty smooth scrolling here
		// acctually I've just compressed the code so you guys will think that I'm the man . Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/
		if (options.smoothScroll == 1) {
			$(window).load(function(){
				function filterPath(string){return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'')}var locationPath=filterPath(location.pathname);var scrollElem=scrollableElement('html','body');obj.find('a[href*=#]').each(function(){var thisPath=filterPath(this.pathname)||locationPath;if(locationPath==thisPath&&(location.hostname==this.hostname||!this.hostname)&&this.hash.replace(/#/,'')){var $target=$(this.hash),target=this.hash;if(target){var targetOffset=$target.offset().top;$(this).click(function(event){event.preventDefault();$(scrollElem).animate({scrollTop:targetOffset},400,function(){location.hash=target})})}}});function scrollableElement(els){for(var i=0,argLength=arguments.length;i<argLength;i++){var el=arguments[i],$scrollElement=$(el);if($scrollElement.scrollTop()>0){return el}else{$scrollElement.scrollTop(1);var isScrollable=$scrollElement.scrollTop()>0;$scrollElement.scrollTop(0);if(isScrollable){return el}}}return[]}
			});
		}
    });
 };
})(jQuery);

Are you hungry yet?

What about you help me with some improvements on this plugin? Do you have any tip? Anything that you can think of a better way to do?

Do you have any other features in mind? Or even another plugin idea that you’d like to see a tutorial on?

Share your thoughts with us! :D

In this post you’re going to find different types of premade carousel plugins and tutorials how to make your own unique carousel gallery whenever you wish, find also some little inspiration at the end of article as bonus!

1. Boutique carousel

A ready to use jQuery slider/carousel to present your images in a unique, smooth and customizable way. Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose. Full documentation and examples included.

View Demo

1.1. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). Check out 15+ examples, tutorial how to set it up and all configuration options. Works with all major browsers. Here’s the circular dynamic carousel example.

2. jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. jCarousel Lite is not a replacement for jCarousel; rather it is a light-weight (only 2kb) alternative for users whose primary focus is not to build a full-blown image gallery.

3. Agile Carousel

Agile Carousel is a JQuery plugin that lets you create a carousel with flexible settings. Some cool features:

• Ability to show multiple slides
• Ability to show intro slide
• Ability to Disable “First” and “Last” buttons at beginning & end of carousel

Here’s an example with intro slide.

4. jQuery Carrousel

The core allows to create your own controls or effects. This plugin transforms and tags into an animated carousel.

5. jQuery Infinite Carousel Plugin

jQuery carousel plugin where small image thumbnails allow users to jump over to other images.

Features:

• Carousel never ends and images shuffle around
• Captions are optional
• Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence
• Thumbnails can be styled via CSS
• It’s less than 14K
• Reusable on multiple containers within the same page

6.Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

7. Just Another Carousel

A jQuery content carousel that works with any size content and supports mouse input. Features:

• Works in FF3, IE7, Opera, and Safari.
• Supports fixed-size or variable-size children
• Supports the Meta plugin for jQuery
• Totally CSS-based allowing for high customization
• Degrades gracefully into an unordered list

8. LoopedCarousel

LoopedCarousel is a plugin made for jQuery that is not only a looping carousel, its main goal is to be extremely easy to implement. No more messing around with CSS to get your carousel to look and function properly. You want to show 5 items? Tell it “items: 5″ and so.

9. jQuery Carousel

Great looking plugin with various types of use.

10. Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with a set of nested elements.

11. How to Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

12.jQuery Carousel Gallery for WordPress

This plugin builds on the built-in WordPress gallery, and replaces any gallery inserted using the

tag with a neat jQuery powered carousel.

13. Making an infinite JQuery carousel

In this tutorial you will make an infinite JQuery carousel. The infinite effect will be made by changing position of the items, when the user clicks right(next) the first item will be placed after the last item and when he clicks left(previous) the last item will be placed before the first item. You can check out the demo.

14. jQuery Infinite Carousel

Screencast how to create infinite jQuery carousel. Step by step written tutorial also available. Check out the demo and access code.

Examples

Branded07

Aaron Hall Portfolio

Corny

Mkg Studio

Deluge Studios

Golf Working

Dazzle Cat

What Is XV

Bret Glassett

Chris Kaufman Portfolio

In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.

1. GraphUp Jquery Plugin

“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.”

• Many options — Pick a data cleaner and a painter: fill, bars, bubbles; configurable decimal point (dot or comma); customizable color maps and CSS classes; and more.
• Lightweight — The plugin takes only 4kB to load.
• Extensible — Easily create your own cleaners, painters or color maps. Also, a callback is available to perform any operations on a cell before painting. Super flexible, endless possibilities! Check out the demos.
• Progressive enhancement — Your original table is still viewable without JavaScript enabled.
• Well documented — Check out the live examples and documentation.

Compatible Browsers: Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

1.1. jQuery Visualize Plugin

jQuery Visualize Plugin is the perfect plugin if you have a table and want to generate a chart out of it. It offers different types of charts such as Bar, Area, Pie & Line charts.
Examples

Type of Charts: Bar, Area, Pie & Line.
Requirements: jQuery, excanvas (included)
Browser Support: IE6*, IE7*, IE8*, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.
* HTML 5 canvas element is not supported by IE but Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer.
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT and GPL licenses

2. Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Examples

Line and column example

Columns with rotated labels

Type of Charts: Bar, Area, Areaspline , Pie, Line, Spline, Column & Scatter.
Requirements: jQuery or MooTools
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and iPhone!
Demo: http://www.highcharts.com/demo/
License: Creative Commons Attribution  Non-Commercial 3.0 License. Free for personal website, a school site or a non-profit organization. For a single commercial Website the license costs $80.

3. Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Examples

Tracking curves with crosshair plugin

Type of Charts: Bar, Area, Point & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Konqueror 4+.
Demo: http://people.iola.dk/olau/flot/examples/
License: MIT License

4. jQuery Sparklines

Sparklines generates small inline charts either inline in the HTML or via JavaScript. It is really good for displaying mini graphs notably because most of them just take 1 line of HTML or JavaScript code. Another great feature is it self-refreshing capabilities. You can see it in their Mouse-Speed demo which shows you the power of live charting.
Example

Type of Charts: Bar, Tristate, Bullet, Box Plot & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://omnipotent.net/jquery.sparkline/
License: New BSD License

5. jqPlot

jqPlot did not catch my eye at first glance but after further research I found it to be one of the best and free jQuery chart library. Numerous graphical options are available you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Examples

Type of Charts: Bar, Pie & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://www.jqplot.com/tests/
License: MIT and GPL version 2 licenses

Conclusion

As you may have seen from this 5 jQuery chart libraries they suit different needs. First Sparklines generates a small inline chart which is perfect for charts where the precision is not important. You look at the small chart and you should directly know what happened.

Highcharts, Flot and jqPlot are very powerful jQuery chart libraries. My personal favourites is Highcharts and jqPlot. The visual quality of Highcharts charts are better than jqPlot but the last one is free. I recommend you to test at least one of them and you will see that they are really powerful.

Finally jQuery Visualize is really easy to use and specially adapted if you want to create a chart out of a table, just like you would do it in excel. This can be convenient when you need a table and a chart to visualize your thoughts. Feel free to give your feedback via comments section.:)

I tested manually every theme here to be sure it’s really good, so you will not be disappointed. Just go on and scroll through and choose one on these themes and browsing with Firefox will become even more enjoyable!

1. Charamel Firefox Theme

Really beautifully designed theme with light brown colors. This one definitely is my favorite #1, I am currently using it.

2. Daum Blue Firefox Theme

Really elegant and clean theme using light blue and grey colors. One of my favorites.

3. Mac OS X Leopard Style Firefox Theme

If you love Macintosh, but your browser is Firefox, you definitely will enjoy this Leopard OS type theme. This theme consists of dark grey and blue color scheme.

4. Qute Firefox Theme

Simple,light and clean firefox theme with clear, colorful icons.

5. iPox Firefox Theme

iPox is an easy on the eyes, white and blue theme for Firefox.

6. Camifox Firefox Theme

Lovely colors and eye-candy shiny rounded icons used in this theme.

7. PitchDark Firefox Theme

Cool blue colored minimalistic theme.

8. Anthem Firefox Theme

Carbon like dark theme really standing out from the crowd.

9. iAqua Firefox Theme

Colors are really light and good looking, perfect for people, who enjoy clean and professional themes.

10. Past Modern Firefox Theme

Interesting theme using subtle colors and icons – such theme would be prefered by people who spend long time using browser, because it’s really easy on eyes.

11. Heaven Cube Firefox Theme

This is a dark modern theme recommended for those with a correspondingly dark OS visual style.

12. ArzoFox Firefox Theme

Light blue theme using cool icons with reflections.

13. MyFirefox Firefox Theme

This theme perfectly simulates Internet Explorer 8. Good choice if you like IE design and features, but don’t quite like it as browser. Works perefectly with Windows 7.

14. Vista Areo Firefox Theme

Similar to MyFirefox theme this theme simulates IE 8 but with Vista Aero style.

15. NASA Night Launch Theme

If you like dark colors and dark background this theme definitely will suit your needs.

16. Office 2007 Black Firefox Theme

Cool greyscale theme using really elegant colors and icons.

17. Black Stratini Firefox Theme

One more theme for people who enjoy dark colors and cool bright icons.

18. MidnightFox

Dark theme using brightly colored buttons and colors.

19. Fox World Firefox Theme

Very light theme full with glossy and shiny blue icons and colors.

20. Kempelton Firefox Theme

One more light, clean theme with really interesting 3D loading bar.

Which one is your favorite? Let me and readers find out your pick!

Release jQuery power and enjoy benefits right now – hope you like my findings and you’ll put them in good use.

1. UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable mega menu ( or mega drop down menu ) WordPress plugin. It works out of the box with the WordPress 3 Menu Management System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

View Demo

1.1. Styles with Shortcodes for WordPress

Have you ever been in the situation where you have a great looking WordPress theme, but you are missing some custom styling for different elements? Maybe you don’t know PHP , CSS and Javascript and are not able to implement the cool feature you are missing.

Styles with Shortcodes is the solution for this problem. This plugin lets you customize content faster and easier than ever before by using Shortcodes. Choose from 100 built in Shortcodes like; jQuery Accordion, Tabs and Toogle, Tooltips, Column Shortcodes, Gallery and Image Shortcodes, Button Styles, Alert Box Styles, Pullquotes, Blockquotes, Twitter buttons, Retweet button, Facebook Like, Follow me on Twitter buttons, Linkedin, Google +1, Flattr  and many more!

View Demo 

1.2.HOW TO: Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

Check out demo

2. WP Slimbox 2

A WordPress implementation of the stellar Slimbox2 script by Christophe Beyls (an enhanced clone of the Lightbox script) which utilizes the jQuery library to create an impressive image overlay with slide-out effects.

Check out live demo

3.WordPress jQuery Lightbox Plugin

Used to overlay images on the current page, a little bit different popular Lightbox plugin.

If you want to see live demo of this plugin, just scroll down the page to see sample image and click on it.

Check out live demo

4.Carousel Gallery (jQuery)

This plugin tweaks the gallery tag in WordPress 2.6 thusly by replacing it with a javascript carousel. The plugin uses jQuery and a jQuery plugin called jCarousel.

Check out live demo

5.Shadowbox JS

Shadowbox is an online media viewing application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating users away from the linking page.

Check out for live demo

6.jQuery Lightbox For Native Galleries

Makes the native WordPress galleries use a lightbox to display the fullsize images.

Check out live demo

7.jQuery Comment Preview

Live comment preview without page reboot. Works on jQuery.

8.WordPress Plugin jQuery Pagebar

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Check out live demo

9.Google Analyticator

Google Analyticator adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging. Google Analyticator also includes several widgets for displaying Analytics data in the admin and on your blog.

Check out screenshots

10.OpenID Comment Form

OpenID is an open standard that allows users to authenticate to websites without having to create a new password. This plugin allows users to login to their local WordPress account using an OpenID, as well as enabling commenters to leave authenticated comments with OpenID. The plugin also includes an OpenID provider, enabling users to login to OpenID-enabled sites using their own personal WordPress account.

Check out screenshots

11.sCategory Permalink

Permalink option of WordPress %category% has one great limitation – when this option is selected, WordPress uses category with lowest ID for permalink generation. This plugin is intented to bypass WordPress permalinks limitation and allows you to select category for permalink generation.

12.Google AJAX Translation

The Google AJAX Translation WordPress plugin provides a quick, simple, and light way to add translation to your blog.

13.Infinite scroll

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page. This means they never need to click “Next Page”, which dramatically increases stickiness.

Check out demo

14.GD Star Rating

GD Star Rating plugin allows you to set up rating and review system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and also add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin. Plugin includes advanced settings panels that will allow you to control many aspects of rating. Plugin also supports multi ratings along with thumbs based ratings.

Check out live demos throughout their whole homepage

15.Image Drop Shadow

Image Drop Shadow wordpress plugin adds stylish drop shadow to images posted on your blog using jQuery. Just install it and all your posted images will automatically have a drop shadow.

16.J Post Slider

Show your post in fancy jQuery box, rotating images, with show-up text box with post description. This Plugin will present your HOT posts, in jQuery animation show.

17.Live Blogroll

Live Blogroll will make your blogroll livelier. It will show a number of ‘recent posts’ for each link in your Blogroll using Ajax.

18.WP Wall

WP Wall is a “Wall” widget that appears in your blog’s side bar. Readers can add a quick comment about the blog as a whole, and the comment will appear in the sidebar immediately, without reloading the page.

19.WordPress Sidebar Turned Apple-Flashy Using jQuery UI

Beautiful tutorial, explaining how to modify and add Apple type sidebar using the Accordion plugin in jQuery UI.

Check out demo

20.Adding Form Validation to WordPress Comments using jQuery

This tutorial will show you how to use jQuery to do some instant checking on an example comment form.

Check out demo

21.Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. Your archive page will never be boring again!

22. Shockingly Big IE6 Warning

The Shockingly Big IE6 Warning is a plugin that shows a warning message alerting the user why it is bad to use IE6, the security risk and the bad compatibility of Web Standards.

You can choose from 3 types of warning:

• TOP, a discreet top bar
• FULL, a fullscreen warning
• CRASH, the mean option

23.WordPress Plugin – My Page Order

My Page Order allows you to set the order of pages through a drag and drop interface. The default method of setting the order page by page is extremely clumsy, especially with a large number of pages.

24.Using jQuery to liven up your WordPress login

Nifty WordPress login page using Thickbox jQuery plugin.

Check out demo

25.Plugin Central

Plugin Central is a comprehensive WordPress plugin solution. Main features are:

• Install plugins directly by typing the name of plugin or the URL to zip file!
• Multiple-plugin install feature allows you to move your plugins from one blog to another
• Displays status of plugins in need of update on the Dashboard
• Option to update all plugins at once!

26.Tweet Blender

Similar in functionality to Twitter’s own widget but has support for multiple authors, hashtags, and keywords all blended together. The plugin can show tweets from just one user (as all other Twitter plugins do); however, it can also show tweets for a topic which you can define via Twitter hashtag or keyword. But there is more! It can also show tweets for multiple authors AND multiple keywords AND multiple hashtags all blended together into a single stream.

Check out live demo on right sidebar of author’s site

27.Advanced Spoiler

Show or hide contents(text, image etc.) with animated effects wrapped by spoiler markup tag([spoiler][/spoiler]).

28.SimpleModal Contact Form (SMCF)

SimpleModal Contact Form (SMCF) is an Ajax powered modal contact form. It utilizes the jQuery JavaScript library and the SimpleModal jQuery plugin.

29.Accordion Image Menu

This is a different menu that uses your post images as a background. You can insert the menu wherever you want: content, php files or widget if your theme allows it.

Live demo on author’s website sidebar

30.PixoPoint Menu Plugin

Adds an SEO friendly, accessible regular or dropdown menu to your WordPress blog.

Check out live example

31.Quick Search

Quick Search add AJAX Search to your site sorting results by Posts, Page and Comments. You can easly customize the popup menu style by modifying the file quick-search.css.

32.Ozh’ Better Plugin Page

Better Plugin Page brings a few valueable enhancements to the Plugin Management page: tiny icons, less clutter, quick action links. Handy for those who have 70+ plugins on their blog.

Check out demo

33.Highlight Search Terms

Highlights search terms using jQuery when referer is a Google, Yahoo or Lycos search engine or within WordPress generated search results. This plugin is a light weight, low resource demanding.

34. µAudio Player

µAudio is a slim (450 Bytes!), fast plugin to create a flash mp3 player when mp3 links are clicked. In order to reduce clutter and file transfer, the links are unmodified until they are clicked, at which point a div with the player is faded in after the link. A second click on the link fades the player back out.

35.News-Ticker

A JQuery based News Ticker Displays a sliding or fading list of post titles, rss reeds or comments and excerpts with links to post.

I divided this article in three sections – Web development, Social development related plugins and finally just overall handy plugins for better browsing.

Also I must remind you, you will not find already popular and well known extensions here, since the mayor community already are know such plugins like – GreaseMonkey, WebDeveloper or Firebug tools for example. Just scroll through the list, check screenshots and hopefully several of these plugins will be useful for your daily Firefox internet browsing.

Web Development Related Firefox Plugins

1.Palette Grabber 0.4.1

Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X based on the current page. This plugin is great using together with ColorPicker, actually extends possibilities.

2.LinkChecker (not for 3.5  just yet)

Sorry for misleading – this extension hasn’t been updated to newer version just yet, it’s still only for 3.0 version.

Check the validity of links on any web page, this plugin is good for web designers and actually bloggers too.

There’s also a tool-bar button that can be added for easier access to LinkChecker. Just right click on your tool-bar, choose “Customize” and look for the button with the underlined blue check.

3.View Cookies

Just a little bit faster and handier way how to check site cookies.

It adds a tab to the Page Info dialog box, which shows the cookies of the

current web-page. This is interesting for developers, privacy-conscious users and others.

4.ViewSourceWith

The main goal consists to view page source with external applications but you can also…

- open page source as DOM document, read faq

- open CSS and JS files present on page

- open images using your preferred image viewer (e.g. GIMP or ACDSee)

- open PDF links with Acrobat Reader or Foxit Reader or what you prefer

- edit textboxes content with your preferred editor and automatically see modified text on browser when you re-switch focus on it, this simplifies wiki pages editing, read faq

- open server side pages that generate the browser content, this simplifies web developer’s debug, read server-faq

- open files listed in Javascript console. When editor open file the cursor can be moved to line number shown on javascript console, read js faq

For desperate cases you can add Microsoft IE to editor list.

5.Text Link 3.1.

Allows URI texts written in webpages to be loaded by double clicks.

Without this extension, when you discover an URI text not linked, like “http://piro.sakura.ne.jp/”, you have to do following steps to load the page:

1. Select the URI text completely. (It may be a hard work if the page is rendered with a proportional font. This operation always chafes me.)

2. Copy it. (press “Ctrl-C” or use “Copy” from the “Edit” menu)

3. Paste it to the location bar.

4. Press “Enter”. Then, Firefox loads it.

or,

1. Select the URI text completely. (It chafes me again!)

2. Drag the selection string to the tab bar and drop it. Then, Firefox loads it.

With this extension, you can load the URI only following one step:

1. Double-click on the URI text. Then, Firefox loads it. I’m happy.

6.Custom Buttons

Gives a possibility to create custom toolbar buttons – beautiful for designers or just personalized theme lovers, suited for me perfectly at least!

7.Subtile

Subtile is a Firefox extension that provides generic support for toolbar menus.

The menu can be located anywhere in the browser toolbars, attached to an icon that can change its appearance when an event occurs.

If you are a Webmaster, you can create your own menus and distribute them easily to your users. With the dynamic capabilities of Subtile, you can alert people when some content has changed or new messages are available.

If you are simply a curious Web user, enjoy the available menu configurations from http://www.subtile.net/subtiles.php or build easily your own video site monitor from http://www.downloadhelper.net/st-build.php

8.FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page.

You must have Firebug installed and the “Net” panel enabled to use this extension.

You must also download a PHP library from http://www.firephp.org/HQ/

9.FireShot

FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part).

Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.

The captures can be:

- uploaded to FREE public screenshot hosting;

- saved to disk (PNG, GIF, JPEG, BMP);

- printed;

- copied to clipboard;

- e-mailed;

- sent to configurable external editor for further processing;

10.SenSeo

SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension. SenSEO gives you:

- Overview of SEO-important web page components

- Analysis of on-page-SEO-criteria

In the current version SenSEO checks:

- Correct usage of Document-Title, Meta-Description and Meta-Keywords

- Headlines, Domain and URL-Path

- Other general content-criteria

You must install Firebug.

11.Foxy SEO

Foxy SEO Tool is a free, open source toolbar that provides quick and easy access to a multitude of search engine functions such as Google Site, Yahoo! Site Explorer, Live Fromlinks. Also included are famous web traffic analysis sites such as Alexa, Compete, Quantcast, popular statistic aggregators like Quarkbase and WebSiteOutlook. You can check a site’s listing in important directories like Dmoz and Yahoo! Directory, buzzing Web 2.0 sites such as Technocrati, Wikipedia, Digg, Delicious and links to useful network functions like Whois, Geotool, Internet Archive, etc.

12.Save Complete

As more and more sites use CSS, Firefox’s built-in complete save becomes increasingly less effective, as it doesn’t support stylesheets. This extension fixes this, and saves the complete page, including all images, stylesheets, flash, javascript, and anything else associated with the document, even imported stylesheets and images referenced in the stylesheet files.

13.Nuke Anything Enhanced

Allow hiding of almost anything via context menu ‘Remove Object’ or ‘Remove Selection’ with possibility of multiple undo of ‘Remove Object’. You can also make a selection and chose “Remove everything else” to clear the page and only leave the selected text.

Once you decide what you want to Remove, Right click on it or select it, then select “Remove this Object” from the menu.

The effect of this extension is temporary, which is useful before printing a page, you can use another extension, ‘Remove It Permanently’ if you want your removed objects to be remembered.

Social & Communication Related Firefox Plugins

14.Social Media for Firefox

This plugin actually is reason I thought about such article creation. It’s experimental plugin but I enjoy using it a lot, since I am very active on social networks.

Status bar that will show you how many votes content has at many social sites. Find good content first to build your social news accounts.

15.ScribeFire Blog Editor

ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. You can drag and drop formatted text from pages you are browsing, take notes, upload images, and post to multiple blogs.

16.ClipMarks

nstead of copying and pasting links, Clipmarks is like adding a pair of scissors to your browser, letting you capture exactly what you want others to see (text, images or video). Your clips are saved on clipmarks.com and can easily be syndicated to FriendFeed, Twitter, Facebook or other sites. You can also post anything you clip directly to your blog (supports WordPress, Blogger, Typepad and more) or send it directly to friends or co-workers via email. Clipmarks also gives you a way to help the environment by printing only the parts of a page that you need. By printing just what you need, you’ll save ink, paper and trees, thus making a contribution to a cleaner environment.

17. Facebook Toolbar

Integrate your Facebook life into your browser, this toolbar will help not to spend so much time on Facebook page, but keep track on everything what’s happening there while you’re browsing the web!

18. TidyRead

TidyRead turns your web reading into a fast, smooth, no-fringe experience again. It intelligently extracts the core text of news articles and blog posts — even multi-page ones. TidyRead allows you to quickly grasp the main message of the page.

19. Cluster Tabs for Firefox

Install cluster tabs for Firefox to end tab overload, make your browser faster and share public & anonymous cluster tab web addresses with others.

Help make search better, create clusters that interest you!

20. Feedly

A magazine-like start page. A fast and stylish way to read and share the content of your favorite sites and services. Provides seamless integration with Google Reader, Twitter, Frienfeed, Delicious and YouTube.

21. Chameleon Bob

Chameleon Bob is a free add-on that helps you to change a style of your Facebook!

Install the add-on and you will be able to change skins, backgrounds and colors in Facebook. Choose any skins from our collection that were created for your pleasure!

22. Shorten URL

Shorten long URL from context menu or toolbar button with your selected URL shortener and display the result in location bar. Supports up to 100 URL shorteners.

23. OnlyWire – Social Networking Auto-Submitter

Submit hyper-links to over 20 social networking sites with one button click. Join thousands of publishers and bloggers using OnlyWire’s free tools to streamline the social networking submission process.

24. Socialite

Socialite provides elegant Firefox integration with reddit.com and other sites using the open source reddit engine. Socialite displays a context-sensitive toolbar above pages linked from reddit, allowing you to vote articles up and down, view comments, and save pages to your profile. In addition, Socialite provides a streamlined lookup-or-submit button in the location bar that allows you to check if what you are browsing is posted to reddit and submit it with one click.

25. Shareaholic

Shareaholic is the ultimate add-on for the link sharing addict! If you use sites like Facebook, Twitter, MySpace, Digg, Gmail, LinkedIn, etc you’ll likely enjoy having Shareaholic by your side. Get one step closer to making your life a little easier.

Other Useful Firefox Plugins For Daily Use

26. SmoothWheel

Scrolls the document smoothly when scrolling the mouse wheel (or using keyboard arrows). I enjoy this plugin as designer, sort of resembles of popular jquery sliding effects :)

27. WordPress Detector

Ever wanted to know which of the sites you visit is powered by WordPress? If yes, then this small, nifty tool could be just for you!

28. Flash Video Downloader

Flash Video Downloader helps you to download embedded flash video (.flv) from YouTube-like video sharing websites in one click.

29.ImageBot

Bulk/Batch/Mass Image Uploader

ImageBot is bulk/batch/mass image uploader, it allows you upload your images to a free image hosting service (ImageShack or Photobucket).

ImageBot lets you sort, filter, and make image galleries out of your images in a snap. It is especially good for your eBay auctions by way of the Thumbnail Gallery template included by default.

30.HyperWords

With Hyperwords you can select any word on any web page and choose from powerful commands, including:

• Reference • Search • Translation • Conversion • Email • Twitter • Facebook • Tag • Blog • & More.

Highly customizable & very, very easy to use.

Demo Video available on YouTube.

Unfortunately those three plugins aren’t compatible with Firefox 3.5 just yet, but I think they still are pretty useful in several occasions, so I added them anyway hoping that these plugins will update soon, we can also be patient now:

31.CodeBurner for Firebug 1.1 ( version Firefox 3.0)

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

32.Locationbar² ( 3.5 compatible *updated)

* Puts emphasis on the domain to reduce spoofing risk

* Linkifies URL segments (press Ctrl, Meta, Shift or Alt)

* More URL formatting options configurable

33.Extended Statusbar 1.5.3 (not with 3.5 yet)

A Statusbar with speed, percentage, time and loaded size (similar to Opera’s one).

Adds an Opera-like statusbar that shows:

- percentage of the page loaded,

- number of loaded images,

- bytes downloaded,

- average download speed,

Also consider checking my other previous Firefox posts showcasing really popular and well known Firefox plugins:

Popular Firefox Extensions for SEO masters

The Best 50 Firefox add-ons for Web-developers!

And maybe you know some more really good and new Firefox plugins, which is not so well known but should be? I also encourage You to comment this article – what’s your favorite plugin from this showcase and why? What kind of problems or successes you faced while using?

Finally also don’t use too much plugins and regularly clean your addons section from plugins you really don’t use – it’s the same as in WordPress – the more plugins you use, slower Firefox,Wordpress stay! I currently use like 20 plugins I cannot live without – what’s your number?