17 of 26

A big part of this blog is going to be posting code snippets from various languages so I needed to find a way to display code with syntax highlighting in WordPress posts.  Finding a WordPress plugin to display code was a bit overwhelming at first.  There are a lot of plugins out there that display code and do syntax highlighting and it was difficult to know which ones were any good and what versions of WordPress they would work on (some of the last modified dates were over a year ago).  Many of them require disabling the WSIWYG editor, which is annoying.

My searching brought me to this article that listed 12 plugins.  Unfortunately, I didn’t like the look of most of the plugins on the list and the one that I did try (WP-SynHighlight) didn’t work quite right under WordPress 2.8.  At this point I decided to see if I could figure out what StackOverflow uses since I really like the syntax highlighting there.  Turns out that they use Google’s Prettify and there’s a WordPress plugin implemented with it.  That plugin also did not work well under WordPress 2.8 (the posted version is from well over a year ago).

Not to be defeated, I continued my search and found a great article from someone who actually installed and tested 8 syntax highlighting plugins.  I went right to the top of the list and installed Syntax Highlighter Plus.  I installed it and it actually worked!  I’m not thrilled with the styling on the code snippets so I’ll probably tweak it a bit, but it looks solid and it works.

Here’s the list of languages that it supports:

* Bash — `bash`, `sh`
* C++ — `cpp`, `c`, `c++`
* C# — `c#`, `c-sharp`, `csharp`
* CSS — `css`
* Delphi — `delphi`, `pascal`
* Diff — `diff`
* Groovy — `groovy`
* Java — `java`
* JavaScript — `js`, `jscript`, `javascript`
* Perl — `perl`, `pl`
* PHP — `php`
* Plain text — `plain`, `text`
* Python — `py`, `python`
* Ruby — `rb`, `ruby`, `rails`, `ror`
* Scala — `scala`
* SQL — `sql`
* VB — `vb`, `vb.net`

* XML/HTML — `xml`, `html`, `xhtml`, `xslt`

If you are going to use Syntax Highlighter Plus then you’re also going to want to grab Visual Code Editor and this article explains why.  However, if you decide to use Visual Code Editor then you need to use version 0.18 of Syntax Highlighter Plus instead of the latest version.

Firefox addons are implemented using a combination of XUL, Mozilla’s proprietary XML based language, and Javascript.  For anyone who’s done development with HTML and Javascript, learning to write a Firefox addon is pretty straightforward.  All you need is a decent tutorial to get started.  Fortunately, finding tutorials on how to create addons for Firefox is pretty easy.  Some of the ones I found were pretty old, but as far as I could tell the information was still accurate. If you need to learn Javascript, there are plenty of tutorials over on W3Schools.  If you prefer books, I highly recommend David Flanagan’s Javascript: The Definitive Guide.

I decided to start with a tutorial from Mozilla which shows you how to create a classic “Hello World” program by displaying “Hello, World” in the browser’s status bar.   I went through the tutorial quickly and easily by following the exact steps that were outlined in the tutorial.  “Hello, World” showed up my the status bar without  a hitch.  The flaw with this tutorial is that it doesn’t show you how to make the addon actually do something, which is the topic of my next post.

Another useful article I found was this article on Lifehacker that gives some good tips for getting set up to develop Firefox addons.

Last fall I was looking for a way to make some additional income and my wife, whose career currently consists of writing online, pointed me toward eHow.  I’ve never been much of a writer but I thought I’d do ok with writing How-To articles about programming and other computer related topics.  I browsed around the site and found that most of the computer related content was just awful.  Almost all of it was poorly written, out of date, or just completely inaccurate.  I thought to myself “I can do better than this!”.

So in October I created an account and wrote a couple of articles about programming with WPF.  I got distracted with other things for a while the two articles earned next to nothing over the next six months.  In late April I decided to give it another shot and I’ve written 25 more articles since then.  I still haven’t earned much of anything, but from reading the eHow forums I’ve concluded that you really need to reach a critical mass of article count and a certain threshold of article age before you really start seeing any sort of real money.  Even just going from 2 articles to 27 over the course of two months I’ve noticed a significant acceleration in the rate that my earnings are increasing.  Of course, creating this blog has completely stalled my eHow article writing .

eHow writers earn money through some secret earnings algorithm that seems to be primarily based on people clicking ads on your articles.  The official eHow line is that the earnings are based on a variety of factors but the primary driver really seems to be  ad clicks.  Fortunately for me, computer related ads seem to do very well in terms of CPC (cost per click – the rate that advertisers pay for ad clicks).

The previous two paragraphs are background info for the topic of this post – tracking eHow earnings is a royal pain in the butt.  eHow gives you very limited data for your earnings.  For each article in your library, you are shown lifetime views and lifetime earnings.  The only other numbers you get are lifetime views for all articles and total earnings for the month.  This means that you have no way to track article views or earnings over time unless you manually record them every day.  To make matters worse, you can only see data for 10 articles at a time.  For a few days I tried tracking the earnings manually using a Firefox addon called TableTools to copy the earnings data and paste it into Excel.  That just sucked and I was determined to create a better way.

My first thought was to create a Windows application that could make HTTP requests to snag the earnings data since it would involve using technology that I was already familiar with.  I opened up Firebug and watched the HTTP traffic as I logged into eHow and viewed my earnings pages.  I immediately realized that trying to decipher all of the traffic to figure out what requests I’d need to make was going to be a total nightmare.

It then dawned on me that this might be a good thing to implement using a Firefox addon.  From my experience using other Firefox addons, I knew that they were capable of doing everything that I would need it to do.  Perfect!  I would get an opportunity to learn how to write Firefox addons, I would be creating something that I would want to use on a regular basis and something that other people would most certainly want to use.  I was sold – off to learn how to write a Firefox addon!

Every WordPress theme has one or more sidebars in it (in the case of this site, the sidebar is that gray section on the right hand side of the screen).  Sidebars contain widgets, which are modules that show specific types of information such as Archives, Links, or Categories.

The next step after choosing a theme is to configure these widgets.  This is done by going to the Appearance->Widgets screen.  You can drag and drop widgets in and out of the sidebar.  You can also reorder the widgets in the sidebar by dragging them around.  Most widgets have some sort of configurations settings (as show in the screenshot below).

One of the first things I wanted to do when I got my blog up and running was to pick a new theme. I had a few requirements that I wanted for my theme that really limited my choices. The first thing is that I wanted was a fluid layout that would resize the content to fit the viewer’s browser window. My monitor runs at a resolution of 1680×1050 and I get really annoyed at websites that run at a fixed width of around 800 pixels – it takes up less than half the width of my screen!  Another thing that I wanted was a horizontal menu just above the main content.  Finally, I wanted a theme that would display categories and tags for each post (surprisingly, not all themes do this).  Fortunately, I found one theme I liked that had all three.

WordPress makes it really easy to search for themes and install them.  From the Appearance menu, go to Themes.  There you will see the currently active theme along with a list of inactive installed themes.  You can activate, preview, or delete any of the inactive themes.  To install more themes, click on “Install Themes” at the upper right corner of the screen.  This will give you an interface where you can search for new themes.  I found the search functionality to be a bit clunky (you only get one page of “Recently Updated” themes) and the Feature Filter didn’t seem to work quite right.  I had better luck searching for themes on WordPress.org.  I would search there to find a theme that I liked and then enter the theme name into the search box on the “Install Themes” page of my website.  From there, it’s a single mouse click to install the theme.  Once it’s installed you can then activate it from the Appearance->Themes page.

Installing themes is easy – finding one you like is another matter

The first thing I did after installing WordPress and viewing my default blog page was to poke around in the WordPress configuration options to see if there was anything I wanted to change.  To do anything with WordPress, you go to the URL http://[your domain name]/wp-admin.  You will be prompted for the username and password that you set up during the WordPress installation.

When the browser loads the page, you will see a navigation menu on the left hand side.  The top section is what you use to generate and manage your content – Posts, Media, Links, Pages, and Comments.  The lower section has all of the configuration options.

WordPress Navigation Menu

Appearance is where you pick a theme and configure your widgets (I’ll cover this stuff in my next post).  Plugins is where you can add custom functionality (I haven’t added anything yet).  Users is where you manage users in case you want to have multiple people contributing to your blog.  Tools has more custom functionality that you can add (I haven’t touched this either).  Then there is Settings, where the bulk of your WordPress configuration is done.

The settings are all fairly self-explanatory and you’ll want to go through each one and configure it to your preference.  Personally, I didn’t touch many of the settings initially since I figured that the default behavior was probably good enough until I learned how things worked.  One thing that I would definitely recommend changing immediately is the Permalink settings.  You want to choose a link format that includes the post name because it makes your site much more SEO friendly.  I chose “Month and name” because I figured the odds of me having two posts with the same name in the same month were extremely slim.

Now that my domain was up and running, it was time to get WordPress installed so that I could create some actual content.  I feared that this step would be bit of a pain, but it really turned out to be very easy (thanks to a bit of guidance from my wife).  Near the bottom of the Host Gator Control Panel, there is a section called “Software / Services” and in that is an icon called “Fantasico De Luxe” which is a collection of scripts that it really easy to install various software packages (such as WordPress).

Fantastico!

Once I clicked on the Fantasico icon, I was brought to a page that listed a whole bunch of software packages available for installation.  Since I was only interested in WordPress for now, I clicked on “WordPress” under “Blogs” and then clicked on the “New Installation” link that appeared on the right hand side.

What can I install for you today?

After clicking on “New Installation”, I was prompted to enter a bunch of information:

WordPress Configuration Options

Here’s a rundown on what the options mean:

• Install in Directory:  This is where you want WordPress installed.  If you leave it blank then it will be installed in the root directory of your domain.  This means that when someone enters a URL of http://<yourdomain> they will see your blog.  This is almost always the desired behavior, so leave this field blank unless you specifically want different behavior.
• Admin access data:  This is a username and password that you will need to in order to administer your blog.
• Admin nickname:  This is what is shown when the blog software displays your name to users in things such as blog posts and comments.  You can change this later if you want to.
• Admin e-mail:  This is self-explanatory.
• Site name:  This is what appears on the header of your blog (in my case it’s “17 of 26″).
• Site description:  This is what appears just under the site name (”the world of programming and technology” for my blog).

I entered my information and hit “Install WordPress”.  The script prompted me a couple of times to verify information and then the installation was complete.  I typed “http://17of26.com” into my address bar and was greeted with the default WordPress theme and sample blog post.  I had a blog!  Pretty amazing considering that all I had to do was click the mouse a few times and type in a bit of information.

I have a blog!

The next step in the domain creation process was to log onto my web host and configure my domain.  With Host Gator, you do this by going to http://[your domain name]/cpanel.  This is pretty clearly explained in the registration email that they send you.

Upon logging in, I was greeted with a pleasant “Welcome New User” dialog box that asked me if I’d like help getting started.  Normally I’m one to skip this sort of hand holding in software applications, but in this case I was happy to let it help me since I had no idea what I needed to do.

Can I help you?  Sure, why not…

The wizard proceeded to walk me through a number of steps to do things such as choosing my language, setting up email accounts, and adjusting a number of important settings.  It did an excellent job of explaining everything that I needed to do.  It also gave a nice overview of the file and directory structure of the website and how to access your files.  I highly recommend going through the wizard to get started.  If you’re unsure of what you want to do with any steps then you can skip them for now and go back to them later.   You can run the wizard at any time from the Host Gator Control Panel.  Overall, I was very impressed with how user friendly the whole experience was (and I am not easily impressed when it comes user friendly experiences).

Next:  WordPress, Here I Come!

Thanks to my wife, I was off to DreamHost to register my domain name.  After using their tool to make sure that the domain name was available (phew!) I set up my account, gave them my credit card information, and created the domain.  I got a confirmation email that said “Your domain should be registered within 30 minutes, and you will receive another email confirmation when complete!”.  Sure enough, 10 minutes later I was notified of a successful registration.  Yay, I had my own domain!

Now the only thing left to do was to set the DNS information for the domain since I wasn’t also using DreamHost to host my domain.  However, before I could do that I needed to head over to Host Gator and set up my web hosting.  The process there was very simple as well.  I created an account, chose the hosting plan I wanted and gave them my credit card information.  Within a few minutes, I received a confirmation email telling me that my account was all set and they gave me the IP address and a temporary URL I could use to access my domain until DNS was properly resolving my domain name.  They also provided me with the DNS information that I needed to give to DreamHost.

Armed with the DNS information from Host Gator, I logged onto my DreamHost account and updated the information there.  DreamHost said it may take up to 24-48 hours for the DNS information to propagate.  Being the impatient person that I am, about an hour later I opened up my browser and typed in “17of26.com”.  It worked!  All I got was a blank HTML page because I hadn’t set anything up yet, but my domain was alive.

Next:  Configuring my Domain

The first step in creating this site was to decide on a domain name registrar and a web host.  Fortunately, my wife (who definitely does her research!)  has owned several domains for a while now so I just asked her who I should use.

For a domain name registrar, her answer was DreamHost.  Their registration fee is fairly standard ($9.95/year) and they offer a privacy service which hides your personal contact information from WHOIS queries.  This was definitely something I would want and is not offered by all registrars – I was (very easily) convinced.

When it came to the web host, my wife suggested Host Gator.  I did a quick comparison of their prices to DreamHost, and Host Gator was significantly cheaper.  A basic plan that hosts one domain is $4.95/month if you pre-pay for 3 years (per month costs are a bit higher for shorter terms).  They’re also currently having a 20% off summer sale if you sign up before August 1st.  I signed up for two years and with the 20% off I felt like I got a pretty darn good deal.

Next:  Creating 17of26.com