Home > CSS Blog > How to Fix WordPress Feedburner Plugins After Converting to Google Feedburner

How to Fix WordPress Feedburner Plugins After Converting to Google Feedburner

March 21st, 2009

How to Fix WordPress Feedburner Plugins After Converting to Google Feedburner

Feedburner API

I ran into (yet another) Feed Count + Feedburner problem recently, shortly after writing my last article on accounting for Feedburner’s subscriber count mistakes. And since I heard from a few people who are also using the Feed Count plugin, I thought I should share this info.

The Backstory

As I’m sure all you Feedburner users out there are well aware, Google purchased Feedburner quite some time ago. But until recently, that didn’t mean much: the same people were working on the code, your information was stored in the same place and was represented the same way, and so on.

But recently Google has begun bringing Feedburner more fully into the fold. As a result, all Feedburner users are being required to convert their Feedburner accounts into Google accounts. That created quite a few headaches for lots of people (including myself) right off the bat, as it took a good week for Google to nail down my subscriber numbers with any accuracy – one day I would have thousands of subscribers, the next I might have zero, and the day following only a few hundred.

A New Problem

However, even once Google started reporting my Feedburner numbers correctly, I still had a problem: my Feed Count plugin no longer grabbed my subscription statistics. Now, this wasn’t as huge a problem as it could have been, because I had my jQuery Feeburner fix in place… but I still wanted my real subscriber stats back at some point.

After a bit of digging, I found the problem: as part of their conversion from Feedburner to “Google” Feedburner, Google changed the location of their API. Thus, any plugins that used the old Feedburner API ceased functioning once that user’s account was successfully ported to Google.

The Solution

Long-term, the best solution would be for the plugin developers to update and release new versions of their plugins. But as of now, the Feed Count plugin has not been updated – and since it hasn’t seen an update since last July, I’m not going to hold my breath on a new version. So I decided to take matters into my own hands and edit my copy of the Feed Count plugin.

Note: this solution is specific to the Feed Count plugin, but any brave souls out there could probably modify and use this information to update other plugins as well.

I opened up my copy of the Feed Count plugin file (feedcount.php) and found this function:

function mapelli_fc_get_defaults() {
	return array(
			'map_fc_feedurl' => '',
		  'map_fc_queryurl' =>'http://api.feedburner.com/awareness/1.0/GetFeedData?uri=',
			'map_fc_lastcount' => 'N/A',
			'map_fc_lastupdate' => 0,
			'map_fc_updateinterval' => 60, // 1 h
	    'map_fc_error_updateinterval' => 5, // 5 min
		  );
}

This function mostly sets all the plugin defaults, but it also sets the “queryurl” – the website that the plugin hits to find your subscriber count information. This URL is not customizable anywhere inside Wordpress, and since this URL has now changed, we’re forced to edit the plugin itself.

All I had to do was change the “map_fc_queryurl” line to read this instead:

'map_fc_queryurl' =>'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=',

Then I saved the plugin, uploaded it to my server, and my stats started showing up again! However, it’d still recommend putting something like this JavaScript fix in place for those random times when Feedburner drops the ball (and your subscriber count).

Note: Your stats probably won’t start showing up again instantly. You’ll have to wait for the duration of your “update interval,” which can be configured in WordPress under Settings -> Feed Count:

feedcount update interval

If you’re using a different plugin and have run into this same problem, please give this solution a try and let people know in the comments if it worked. Thanks!

Fixing a Bad Feedburner Subscriber Count

feedburner errors

Google’s Feedburner is a fantastic service for managing RSS feeds and delivering useful statistics on those feeds, and they have a great API (application programming interface) for pulling those statistics and displaying them on your site. But lately, I’ve run into occasional problems getting at the information that Feedburner collects. Here’s the solution that I’ve developed for dealing with Feedburner’s flops.

I’m using Francesco Mapelli’s Feed Count Wordpress plugin to display the number of feed subscribers I’ve accrued. It’s a great little plugin that allows you to generate a custom message associated with your feed stats. For example, in the subscribe section of my sidebar, there’s a little message that, as I write this, reads, “Join 2449 other happy readers!” That’s the Feed Count plugin at work. I find it preferable to those little Feedburner “chicklets” that are scattered around the web these days.

But here’s the problem: when Feed Count makes a call to Feedburner to grab my latest subscriber stats, sometimes Feedburner drops the ball when it returns the number. Instead of returning the number of subscribers, it will sometimes return a “N/A” instead, suggesting Feedburner couldn’t find my stats, and resulting in a sentence that reads “Join N/A other happy readers!” Not quite the message I intended. And worse, sometimes Feedburner will return a big fat zero if it can’t find my stats — and “Join 0 happy readers!” is definitely not the impression I’m hoping to make on first-time visitors.

So what’s my solution? When in doubt, turn to JavaScript.

A JavaScript Solution

I first wrote this JavaScript solution in the last iteration of CSS Newbie when I finally got sick of being greeted every morning with my “not available” subscriber count:

$spans = document.getElementById('subbox').getElementsByTagName('span');
if($spans[4].innerHTML=="N/A" || $spans[4].innerHTML=="0") {
	$spans[4].innerHTML = "thousands of";
}

This solution relies heavily on the XHTML structure generated by the Feed Count plugin, but the concept could be edited to work with most any solution. Basically, I’m using JavaScript to find the 5th span (counting starts at 0) inside the #subbox id, which is the span generated by Feed Count that holds my subscriber count. The code checks the contents of that span, and if it finds one of the two dreaded values — N/A or 0 — it replaces that content with the phrase “thousands of” instead. It’s not as specific as I’d like, but it certainly gets the point across.

A jQuery Option

When I rebuilt CSS Newbie recently, I decided to upgrade this script to work with jQuery. I was already using jQuery for a few other effects on the page, so it made sense to cut down on the size of my code where available. Here’s the much smaller jQuery solution:

if($(".subscribers").html() == "N/A" || $(".subscribers").html() == "0") {
	$(".subscribers").html("thousands of");
}

This code does essentially the same as the JavaScript above but in fewer lines and, I personally think, with greater clarity. It looks for the contents of the element with the “.subscribers” class (which would have been an absolute bear to do with JavaScript due to the lack of a getElementsByClass function) and replaces it if it’s on our no-go list.

This is how I’ve gotten around the inconsistencies of the Feedburner API. If you have other solutions or ideas you’d like to share, I’d love to hear them in the comments!

20 Expert Wordpress Tips for Pro-Developers

Wordpress has been growing sensationally as the tool to use for Blogging. We’ve compiled a list of things that are good practice and you must do if you are a pro wordpress blogger or developer.

Writing/Blogging Workflow

Keep it updated. Publish it later. Keeping it updated can be a laborious, arduous task. In order to do something like this I highly recommend writing 2-3 articles at a time and publishing them later at another date.
Use Shortcodes. Shortcodes can save you a lot of time and provide you with text and bbedit type shortcuts. Using text like: [shortcode]. It replaces the need with formatting text and easily allows you to insert a template or snippet.
Editing offline? Use Google Gears to kick your writing abilities offline. While using Google Gears Turbo can write, edit things locally then sync them later.
Write posts via email: This is something people tend to forget about only because its such an unutilized feature. But with the ubiquity of smartphones it makes sense to write posts via email. (Thanks to @dmassad for the tip.)

Mobile Design

Do you have an iPhone? Wordpress.org is creating an iPhone application just for the iPhone to keep your blog updated
Update Wordpress by Text Message using Twitter Updater
iPhone themes for Wordpress: WP Touch , iWPTouch

Backing Up Data

Importing and Export Feature – Keep your posts backed up on your server as well as multiple different places.
Use the Backup Plugin to automatically

Wordpress with CMS Superpowers

Because of Wordpress’ very attractive backend. Using Wordpress seems like a very promising move. The following will make it happen:

Devlounge explores the pros and cons and possibilities of using Wordpress as a CMS. What to consider if you’re using Wordpress as a CM
Rewriting Wordpress Functions: WeFunction Explores the idea of using wordpress’ add_meta_box as a means of creating seperate custom fields. I warn you it doesn’t look very easy. The tutorial is very well documented though.
Flutter is very promising plugin that allows awesome features such as editing in place as well as allowing many different post types. Also covered and reviewed here.
Darren Hoyt discusses the client-web developer/designer problems with making Wordpress a CMS
How to “plan and think of Wordpress as a CMS”
CMS Plugins: Looking for plugins to make Wordpress a cms? Make sure you check out My Page Order , pageMash , Page Management Dropdown , PageRestrict, etc. (Source: Mashable)

Twitter Implementation

Wordpress Custom Theme Development

Use a Parent-Child Theme to rapidly jump-start theme development
Import Sample Content to help develop and refine your themes typography
Why reinvent the wheel when you can use a blank theme: found here , here , and a whole list of them here

Looking for examples of CSS in action? Well you have come to the right place. The examples are very crude but function perfectly. Take a peek at the source code to figure out how it was done. There is a lot to look through.

Read | Permalink | Email this | Linking Blogs | Comments

Advanced jQuery Tabbed Box Techniques

Last week’s article covered how to build a tabbed box interface, starting with Photoshop, and moving through XHTML and CSS to our basic jQuery functionality. If you missed it, I would highly recommend starting your reading there. This article will show you how to use jQuery to make your tabbed interface more attractive and interactive. Specifically, I’ll show you how to:

Make your tabs all the same height
Automatically rotate through your tabbed content
Stop the rotation when the user is interacting with the content

Equal Height Tabs

The tabbed interface we built last week was fully functional, but one nicety I’d like to add is the option to have all your tabs be the same height – a height that is determined by the content within the tabs, not any number I arbitrarily determine in advance.

While there are several ways to calculate and apply height in jQuery, the fastest and easiest means to our end would be to use the equalHeights jQuery plugin I developed and wrote about recently. By using that plugin, we’d only have to make a single addition to the “document ready” portion of our jQuery:

$(".tabbed-content").equalHeights();

This will cycle through all of our tabbed content divs and equalize their heights based on the height of the tallest div. The benefit of this is the content around our tabbed box won’t shift up or down each time the user switches tabs, resulting in a more pleasant visual experience.

Rotate Through Tabbed Content

While tabbed boxes like the one we’ve built are a great way to fit a large amount of content in a small space, they do have one drawback: many users never click through the tabs to see what all is offered, meaning they only ever see the content on the first tab. My proposed solution to this problem is to automatically rotate through the tabs.

This solution has two benefits: first, the movement is more likely to catch the users’ eyes, increasing the chances they’ll notice the tabbed box in the first place. Second, it allows your users to see all the content your box contains instead of just the first tab.

Making this adjustment to our jQuery requires edits in several areas, so I’ll show you the new code in its entirety before explaining what it all does:

var currentTab = 0;
var rotateSpeed = 5000;
var numTabs;.
var autoRotate;

function openTab(clickedTab) {
	var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
	$(".tabbed-box .tabs li a").removeClass("active");
	$(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
	$(".tabbed-box .tabbed-content").hide();
	$(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
	currentTab = thisTab;
}

function rotateTabs() {
	var nextTab = (currentTab == (numTabs - 1)) ? 0 : currentTab + 1;
	openTab($(".tabbed-box .tabs li a:eq("+nextTab+")"));
}

$(document).ready(function() {
	$(".tabbed-content").equalHeights();
	numTabs = $(".tabbed-box .tabs li a").length;

	$(".tabbed-box .tabs li a").click(function() {
		openTab($(this)); return false;
	});

	autoRotate = setInterval("rotateTabs()", rotateSpeed);
	$(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});

The first variable, currentTab, is unchanged from our first iteration. But then we’ve added three new variables:

rotateSpeed is the number of milliseconds to wait before switching tabs.
numTabs is a variable that will contain the total number of tabs in our box. We’re initializing it at the beginning so we can use it in all our functions.
autoRotate is a variable we’ll use later.

Our openTab function hasn’t changed. If you’d like to understand how it works, please refer to the first article.

Next we’ve written a new function called rotateTabs. This function will handle the math required to determine which tab should be opened next. First we set a new variable, nextTab. What we set nextTab to depends on which tab we’re on currently. The function looks at currentTab: if currentTab is our last tab in the list, it starts back over at the beginning (the tab with an index of 0). Otherwise, nextTab is simply the next tab in the list. Once we’ve determined our next tab, we call the openTab function, which prevents us from having to duplicate all that heavy lifting.

We’ve added two lines to our document ready function. The first sets the numTabs variable to be the number of tabs in our box. We don’t populate this variable until the document is ready, because otherwise it will try to count the tabs before our tabs have loaded and will return a length of -1 (aka, none found).

The second bit we added is towards the end, where we set autoRotate. In autoRotate we’re calling the JavasScript setInterval function, which executes a piece of JavaScript on a regular interval. As we’ve written it, we will be calling our autoRotate function every “rotateSpeed” milliseconds. This means that when our document loads, it will wait that many milliseconds, then switch to the next tab, then pause again, then switch again infinitely.

Pretty neat, huh? You can see this functionality in action here.

Stopping the Rotation

Now, automatically rotating your tabs is a pretty awesome effect, but at some point you’re probably going to want that rotation to stop. Specifically, you don’t want your tabs switching when your users are interacting with them.

I tested several scenarios on when and how to stop the tabs from rotating before deciding on how I’m doing it here. It only requires editing a couple of lines from our document ready function:

$(document).ready(function() {
	$(".tabbed-content").equalHeights();
	numTabs = $(".tabbed-box .tabs li a").length;
	$(".tabbed-box .tabs li a").click(function() {
		openTab($(this)); return false;
	});
	$(".tabbed-box").mouseover(function(){clearInterval(autoRotate)})
	.mouseout(function(){autoRotate = setInterval("rotateTabs()", rotateSpeed)});

	$(".tabbed-box .tabs li a:eq("+currentTab+")").click()
	$(".tabbed-box").mouseout();

});

Here we’ve replaced our setInterval function with something a little more complex. We’re now using both setInterval and clearInterval (which stops setInterval), and we’re applying them when the user’s mouse interacts with our tabbed box.

Specifically, we’re letting the box auto-rotate whenever the mouse is nowhere near the box, and stopping the box from rotating whenever the mouse is over the box. This means that as long as the user has the mouse over the box, as if they were reading, or clicking through the tabs, or clicking on something inside one of our tabs, the tabs wouldn’t switch on them. But as soon as they’re done interacting with the box, it’ll switch back to its regular rotation.

This does require one extra line at the end of the script, to force a “mouseout” event on the tabbed box, which gets things rotating by default.

You can see our fully functional tabbed interface here. Give it a try: watch it rotate through, and then try interacting with the box a bit. You’ll see that the tabs don’t automatically move, as long as you’re actively engaged with the box.

And that’s that! I hope you’ve found this mini-series helpful, and I’d love to see how you’ve implemented this idea on your own websites. Drop me a line in the comments below if you do.

Running jQuery with Other Frameworks Via noConflict

While jQuery is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype, MooTools, Dojo and many others all have their own strengths, weaknesses, and devoted groupies.

Generally speaking, these frameworks all play well together — you can mix and match framework functionality to your heart’s content, as long as you don’t mind the additional overhead of loading several libraries simultaneously. So you have a calendar widget in jQuery that you love, but you’re already using Prototype to animate your navigation bar? Don’t be shy… use both!

Of course, every once in a while you can run in to problems when combining JS frameworks — particularly (in my experience) when combining jQuery and Prototype. Luckily, jQuery was kind enough to provide us with a workaround.

The Problem: Sharing Syntax

The most common compatibility problem stems from both jQuery and Prototype using the same shortcut syntax: namely, the $().doSomething syntax. Here’s a sample line of code in jQuery:

$('#myelement').addClass('active');

And the same functionality in Prototype:

$('myelement').addClassName('active');

Note the basic similarity? Both frameworks claim the dollar sign notation for themselves, which can wreak havoc on snippets of code dropped willy-nilly into a website. If your jQuery code is grabbed up by Prototype, things will stop working fast. And similarly, if your Prototype code is snagged by jQuery, not even the awesome power of jQuery will be enough to overcome the code confusion.

The Solution: noConflict Mode

But not to worry! jQuery has provided us with a workaround called “noConflict mode.”

By default, there are two equally correct ways to call a jQuery function — the dollar sign notation, and “jQuery” notation:

$('#myelement').show();
jQuery('#myelement').show();

Both of the lines above do exactly the same thing. However, most people use and prefer the dollar sign notation. Why? Probably because it’s shorter, and if web developers didn’t care about brevity in their code, they probably wouldn’t have used a framework in the first place.

Of course, just using the longer jQuery notation isn’t enough. If jQuery has already claimed the dollar sign for itself, any Prototype functionality relying on that notation will still be grabbed by jQuery.

This is where the noConflict function comes in handy. Simply run the following line after both Prototype and jQuery have been loaded:

jQuery.noConflict();

This will cause jQuery to give up the dollar-sign notation, allowing the other library to take it over. And you can still use your jQuery snippet, provided you change all instances of $() to jQuery().

Keeping it Short

The noConflict mode does have one other bit of functionality that I’ve found useful in some of my projects: you can select a different variable to use instead of the standard “jQuery”. The usage looks like this:

var $j = jQuery.noConflict();

Now in addition to using the default jQuery() notation, I can also use the shorter $j() notation. This allows me to avoid running into problems with other frameworks, while still enjoying almost the same conciseness in my code.

A Simple jQuery Stylesheet Switcher

There are lots of reasons you might want to offer your users more than one CSS file for your website:

You want to offer a “stylish” low-contrast and an easy-to-read high-contrast version of your site.
You have many low-vision readers and want to give them easy access to a customized stylesheet with a larger typeface.
Your site is schizophrenic and you want to be able to change the look quickly.

Whatever the reason, it’s amazingly easy to create a function that swaps between multiple stylesheets using jQuery.

The first step of course is to build several different CSS files, which we’ll then swap between. Once that is done, we can dive into the XHTML and jQuery that makes the magic happen.

The XHTML

First, we need to create a set of links that will allow the user to swap between CSS files. You can make this as simple or as fancy as you’d like. For the sake of brevity, my links are simple:

<ul id="nav">
	<li><a href="#" rel="/path/to/style1.css">Default CSS</a></li>
	<li><a href="#" rel="/path/to/style2.css">Larger Text</a></li>
	<li><a href="#" rel="/path/to/style3.css">Something Different</a></li>
</ul>

Here I have three links, each with a “rel” attribute indicating which CSS file the link will load. Technically, I could have just as easily put this information in the “href” attribute, but I didn’t want to for one specific reason: if the user has JavaScript disabled and the CSS file is listed in the href, then clicking the link will send the user to the CSS file directly (not loading it like we intended). But our way, if JS is disabled, the user gets nothing at all: which is certainly preferable to the less savory alternative.

The jQuery

Like I promised, the jQuery is really simple:

$(document).ready(function() {
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		return false;
	});
});

This function waits until the document is loaded (generally an important step when interacting with the DOM), then attaches a click function to each of our nav anchors. The function basically says, “when someone clicks on this link, replace the link (stylesheet) tag’s href attribute with the contents of this link’s rel attribute.” The “return false” at the end just stops the browser from trying to follow the link.

Of course, you might have to get more detailed if you have more than one link tag, for example, but that’s easily done by giving the link tag a class (”changeme,” for argument’s sake), and writing something like this:

$("link.changeme").attr("href",$(this).attr('rel'));

And while this stylesheet switcher is already complete, we might want to give it some memory: after all, your users might get annoyed if they have to switch their styles back to their preferences every time they visit your site. For that, we’ll need to set a cookie. And to make that easier, I’ll use the jQuery cookie plugin (which I’ve talked about previously when building a popout ad).

With the plugin loaded, we can modify our jQuery thusly:

$(document).ready(function() {
	if($.cookie("css")) {
		$("link").attr("href",$.cookie("css"));
	}
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
		return false;
	});
});

Now we have two statements. The first one checks as soon as the page is done loading to see if a cookie called “css” has been set. If so, it sets the stylesheet to be the one indicated in that cookie. Otherwise, it does nothing.

Our click function is much the same, except after we set the stylesheet, we also set a cookie. This cookie doesn’t expire for an entire year (and each time the user changes their stylesheet preferences, it would reset this timer), giving them a good 365 of CSS bliss.

Fine Tuning

There is one minor annoyance with this stylesheet switcher: there’s generally a flash of the “default” CSS when the user loads the page. That’s because the script waits until the document is “ready” before switching the link’s href. There is a way around this: moving the first “if” statement outside of the document ready function, like so:

if($.cookie("css")) {
	$("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
		return false;
	});
});

Generally speaking, you don’t want to run any jQuery until your document is ready. However, so long as your jQuery comes after your link tag in your document structure, like shown below, this shouldn’t be a major concern:

<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script>... your jQuery goes here...</script>

This means your jQuery will run before the document is done loading, and thus your link tag’s href will be swapped before your CSS has been applied. As I said before, it’s generally a bad idea to manipulate the DOM before document ready, but because we know the exact tag we want to manipulate and can place our jQuery below it in the DOM, we should be safe in this one specific instance.

Here’s an example if you would like to see this technique in action.

CSS Sticky Footer

If you are looking for a good pure CSS footer solution, look no further. CSS Sticky Footer works for over 50 Windows, Linux, and Mac-based browsers. Included in this list are the latest releases of Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.

CSS Sticky Footer is developed by Steve Hatcher, and is based on the Exploring Footers article from A List Apart, and takes suggestions from Cameron Adams’ footerStickAlt, and The Pure CSS Footer example from lwis.net. It applies a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. The clearfix also fixes problems that might occur if you are using floats to create two or three column layouts.

Far from being perfect, it does have its share of issues. The first one deals with margins, which can easily be solved by changing margins to padding instead. The second one deals with the use of relative font sizes such as % or em, something which many of the more advanced CSS gurus like me are very much fond of. The author suggests using px instead, which many find unacceptable.

To get started, check out the HowTo page for details on how to implement the CSS Sticky Footer.

Plugins That Make Wordpress Into A Company Intranet

Wordpress has become a great platform for a wide range of website needs. Originally designed for blogging it is now a common package for full fledged content management systems and even complete web based applications.

Now we even have great opportunities to use Wordpress as an internal communication and back office tool. With these assortments of plug-ins we can use our favorite open source software to improve our businesses, efficiency and offer more solutions to our clients.

Billing

If you are a freelancer or a small company you know how much time can be sucked up by managing your billing. This is a bit of a shame because the billing part of the job should be the most fun, it’s how you get paid! There are a lot of available paid solutions for billing, but they are all hosted on different websites and applications and are not as nice and neatly integrated as doing it through Wordpress. Luckily we have WP-Invoice, a full invoice creation and tracking system that integrates with Wordpress directly.

It features:

E-mail invoices to clients
Save client data
Payment processing options such as Authorize.net, Paypal, etc…
Archived invoices
Secure connection for viewing invoices

Download WP-Invoice

Contact Relationship Management

As your business grows the amount of clients, leads and strategic partners you have will also grow. It is time to throw out the Rolodex, get rid of your piles of business cards, there are better ways to manage your contacts. The newest solution would be using a Contact Relationship Management system or CRM. There are a wide range of different CRM solutions available (salesforce.com, highrise, etc…) however Wordpress can function as one with the simple installation of a plug-in!

WP-CRM features:

Associate an image with each contact.
Assign each contact to a company… or don’t.
Create a note history for each contact.
Clickable email and website links.
Google map contacts address.
Dial a phone number (works on cell phones with internet browsers).
Fully hcard / vcard compatible.

Download WP-CRM

Project Management

Still using a pen and paper to manage your projects? You might as well be using a sundial to check the time! Using software to manage and track your projects is a lot easier and more sophisticated. While there are plenty of good commercial solutions available, why not integrate it into Wordpress? That way it is easy to use, customizable and open source. With the simple installation of a plug-in you can:

Track clients
Track projects by client
Track tasks by project
Track time per task with dynamic timer like Harvest

Download WP-Project

Office Communication

Sometimes proper and adequate communication is the most important and most difficult aspects of running a larger company. There are all sorts of tools that attempt to correct and fix this problem, some of them more effective than others. The Wordpress team themselves encountered this issue and sought to find a solution that integrated into their beautiful piece of software. Hence Prologue was born - a twitter like tool that can run off of your web server.

Download Prologue

Newsletter & Notifications

Need to send news and updates to your employees? Maybe you want to do some e-mail marketing for your company? Rather than pay monthly or per e-mail using an overpriced and underachieving e-mail marketing solution just integrate it with Wordpress. There is a simple, effective and easy to use newsletter tool that will do everything you need and more.

Download the Newsletter Plugin

Calendar

Keep track of all the events and important milestones going on with your business by using a simple and easy to use calendar system. There are a handful of Wordpress plug-ins that let you create and manage calendars, I have had the best luck with WP-Calendar. If you want to get very fancy you could also have a members only calendar so that only employees and those with a login can see it.

Get SitePoint Books, Give to a Worthy Cause Advanced jQuery Tabbed Box Techniques

How to Fix WordPress Feedburner Plugins After Converting to Google Feedburner