Publishing with WordPress

I have been frequently asked how this publishing method would work with WordPress (WP) blogging software. My principal response has been that the approach should work as expected with any publishing software since I don’t rely on anything specific to Blogger.com. Although that statement is entirely correct several people didn’t quite manage to do the WP integration. Naturally, that made me very curious and eager to try my hands at. Initially I had very little experience with WP but I came up to speed quickly and, now, I’m ready with a clear and affirmative answer to the WP community.

Before I start, I want to thank Toomas Römer for the inspiring work on his jsPgnViewer and especially the “WordPress Plug-in” which he developed. Without it, my solution would’ve taken much longer to see daylight.

Installing the plug-in

One of the many nice features of WP software is the support for the concept of plug-ins. Those can be used to extend the functionality of pretty much every aspect of the publishing process. In our case, the plug-in handles the post’s content (i.e. the body) and takes care of all the internal and specific to WP details.

The only downside of using plug-ins is that a blogger would need a file-level (FTP) access to the Web server in order to do the installation. Luckily, that’s not a big restriction in the WP's world because the software was meant to be used that way from the very beginning and many people already do so. An alternative would be to ask the site administrator to install the plug-in for you. One way or the other, here are the actual steps:

1. Download the WordPress plug-in's ZIP from the download page to the Webspace on your server.
2. Uncompress it into your server's folder "[WP install folder]/wp-content/plugins".
   Note: If your hosting provider supports it there may be a way of combining the first two steps.
3. To make sure that the folder was created in the right place locate the plug-in module
   at "[WP install folder]/wp-content/plugins/cvd-viewer/cvd-viewer.php"
4. Log in to the WP's administration interface, look under the Plugins section and click on the Installed option. On the "Manage Plugins" screen find the cvd-viewer plug-in and activate it.
5. The installation is complete.

Using the new feature

To try out the new functionality simply create a new post and copy/paste the following section into the post’s body:

<pgn id='oChessViewer' onload='makeChessApplet ( null );'>
[Event "4th FIDE Grand Prix"]
[Site "Nalchik RUS"]
[Date "2009.04.29"]
[Round "13"]
[White "Levon Aronian"]
[Black "Peter Leko"]
[Result "1-0"]
[WhiteElo "2754"]
[BlackElo "2751"]
[ECO "E55"]
[EventDate "2009.04.15"]
[PlyCount "107"]

1.d4 Nf6 2.c4 e6 3.Nc3 Bb4 4.e3 0-0 5.Bd3 d5 6.Nf3 c5 7.0-0 dxc4
8.Bxc4 Nbd7 9.Qe2 b6 10.Rd1 cxd4 11.exd4 Bxc3 12.bxc3 Bb7 13.Bb3 Qc7
14.c4 Rfe8 15.Bb2 Qf4 16.Qe3 Qf5 17.Ne1 b5 18.c5 Nd5 19.Qg3 Nf4
20.Rd2 Nf6 21.f3 N6h5 22.Qf2 Bd5 23.Bc2 Qg5 24.Kh1 Bc4 25.g3 Ng6
26.Ng2 Bd5 27.Ne3 Nf6 28.h4 Qh5 29.Nxd5 Nxd5 30.Re1 Red8 31.Rde2 Rab8
32.Bc1 h6 33.Kg2 Nc3 34.Re5 Nxe5 35.Rxe5 f5 36.Bb3 Nd5 37.Rxe6 Kh8
38.Qe1 Nf6 39.Qe5 Re8 40.c6 Rbc8 41.Qxb5 Qg6 42.h5 Qxh5 43.Bf4 a6
44.Qxa6 Nh7 45.c7 Ng5 46.Rxe8+ Qxe8 47.d5 Ra8 48.Qc4 Kh7 49.d6 Qe1
50.Qf1 Qe8 51.Qd3 Qd7 52.Qc4 Qe8 53.Bxg5 hxg5 54.Qg8+
1-0
</pgn>

The above is pretty straightforward and easy to understand except for the following two points:

• There is an id defined on the PGN tag which should always be present and contain the value of oChessViewer. It uniquely identifies the group of PGN tags that belong to our current plug-in and allows for future extensions. Also the ID is later inherited by the chess viewer (CV) object and can be used in your CSS to define a style that applies to each of the CV objects.
• There is a mandatory onload event handler which corresponds to this method's main Javascript entry point. The function call is easy to recognize when you look at any ready-to-publish CV section, e.g. The Result page of the "HTML Code Generator for Blogs". That's the place where all of the custom parameters and values will appear when you start using them.