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.

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!