Using SyntaxHighlighter to Format Code in WordPress

Based on a question in the StackOverflow beta site, I did some quick research into what are the best ways to perform syntax highlighting on code that is posted on blogs. Among the methods that were suggested (by myself or others):

  1. Hack together your own display logic to format it as you see fit
  2. Use the SyntaxHighlighter JavaScript library
  3. Use Windows Live Writer with the Insert Code plugin (I discuss that here)
  4. For WordPress, use the WP-Syntax plugin

Coincidentally, I had heard Scott Hanselman talking about how he does code formatting just a couple of days ago, in Hanselminutes #125, where he described how he posted code on his blog by putting it inside <pre></pre> tags, adding specific name and class attributes, and letting some JavaScript library do the formatting work. So I went to his blog, opened up a post with some code, and found my way to the SyntaxHighlighter JavaScript library. This is a very nifty library that handles formatting very nicely for a number of popular programming and scripting languages, and seemed to have a very easy implementation. So I decided to implement it for formatting code on my site.
Continue reading

Mint Popular Posts Release 1.0

I just posted the files for release 1.0 of the Mint Popular Posts plugin.

I am calling it 1.0 (instead of 0.97 which had been the next sequential release number) since this is adding some nice, shiny functionality (options panel in admin to control caching and external DB, widget-capable) and since the initial release was over a year and a half ago and it is about time that it comes out of “beta”. (And since the version numbers are basically arbitrary, it doesn’t really matter anyways).

Special thanks for Ernie Oporto for his contributions of the bulk of the widget and options code.

Trying out Windows Live Writer

In honor of its officially coming out of beta, I decided to download and try out Windows Live Writer.

Some of the features that attracted me are the ability to use one interface to publish on a number of different blogs at the same time, through a desktop client, without having to log in and out of different admin sites (I currently write or contribute to 4-5 different WordPress blogs with varying degrees of frequency, and the ability to post from one place makes it much easier to add content to different sites).

I was also curious to see how well Microsoft has gotten one of their products to interact with software of non-MS origin (and with PHP open source systems like WordPress). Compared with others, Microsoft very often seems to have a hard time opening up their products to others (just look at the new Live email vs. Gmail: Gmail lets you forward your email anywhere, and retrieve your email through any program using POP or IMAP, while Live email only lets you forward to an email address that is part of another Microsoft domain, like msn.com, hotmail.com, but other than that gives no options to extracting your email automatically outside of the Microsoft servers).

Here are some things worth noting so far:

Download and Setup: Easy and painless. Install went quickly. I entered the url for my homepage, my username and password. The software automatically determined that I was using WordPress, downloaded theme information and set itself up. From when I clicked download, I was ready to write to my blog using Live Writer in less than 10 minutes.

Web Preview: ellisweb-livewriterA very handy feature, allowing you to preview your post within your current blog theme. It actually did a very decent job of rendering the post the way it should (judging by Firefox). (This is in Web Preview mode, giving you a read-only snapshot of how your page would look. The Web Layout view mode however did not work so well for me. From what I gather, this is supposed to let you compose your post inside your blog theme. In my case, it put the title of my post inside the header, making it impossible to see what I was typing.

The Basic Stuff: Hyperlinks, pictures, trackbacks, basic editing functions – all of it works well, and is pretty easy to figure out. Though this is not something that will make a product shine in the market (even spell check is common nowadays, both in Firefox and WordPress), lack of these features (or a bad implementation) will kill a product from the get-go. (One WordPress caveat: although WLW includes native support for different tagging systems, it does not yet allow you to post tags to WordPress 2.3+. There are workarounds for this.)

Plugins: Although WordPress features a very powerful plugin system, it is most often used to improve the output of your blog, not the UI for entering posts. WLW plugins on the other hand are all centered on helping you get different types of data easily into your posts. I see this (as well as the automatic connectivity to different blogging systems and accounts) as the feature that will make this product really stand out. So far I have installed two different plugins (automatically replacing text formatting methods that I had previously had to code into my template, css and html):

Insert Code:

public static string HelloWorld() {
  string s = "Hello World";
  return s.ToUpper();
}

(Note: I first tried using the Insert Source Code Snippet plugin, but this was buggy and added a whole bunch of superfluous brackets. Afterwards I looked some more and found the Insert Code plugin by shahineo – easy to use and as you can see, produces some nice output).

Insert LTR Text:

זה יעזור לי הרבה לכתוב בעברית בבלוג שלי

All things considered, I am pretty satisfied with my first experience using Windows Live Writer. If you are reading this, it means that the post was also successfully posted to my blog through the interface (yay!). I think that I will be making it my primary blogging platform over the next couple of months. Now, if only I could use this to post to Newsvine…

Blog Updates

Done:

  1. Upgraded WordPress to 2.3.1
  2. Upgraded all out of date plugins
  3. Changed my theme (new theme: Big Blue). Customized new theme with the usual plugins.
  4. Added new plugins to right sidebar:
    • Twitter Tools by Alex King (displays my most recent “Tweets”, allows me to post to Twitter directly from my blog)
    • Added widget to display my most recent items shared through Google Reader. I am currently subscribed to 334 different feeds, and read hundreds of posts a day. These are the ones that I feel are worth sharing.

Still to do:

  • Convert old tags into new WordPress Tags
  • Get rid of categories
  • Try to start posting consistently again

Setting up a Customized Blog in 7 Easy Steps

When a person chooses to create a new blog, there are two routes to choose from: you can use one of the popular hosted blogging services (like Blogger or WordPress.com) or you host the blog yourself. The first option is definitely the easiest – someone else worries about all of the blog setup, database issues and hosting. You just put up the content. The second option however gives you more flexibility and control over the domain name, blogging software, plugins, advertising and template customization. However, when you set up the blog yourself, you become responsible for all aspects of its operation, a somewhat daunting proposition.

A couple of days ago I created a blog from scratch (Telecommuterer.com). I would like to review all of the different steps that went in to this. All told, it took about two hours to go from nothing to a fully functioning blog with initial content posted. Though it is more difficult than using a hosted blog service, I think that if you would like to use your blog for anything more than casual use and you are up to the task, in the end it is worth it to invest a little bit of time and money in setting up the blog by yourself.

I am assuming here that you already have the concept for the blog in place and a general idea of the types of content you would like to host. I will describe the process using blogging software from WordPress.org as I think it is the best free software available for the task (with easy setup, great plugin and community support).

  1. Get a Domain Name – Get a domain name for your blog. I use Go Daddy for all of my domain name purchases (though there are thousands of other providers that can do the same for you). For Search Engine Optimization (SEO) reasons, the shorter the domain name, and the closer it is connected to the main topic of your site, the better. If your first choices are taken, there are several services that will take your keywords and return a list of available names that might be good, like DomainsBot, DomainTools and DomainIt.
  2. Set Up Hosting – Set up your hosting for the website. The main requirements are that that you use LAMP (Linux, Apache, MySQL, PHP) based hosting. There are thousands of services out there that will do this for less than $15 per month. If you are using a service that is not well known, I highly recommend checking out their reputation on the web before using them. I personally use MediaTemples (gs) GridServer service and DreamHost for my personal and client sites and would have no reservations recommending them to others.
  3. Connect Your Domain – Set up a new Website at your webhost (they should have instructions on how to do this). Your host will give you their NameServer (or DNS) information. (This normally takes the form of something like ns1.hostname.com and/or an IP address). Take this information and go to the site where you bought your domain. On this site, in your domain management, change the Nameservers (or DNS settings) of the domain name to that which was given to you by your Web Host. After you do this, your domain name will now be connected to your website that is hosted on the servers of your Web Host.
  4. Install WordPress – Many hosting services have tools that will do this automatically via server-side scripting. If that is available and they offer it with the most recent version of WordPress (currently 2.2), go for it. Otherwise, you can do it yourself in a few easy steps
    1. Download the most recent version of WordPress
    2. Extract the files from the zip or tar.gz file onto your computer. Upload them to your web host servers using FTP
    3. Using phpMyAdmin or whatever other database control interface your web host provides, set up a new mySql database for your site.
    4. Follow the rest of the instructions on the WordPress 5 Minute Install page (it really does take just five minutes)

    After going to the /wp-admin/install.php page on your site and following the instructions there, you should have a working WordPress blog set up on your domain name with the default template in place (and absolutely no content). Log into your admin section (you may want to bookmark the page at /wp-admin/ on your site), go to the Options section (and its different subsections) to set up your blog settings as you would like (don’t forget to set Permalinks if you have the capability and want to use them to create nice-looking urls for your posts.

    Now the real fun begins.

  5. Set Up the Theme – If you are a real web-design pro and an expert with WordPress who can design their own theme from scratch, this doesn’t apply to you (and you don’t need to read any of this anyway). Otherwise, you should pick a theme for your site. There are hundreds of free WordPress themes out there to choose from. I recommend starting at the WordPress Themes viewer. It allows you access to test-drive hundreds of free themes and you can search based on features of the theme, layout options, etc. If it is too overwhelming, try filtering by theme features, using the list of most-downloaded themes (on the side of this page) or some of the themes featured here. When you have chosen a theme, download it to your computer and upload the files to your /wp-content/themes folder on your site. Go to the WordPress Admin > Presentation, and select your new theme.
  6. Customize the Theme – If you are scared of CSS and HTML and are completely satisfied with the way that the theme works, you can skip this step. Otherwise, it is advisable to go into your theme files and customize sections of it. This is done to differentiate the look and feel of your site from other sites that may be using the same theme, as well as to change the locations and look of elements of the theme to suit your specific needs.Any customization work that you will do will take place in the different theme files, found in /wp-content/themes/theme_name/. The files that you are most likely to change are header.php, footer.php, sidebar.php, index.php and single.php for content and styles.css for style changes. You can read about the different types of theme files, how they work, template tags and pages, customizing templates and more on the WordPress Codex and Support forums.The potential for changes is practically endless. To give some ideas of things to change here is a list of changes that I made on my new site
    • I changed made the font size larger for all content text
    • Removed “sponsor links” on the theme that were pointing to indecent sites (see Matt’s essay on this for more info)
    • Changed the RSS links to Feedburner feeds, added an Email subscription link (through Feedburner). Moved these links to higher on the page
    • Changed some of the default, hard-coded text on the page
    • Added some tags that had been left-out by the theme author (go to next page/post, etc)
    • Changed the format and information displayed in the post info section on both the main page and the single post page
    • Added links to stats tracking services (I use both StatCounter and Google Analytics)

    Some other things you might want to change in the theme to really change the look of it is the header image, background colors, link colors and other visual elements. As you are changing the template files, upload them to your site to check on how your changes look and make sure that you haven’t broken anything.

  7. Set up Plugins – As with the previous step, if you are completely satisfied with every aspect of your blog performance, you can skip this step (just remember to enable the Akismet anti-spam plugin that is included with the software). However, it is worth exploring the world of plugins if there is anything that you want to on your site that is not included by default or with the standard template tags. To set up any plugin, download its files, upload them to the /wp-content/plugins/ directory on your site, follow any specific directions that may be given with the plugin, go to the Plugins page in your site and enable the plugin. Some plugins work automatically in the background, some will require you to add tags to your template files (they should give instruction on how to do this).Plugins are hosted all over the internet, often on their author’s websites, and sometimes in centralized repositories. If you are in need of specific functionality, try searching for it (using keywords “[functionality] wordpress plugin” should give you some results if the plugin exists). Otherwise, try looking in some of the online repositories to get an idea of what is out there. Here is a list of the plugins that I used on my new site:

    Plugins can add lots of powerful functionality and totally change the way that you use your blog. They are one of the strongest features of WordPress and I highly recommend taking a look at what they have to offer.

You are now done setting up your blog (though as you use it more, you may decide to change are the template some more and add more plugins). Now all that’s left to do is to start adding content. Good luck!

Upgrading WordPress through Shell

I was very proud of myself for upgrading from WordPress 2.1 to 2.1.1 within a few days after it was released. At least until I read about the entire 2.1.1 release having been compromised to some hacker. Even though I had probably downloaded the new WordPress build before it was compromised, better not to take chances, right? Still, downloading the files, unzipping and FTPing them back up is annoying, especially when you have to do it for multiple sites.

That is why I am very thankful that I saw this: Upgrading WordPress via Shell.  I am a Windows guy without so much *nix scripting experience. Still if this could work, it would be a big time saver.

Fast forward 10 minutes. I enabled shell access with to my hosting account, logged in using PuTTY, went to the proper directory, ran the commands (very carefully), repeated for a second blog. Two blogs upgraded to 2.1.2 in 10 minutes, very little pain (awesome). (Oh yeah, and don’t forget to do a backup before running any scripts in your hosting account, or messing around with WordPress in any way. You have been warned).