wordpress.org blog platform integration

• through the pgn4web wordpress.org plugin embed-chessboard
• through a generic plugin enabling iframes

A wordpress.org based site can integrate the pgn4web chessboard in either of two ways:

The pgn4web test wordpress site provides an implementation example (this is a test site, things might occasionally be broken).

using the pgn4web embed-chessboard plugin

The pgn4web wordpress.org plugin embed-chessboard is available from the pgn4web downloads and from the wordpress.org plugin directory.

screenshot

integration guidelines

The following instructions refer to the latest version of the plugin, please check the download section.

Recommended installation method is from the plugins section of the administration pages of your site, searching for the "Embed Chessboard" plugin.

As described with more details in the README file within the plugin, the plugin allows for a shortcode tag to display chess games, like this:

[pgn parameter=value ...] 
... chess games in PGN format ...
[/pgn]

Shortcode tag parameters:

• layout=horizontal|vertical
• height=auto|number
• showMoves=figurine|text|puzzle|hidden
• initialGame=first|last|random|number
• initialVariation=number
• initialHalfmove=start|end|random|comment|number
• autoplayMode=game|loop|none

Example:

[pgn height=500 initialHalfmove=16 autoplayMode=none]

[Event "World championship"]
[Site "Moscow URS"]
[Date "1985.10.15"]
[Round "16"]
[White "Karpov"]
[Black "Kasparov"]
[Result "0-1"]

1. e4 c5 2. Nf3 e6 3. d4 cxd4 4. Nxd4 Nc6 5. Nb5 d6 6. c4 Nf6 7. N1c3 a6 8.
Na3 d5 9. cxd5 exd5 10. exd5 Nb4 11. Be2 Bc5 12. O-O O-O 13. Bf3 Bf5 14.
Bg5 Re8 15. Qd2 b5 16. Rad1 Nd3 17. Nab1 h6 18. Bh4 b4 19. Na4 Bd6 20. Bg3
Rc8 21. b3 g5 22. Bxd6 Qxd6 23. g3 Nd7 24. Bg2 Qf6 25. a3 a5 26. axb4 axb4
27. Qa2 Bg6 28. d6 g4 29. Qd2 Kg7 30. f3 Qxd6 31. fxg4 Qd4+ 32. Kh1 Nf6 33.
Rf4 Ne4 34. Qxd3 Nf2+ 35. Rxf2 Bxd3 36. Rfd2 Qe3 37. Rxd3 Rc1 38. Nb2 Qf2
39. Nd2 Rxd1+ 40. Nxd1 Re1+ 0-1

[/pgn]

When using the gutenberg editor, please add shortcodes as shortcodes blocks in guntenberg.

Please note the submenu within the administrator settings menu, allowing the site administrator to configure the horizontal or vertical position of the header/moves text respect to the chessboard, to match colors to the site template and to control the game autostart behavior at page load.

Other chessboard settings have been fixed in the plugin; if you really need to change those settings, the plugin code needs to be modified, look in file embedchessboard.php at the parameters passed to board.html and refer to the board widget instructions wiki page or ask for support. Please also note the plugin package has only one set of bitmaps, if you want to change bitmaps type/size you can find the whole set in the main pgn4web package.

advanced parameters

The settings of the advanced parameters section of the plugin should normally be left blank, improper values will break the chessboard display.

Please note that the wordpress template might alter the appearance of the pgn4web board widget, in particular the width of the chessboard. If this happens, the advanced settings section of the administrator page provides the option of setting the CSS style for the HTML DIV container of the plugin frame. The content of this parameter is directly copied in the style attribute of the DIV container and must comply with the CSS syntax. For instance, to force a fixed width to the chessboard frame, the CSS style for the HTML DIV container could be set to:

width:500px;

Please leave the advanced parameter blank unless you have a problem with the template and you know what you are doing.

In addition, the chessboard object is controlled using the chessboard-wrapper css style that as a last resort you can tweak to your needs.

caveats

• the plugin requires that the "wordpress address (URL)" and the "blog address (URL)" in the wordpress general settings belong to the exact same domain; for instance having the former as "http://www.example.com/wordpress_files" and the latter as "http://example.com/wordpress_blog" (without the "www.") would break the plugin; domains should be either both "www.example.com" or both "example.com" regardless of any redirection.
• HTML tags are stripped from the PGN data, removing all text between < and > characters; please make sure your PGN data does not contain < and > characters.
• some site administrator, deploying the embed-chessboard plugin in conjunction with cache functionality (either the default wordpress object cache or a more sophisticated plugin) reported the occasional need to clear the cache while upgrading/reconfiguring the embed-chessboard plugin. Actual method of cleaning the wordpress cache depends on the used caching mechanism.
• depending on the wordpress theme in use, the category/tags view might not show the entire post but only an excerpt. Also depending on the theme, the excerpt might get stripped from HTML tags. The embed-chessboard plugin uses the <textarea> and the <iframe> tags, hence the chessboard display might get broken when in category/tags view. Some themes allows for configuring the excerpt, for instance the atahualpa theme allows specifying which HTML tags should not be stripped from excerpts. By preserving the <p>, <textarea> and <iframe> tags then the chessboard is properly displayed in the category/tags view. Please check the behavior of your theme if the pgn4web chessboard is not displayed correctly when in category/tags view.

using a generic plugin enabling iframes

Several plugin enabling iframes are available, such as the embed iframes plugin. For instance, the iframe plugin could be used in a blog post with the URL from the pgn4web board generator tool as the iframe URL. This is a less straightforward (requires using the board generator tool) but more flexible option (easier to modify colors and layout).