April 30, 2009

Publishing with WordPress

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.

23 comments:

 
author CMoB
authorUrl http://chessmasterorbust.wordpress.com/
adminClass blog-admin pid-1400871938
data:comment.favicon 
CMoB said...

I was wondering... Have you ever thought of flash instead of java? And is it at all possible to turn your viewer into a flash object?

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

Funny that you should ask. A while ago I wrote an article that explains it Chess Viewers are not created equal.
I’m yet to see a viewer based on Flash player that would perform reasonably.
My very first test is always Dos Hermanas '99 “Judit vs. Anand” game from this page Using the Chess Viewer Applet. If a viewer parses the PGN correctly and displays all the annotations and variations I can move to more serous testing. If not, I can move to more serous viewers.

 
author CMoB
authorUrl https://www.blogger.com/profile/05705038287957131369
adminClass blog-admin pid-353799517
data:comment.favicon 
CMoB said...

Hi Nikolai, how about this one in terms of reasonable?

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

The only thing that matters is what you think. Everybody has different requirements and the best product for you is the one that meets your requirements. I already gave you plenty of pointers and it’s up to you to use those that matter to you.
If you have questions about CVD with WP integration I’d be glad to help. I thought you were interested in publishing with WP.

 
author CMoB
authorUrl https://www.blogger.com/profile/05705038287957131369
adminClass blog-admin 
data:comment.favicon 
CMoB said...
This comment has been removed by the author.
 
author CMoB
authorUrl https://www.blogger.com/profile/05705038287957131369
adminClass blog-admin pid-353799517
data:comment.favicon 
CMoB said...

Look my friend, all i wanted to know was if the flash possiblity exsisted with the viewer you created. Which, if you would really like to know, is my personal favourite. Flash or no flash. And i just thought you would be interested as a developer in seeing that website i refered to as an example, as you said yourself you had yet to see one that worked reasonably. Anyway, i have allready decided to switch to blogger so WP is not an issue anymore. WP is too restricted for free users. Not just in the case of a chess viewer.

 
author Anonymous
authorUrl 
adminClass blog-admin pid-1026313021
data:comment.favicon 
Anonymous said...

Hello,
Thanks for your pluggin its wonderful.
I try to publih some chess games on my blog using it and its very nice.
I have a small problem of size and I cant find if it's possible to change it.
May I have some help? Thanks

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

You are welcome, Anon
Congratulations on being the first one to try it out.
Can you provide a link where we can see your results?

If your problem with size is related to blog’s layout I suggest you look into numerous themes available for WP. For example, one called “1024px” worked great for me.

 
author The-Cat
authorUrl https://www.blogger.com/profile/00767308875176545737
adminClass blog-admin pid-1687273354
data:comment.favicon 
The-Cat said...

Thanks for your rush reply.
Swineflu have got me out of order for a few days.
Back to the game and to the blog
You can see it on http://baabou.free.fr
It's just a test at the moment and your welcome for any suggestion

 
author Diego Costa Garrido
authorUrl https://www.blogger.com/profile/06417027674487735578
adminClass blog-admin 
data:comment.favicon 
Diego Costa Garrido said...
This comment has been removed by the author.
 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

Very good job, The-Cat
I can see your blog and these two pages Mes parties préférées and Match Karpov-Kasparov à Valence where you posted several games. It all looks great, so you must have figured everything out including the blog’s theme.
Congratulations!

 
author David
authorUrl http://chessclub.com.au
adminClass blog-admin pid-28897125
data:comment.favicon 
David said...

Is it possible to reference a PGN file rather than paste the text of the PGN into the post?

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

No problem, David
I just double checked and the following CV section works just fine.

<pgn onload='makeChessApplet ( "http://www.chesstoday.net/issues/CT-1106.pgn" );' id='oChessViewer'></pgn>

I hope you have a good reason to prefer doing it that way. Including the PGN inside the post body has a huge advantage of being very easy to edit/modify after publishing. One way or the other you can always use the “HTML Code Generator for Blogs” and get the formatted CV section at the end. A very little modification is still needed to make it WP compliant by enclosing it inside a pair of PGN tags. One day, when there’s a demand for WP support, I might include a new option so that the CV section is directly formatted for WP. That might streamline the publishing even further but the flexibility and easy of use are already available.

Happy New Year

 
author c4d4e4f4
authorUrl https://www.blogger.com/profile/00636685817778706851
adminClass blog-admin pid-1821793421
data:comment.favicon 
c4d4e4f4 said...

Hello Mr.Nikolai Pilafov.It's me again..Sam, still remember? since my last comment on using your great piece of work CVD on Weebly.This time I would like to share my trial on WordPress CVD Plug-in.It's a nice experience for me.Thanks again for your guidance that contributes to my chess world i.e we could share the enjoyment games of chess.
I did follow your steps and have a look at this link:http://mindacatur.xlphp.net/?p=32
Drop me further comments if my posting has lack of some technique of your expertise.Sorry for my bad english as I'm non-native english background.Till another comments..See you again..BRAVO NIKOLAI..CVD!

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

Hey Sam, Well done again!
Of course I remember you and I’m already referring other people to your site on Weebly. And now you impress us with your WP skills. Here is your link again MindaCatur (just one click away). I like the cool theme/layout you’re using.
I also like the way you experiment with various chess publishing methods. Maybe when you’re done you can share your overall experience and name some of the pros and cons that you came across.

Keep blogging

 
author Sam
authorUrl http://www.mindacatur.com
adminClass blog-admin pid-1794957034
data:comment.favicon 
Sam said...

Hi Mr Nikolai! Sam's here.It's been long time since my last comments about this topic.FYI,I'm now using hosted domain on which I publish my
http://www.mindacatur.com.Still, I find that your CVD is my top priority to present chess games to readers out there.Further,your CVD plug-in for Wordpress is very useful for me.I put a link to your blog as full credit must be given to your effort.Thanks again for your advice.Regards..Sam.

 
author 17ChessClub
authorUrl https://www.blogger.com/profile/16088928666089245412
adminClass blog-admin pid-1674799183
data:comment.favicon 
17ChessClub said...

Hi Mr Nikolai...

May I ask you a question...I couldn't see you plug-in listed on WordPress Plugin Repository..or am i overlooking that..? why is it so..? I really need your plug-in badly to post my chessgames on my wordpress blog. I hope that you will response to this as soon as possible..thanks..

your plug-in looks great for chess-publishing!

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

Hi 17ChessClub/Sam,
If you need the plug-in so badly -- just go ahead and use it. Several people are already using it. In the download you will find the plug-in’s source code and (if you like) you can see how the integration between WP and CVD is done. It’s as clear as it gets and the WP’s repository of plug-ins would give you very little extra.

I would have done it long ago if not for their special text-based requirements which every plug-in’s documentation needs to follow.
Maybe one day if (or when) I have the time I will register it properly. What is the biggest advantage in doing it from your point of view?

 
author varun
authorUrl https://www.blogger.com/profile/15175135203348857763
adminClass blog-admin pid-1548097207
data:comment.favicon 
varun said...

Thanks for the wonderful plug-in.

Does anybody know how to display a certain position in the game when the chessviewer applet loads?

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

Hi varun,
Every puzzle is, in fact, a certain staring position. You can also present a whole game like this A mid-game position example .

Keep in mind that the new starting position is exactly that -- a starting position. You cannot play the game backwards from there.

 
author Carlos Luis Pujol
authorUrl https://www.blogger.com/profile/10296492929147010145
adminClass blog-admin pid-1769414904
data:comment.favicon 
Carlos Luis Pujol said...

Hi,

I'm using wordpress, but the html editor "swallows" the initial and the ending tags, and the games don't show up. What should I do?

 
author Nikolai Pilafov
authorUrl https://www.blogger.com/profile/00695284688005658187
adminClass blog-admin pid-8567400
data:comment.favicon 
Nikolai Pilafov said...

Hi Carlos,
I haven’t used WP for a while and I suspect they may have improved the editor. Isn’t there some “raw HTML” option/tab/format? If nothing else, there should be a setting that allows compatible (with previous versions) behavior. I don’t know when I’m going to have time to play with the latest WP.

Please, let us know if you find something

 
author jessica
authorUrl https://www.blogger.com/profile/09851477413321919270
adminClass blog-admin pid-613075719
data:comment.favicon 
jessica said...

Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us.School web design uk