The question that I’m asked most often when I talk to people about open source software is “Who pays for all this?” as well as variants like “Then how do they make money?” or “Won’t people eventually stop working for free?” We live in a capitalistic society, and people don’t understand why someone would work for free when they could be making money. In this article, I’m not going to cling to ideals on why doing something for the community shows more worth than your bank account balance, instead I’m going to explain how open source developers (myself included) do in fact make money by developing quality software for free. Hopefully in the process you will find a way to give back to the community and get your piece of the pie.

How can I make money from Open Source Software?

There’s more than one approach to making money from free software. Companies like Trolltech and MySQL AB use a dual-license approach, where they retain ownership of their code and offer it with an open source GPL license and a more traditional license. Why would someone pay for a product they can get for free? The top reason is usually support. Companies, especially the big ones, want to use software that has a company standing behind it. A company they can go to with questions and even hold responsible if something breaks. The second reason, one that is more specific to these companies that use the dual-license approach, is actually the license itself. If a company wants to include the MySQL database into a traditional closed-source project, one they hope to sell, they can’t legally do that with the GPL’d version. Instead they must purchase the alternative license. These “second generation” open source companies are bridging the gap between open and closed source. It’s a fine line to walk, and I’m not saying that either company i mentioned is a shining example of what this kind of company could be, but there is no ignoring the fact that these companies profit from open source software which also benefits the community.

Another way to make some profit from open source can clearly be seen in companies like Zend Technologies. The company was founded by Zeev Suraski and Andi Gutmans, who are very well known for their contributions to the PHP programming language. Zend Technologies develops products relating to the development, deployment and management of business critical PHP based web applications. They have proprietary tools that they sell, such as Zend Platform, Zend Guard, and the amazing Zend Studio. So how do they contribute to open source, and how does it benefit them? Well, their company is built around PHP, an open source language. It’s in their best interest to make sure PHP is the best it can be, and as such they contribute huge amounts of code to the PHP project, in turn helping the PHP community, even those that don’t use their products. They also release things like the Zend Framework, a high quality open source PHP framework, which can drastically reduce project development time, increase portability of code, and ease the process of creating an MVC application in PHP. Again, this helps to increase the number of programmers that use PHP, which increases their customer base. No licensing strings attached, just a mutually beneficial relationship.

Then there are companies like Automattic. Automattic is built around WordPress, an open source project that I happen to be quite interested in, since a decent portion of Xavisys’s work is done on WordPress. They run WordPress.com, but have diversified their income, making money from upgrades, VIP hosting, ads, Akismet licensing, and enterprise services. WordPress.com uses the WordPress software, so when Automattic’s developers commit code to WordPress, it helps their company, but also benefits the rest of us that use WordPress. So why don’t they stop doing this, and keep the code to themselves? Well, because while they help me, I also help them. When I see a problem with WordPress, I submit a patch to fix it. When I see a feature that I would like, I submit the code to add it. In the end, they make my software better, and I make their software better. It’s mutually beneficial. I think a lot of other industries, and even other sections of this industry, should learn to embrace of this kind of symbiotic relationship.

So you see that large companies can turn open source into monetary gain, but what about you? What about the smaller developer? I’d like to respectfully submit my last case study, Xavisys. A company that I happen to know quite well. I don’t help the community for monetary gain, I do it because I think that community is extremely important to the well being of the human race. I think that people who are involved in their community make the world a better place to be, and I want to be one of those people. However, even though it’s not the reason I contribute to the community, I do reap the benefits. One of the difficulties of being a development company is that there is so much competition, it can be hard to be noticed. You might be twice as good as the next guy, but if no one knows about your company and the services it offers, you’re out of luck. Not too long ago, I started releasing all my WordPress plugins into the WordPress.org repository. I gave a bunch of code away for free. The most popular one (WP Google Analytics) has only been up for 19 days, and has been downloaded 2,635 times. It feels good that so many people are benefiting from something I wrote, but how am I benefiting? Well, since I started releasing my plugins, traffic to my site has tripled. I don’t run any ads, so I’m not making anything off the traffic itself, but I’m getting more paid jobs from people who are already confident in my abilities because they use some of my plugins. These people are easier to sell my services to, because they are already convinced that I’m up to the task.

What does this mean? Look for something mutually beneficial. A way that you can help others and in turn they help you. No exploitation, a symbiotic give and take. Now that you know it’s possible, wouldn’t you rather make money that way?

Building a company is hard work, but I’ve decided to draw a line in the sand. Xavisys is going to be a great company because I stand behind it, and I’m an upstanding, honest person that you can get to know.

The term “Marketing strategy” sounds like a group of people in a back room, devising ways to fool you, the consumer, into buying whatever they offer. It gives the impression that trickery or underhanded tactics are being used. I want to blow that out of the water. There are plenty of great businesses out there that have great people standing behind them. Rackspace gives me an account representative that actually answers the phone when I call, and works to get any issue (even the minor ones) resolved as quickly as possible. Not exactly status quo with hosting companies, but it should be. My good friend James Pearson has a socially proactive business called Acholi Beads, and I would be able to guarantee it was great even if I knew nothing about it except that he stands behind it. That’s the kind of business I like to deal with, and that’s the kind of business Xavisys is, and will continue to be.

There are other places out there where you can take your web development work. There are other places that have a thorough knowledge of WordPress customization and plugin development. There are even other people out there with years of real world experience. While I have all that, and am confident that Xavisys can stand on technical merit alone, that’s not why you should use Xavisys. You should use it because I’m active in my community (online and off), and have people who will speak to my character. You should use it because it’s a family owned and operated company, and my wife Christen and I personally guarantee you will never be charged more hours than were really worked, and that corners won’t be cut that will cost you in the long run. You should use it because you know that it’s named after my son Xavier, and I want it to be an example of how he should live, not how much he should make.

That’s my commitment, not at the expense of quality work, but in addition to it. It’s a high standard, and if you ever think I’m not living up to it, let me know.

I asked James if he might help me with work out a marketing strategy for Xavisys, and the first thing he asked for was a white board (preferably a few). I may not be creative, but I know the advantages of having space to scribble as you work out problems. Along the way however, I’ve gotten rid of the white board, in favor of my glass desk. I keep a collection of dry erase markers and Vis-A-Vis markers at my desk, and whenever I need to write something down, I grab one and write it right on my desk. Dry erase markers are for very short-term things, since moving things around on the desk can often erase what you’ve written. The Vis-A-Vis markers on the other hand stay just fine, until they get wet, which is perfect, because they can be cleaned off with a damp paper towel. Since it’s not very cool to cram a bunch of people around my desk in my office, I got out the markers, and we started marking up some windows in my house.

We started by talking about what Xavisys does, the mundane list of services rendered. Soon we were talking about what made Xavisys stand apart from other companies. Then, as we wrapped up the boring summation, things really stared to happen. James and Steve started spouting ideas at break neck speed. Nothing was thrown out or ignored, only built upon. I enjoy improv comedy and used to be part of a group that performed and I’ve even taught improv techniques. We had an exercise called “yes and” which taught players how to take ideas and run with them, rather than ignore them. Basically, you could not say no, or turn down any idea offered, instead you answered “yes and ____,” adding your own twist to the scene in progress. This was that game.

This method produces plenty of bad ideas. Among the tag lines that were later thrown out were phrases like “Enslave the Internet”, “Funk Shun” and “Make the internet your pool boy!” What amazed me, was that after a relatively short time, small nuggets of gold began to emerge from the dross, phrases like “Interface with the world” and “Take control of the internet.” All leading to the one diamond in the rough, “Control Your Internet.”

First I touched on the topic in my first impressions of WordPress 2.5. Then I whined a little about the tickets relating to them, and eventually I released my Google Maps Plugin that uses them. In the end, WordPress’s new shortcodes are really nice.

What are they?

First of all, a shortcode called “mycode” can look like any of these:

[mycode]
[mycode foo="bar" id="123" color="red" something="data"]
[mycode]Some Content[/mycode]
[mycode]<p><a href="http://example.com/">HTML Content</a></p>[/mycode]
[mycode]Content [another-shotcode] more content[/mycode]
[mycode foo="bar" id="123"]Some Content[/mycode]
 

How can I use them?

You want to leverage the new, powerful shortcode system in WordPress 2.5, but where do you start?

First of all, you need to add your shortcode:

add_shortcode('mycode', 'yourFunction');

To handle default attributes, you can use shortcode_atts($defaultsArray, $attributesArray):

 
function yourFunction ($attr, $content) {
    $attr = shortcode_atts(array('foo'   => 'bar',
                                 'id'    => '',
                                 'color' => 'blue'), $attr);
    return '<h2>Attributes</h2><pre>' . print_r($attr, true) . '</pre><h2>content</h2>' . $content;
}

That’s it! That’s why they are so great, it takes next to nothing to handle! However, maybe you’re thinking about a relatively complex way to use these, and you want to take it to the next level.

The Next Level

Maybe you’re worried that you’re users won’t grasp the intricacies of your shortcodes, or will be plagued by typos. It’s a valid concern. For example, I don’t want to assume that my users will be able to create a Google map by flawlessly entering:

[googleMap width="100%" height="400" name="Aero Rental - Phoenix" directions_to="true" directions_from="true"]3432 W. Clarendon, 85017[/googleMap]

The solution is to create a way for your users to generate the shortcodes and have them sent to the editor, but where to start? First, you need to add a meta box to the writing/editing pages (these are the dropdown boxes below the editor, such as Tags, Categories, etc). To do this, create a function that you will use to display the form used to generate your shortcode (I’m going to call it “insertForm”). Then you need to hook into the admin_menu action, and use it to create the metaboxes:

 
<?php
function handleAdminMenu() {
    // You have to add one to the "post" writing/editing page, and one to the "page" writing/editing page
    add_meta_box('yourMetaBoxID', 'Your Meta Box Title', 'insertForm', 'post', 'normal');
    add_meta_box('yourMetaBoxID', 'Your Meta Box Title', 'insertForm', 'page', 'normal');
}
 
function insertForm() {
?>
        <table class="form-table">
            <tr valign="top">
                <th scope="row"><label for="wpYourPluginName_content"><?php _e('Tag Content:')?></label></th>
                <td>
                    <input type="text" size="40" style="width:95%;" name="wpYourPluginName[content]" id="wpYourPluginName_content" />
                </td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="wpYourPluginName_foo"><?php _e('Foo Attribute:')?></label></th>
                <td>
                    <input type="text" size="40" style="width:95%;" name="wpYourPluginName[foo]" id="wpYourPluginName_foo" />
                </td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="wpYourPluginName_bar"><?php _e('Bar Attribute:')?></label></th>
                <td>
                    <input type="text" size="40" style="width:95%;" name="wpYourPluginName[bar]" id="wpYourPluginName_bar" />
                </td>
            </tr>
        </table>
        <p class="submit">
            <input type="button" onclick="return wpYourPluginAdmin.sendToEditor(this.form);" value="<?php _e('Send Map to Editor &raquo;'); ?>" />
        </p>
<?php
}
 
function adminHead () {
    if ($GLOBALS['editing']) {
        wp_enqueue_script('wpYourPluginNameAdmin', 'path/to/yourJsFile.js', array('jquery'), '1.0.0');
    }
}
 
add_action('admin_menu', 'handleAdminMenu');
add_filter('admin_print_scripts', 'adminHead');
?>
 

You may have noticed that the submit button calls some javascript (specifically wpYourPluginAdmin.sendToEditor(this.form)), and we enqueue a JavaScript file. Here is that file:

/**
 * Handle: wpYourPluginNameAdmin
 * Version: 0.0.1
 * Deps: jquery
 * Enqueue: true
 */
 
var wpYourPluginNameAdmin = function () {}
 
wpYourPluginNameAdmin.prototype = {
    options           : {},
    generateShortCode : function() {
        var content = this['options']['content'];
        delete this['options']['content'];
 
        var attrs = '';
        jQuery.each(this['options'], function(name, value){
            if (value != '') {
                attrs += ' ' + name + '="' + value + '"';
            }
        });
        return '[googleMap' + attrs + ']' + content + '[/googleMap]'
    },
    sendToEditor      : function(f) {
        var collection = jQuery(f).find("input[id^=wpYourPluginName]:not(input:checkbox),input[id^=wpYourPluginName]:checkbox:checked");
        var $this = this;
        collection.each(function () {
            var name = this.name.substring(13, this.name.length-1);
            $this['options'][name] = this.value;
        });
        send_to_editor(this.generateShortCode());
        return false;
    }
}
 
var wpYourPluginAdmin = new wpYourPluginNameAdmin();

This JavaScript parses items from the form, formats a shortcode, and sends it to the editor! Now you can create an interface for your user, to allow to easily generate VALID shortcodes for you to parse.

Warning: This plugin was affected by Trac ticket 6444, which was fixed in WordPress 2.5.1, so get 2.5.1!

The Google Maps for WordPress plugin allows you to easily insert Google maps into your blog, making use of the new shortCode system in WordPress 2.5. The maps can be configured to offer directions to or from the location, show or hide the zoom/pan controls, show/hide map type, activate zoom using mouse wheel, and more.

It requires a Google Maps API key, and then gives you a nice interface near your editor to help you build the map and send it to the editor.

My latest plugin is a sidebar widget that handles Twitter feeds. It’s true that you could just point and RSS widget at one of the Twitter feeds, but you end up with the whole tweet (I honestly don’t know what they are called) as a link, @replies don’t function, etc. Twitter Widget Pro properly handles twitter feeds, including @username and link parsing, feeds that include friends or just one user, and can even display profile images for the users. It’s set up like the RSS widgets, so you can have as many of as you want on your sidebars.

I currently have my twitter feed in the right sidebar, showing the last five tweets, and Kevin Rose’s feed (with friends) in the left sidebar, showing profile images along with each of the last 10 tweets.

I tried to make everything easily styled, so there are no built-in styles. If you don’t know exactly what you need, here is what I’m using on this site:

/**
 * Twitter Widget
 */
.widget_twitter li {
	clear:both;
}
.widget_twitter li img {
	float:left;
	margin-right:.5em;
}
.widget_twitter li .clear {
	clear:both;
}

Changelog

04/23/2008: 1.1.0

• Most major fix is the inclusion of json_decode.php for users that don’t have json_decode() which was added in PHP 5.2.0
• Fixed problem with displaying a useless li when profile images aren’t displayed on a single user widget
• Default title is now set to “Twitter: UserName”

04/17/2008: 1.0.0

• Released to wordpress.org repository

04/14/2008: 0.0.3

• Fixed some of the settings used with Snoopy
• Set a read timeout for fetching the files

04/14/2008: Version 0.0.2

• Changed some function names
• Moved form display to a separate function (_showForm)
• Now uses wp_parse_args to handle defaults
• Added comments to the code
• Added seconds to the _timeSince function so you can have something like “about 25 seconds ago”

Writing Posts

The first thing that stuck out to me (and that I had been waiting for) was the tag suggest feature. Simply start typing a tag, and an auto-suggest feature will give you a dropdown of existing tags to choose from. Before, it was too easy to end up with tags like “web development” and “webdevelopment” since you had to remember them (no one actually looks them up).

This brings me to the new way media is managed/added. I haven’t had the need to add videos or sounds to my site, so I’ll stick to the images. In the end, I like the new way it works. The Flash uploader is nice, and the addition of a medium option for each image (thumbnail, medium, full size) is a welcome change. However, nice as it is, there is one thing about it that is REALLY annoying. Full size isn’t actually full size. It’s 500px wide! What’s the point of calling it “full size” and then not making it “full size!” If they want small, medium, and large, they should call it that (although I still think there should be a full size option). There is however a simple solution. You can set $content_width inside your theme’s functions.php file, and it will use that instead of 500 for the max width. I set mine to 1024:

<?php $content_width = 1024; ?>

The last thing I wanted to mention, which is very minor, but annoyed me, is that you can’t resize the editor window when in HTML mode. I almost always use HTML mode, and I thought they had removed the ability to resize the text area. as it turns out, you need to switch to the visual editor, resize it, and switch back.

Admin Layout

I don’t like static width layouts. Have dual screens that both run at 1680×1050, and I run my browser full-screen because that’s the way I like it. My laptop runs at 1920×1200, and I even run full-screen on that. Instead of having more room to work, I am rewarded with more than 40% of my screen wasted as blank white space. Having said this, I’ve seen far worse layouts, and it’s fairly intuitive. You can expect plenty of plugins to fix this. Right now (as I’m typing this), what I have done is use firebug to inspect the HTML, found div#wrap, and altered the style by removing max-width:980px;. This seems to work fine for me.

Plugin API

For me, this is the most exciting change. I love the new shortCodes. They are a little rough around the edges, but they are extremely handy. As a matter of fact, I just finished a Google Maps Plugin that uses the shortCodes. It generates a shortCode based on the settings a user chooses, and insert it into the editor. It later handles those shortCodes by changing them out for a Google Map. Unfortunately it relies on the ticket referenced above, so I’ll release it once that gets figured out.

Summary

WordPress 2.5 is definitely a big step forward. It has some small inconsistencies, which I expect to be easily fixed in upcoming minor releases, but nothing that should keep you from upgrading. Go try it and tell me what you think.

map.enableScrollWheelZoom();

However, as great of a product as it is, it seems to be lacking some things. For example, if I want an info window that gives the options to get directions to or from that location, I have to do all that myself. I have to generate the links, and make them replace the content of the info window with a form that I have to make, and I have to make that form run some JavaScript when executed to get the directions. Why? This has GOT to be a common task. Why not build it into the API? However, in the end, that pales in comparison to the real problem. There is no way to validate a Google Maps API key! Instead, you have to load JavaScript using that key, and it uses an alert to announce that the key was bad! No one wants a JavaScript alert to pop up on their page! Since I’m making a WordPress plugin out of this (teaser!), I needed to make sure that the users of my plugin wouldn’t have this issue. I ended up having to override the alert function on the options page for my plugin like this:

var KillAlerts = true;
var realAlert = alert;
var alert = new Function('a', 'if(!KillAlerts){realAlert(a)}');

function load()
{
    // Re-anable alerts
    KillAlerts = false;
 
    if (GBrowserIsCompatible()) {
        // Key is valid
    } else {
        if (G_INCOMPAT) {
            // Key is NOT valid.
        } else {
            // Can't tell if the Google API Key is valid, due to the browser not being compatible with the Google Maps API.
        }
    }
}

I just converted Minimalist to a WordPress theme, and uploaded it here for anyone that wants it. I was lazy, so it defaults to green/grey with content to the left. If you want to use a different combination, edit the header.php file to use whatever css files you want (all are included). I also included a contact page template, but again was a little lazy, so you will need to edit contact.php and put your contact info on lines 73-75, as well as your E-Mail address on line 17. The only other real changes that were made was styling for comments (as well as unique styling for admin comments), and I added a pencil icon to use for “editing” (it’s still image free for your users).