Opening Training

In this tutorial, we will show you how to use the tactics feature of WordPressChess to show an opening trainer at your WordPress chess site.

Step 1 – Import pgn

The first step is to import an eco pgn into our WordPressChess site. You can find eco.pgn at

dhtmlchess.com/api/pgn/eco.pgn

In your wp admin, go to DHTML Chess->import pgn.

Browse and find your eco.pgn file and select it

You can give it a name if you want, otherwise it will be named “eco”, i.e. file name of the pgn without the “.eco” file extension.

Now, click “Import”. This process will take a few seconds while WordPressChess imports the games into the database. Once it’s finished you will see a message like this:

Take note of the ID attribute(ID:8). We will use that for our short code. If you forget the id, no worry, you can find it in your game editor.

Step 2 Add a new Post

We are now ready to create a new post where we will show our opening trainer. Insert the following shortcode where you want the board to appear

[chess db="8" tactics="1" random="1" heading_tpl="Opening: {site} {white}" width="60%" float="right"]

Let's walk through this

• We use the [chess] shortcode. This is the shortcode when we want to show games from the database.
• db="8" tells WordPressChess to pull games from the database with id 8, i.e. the id of our newly uploaded eco.pgn.
• tactics=1" is set to enable drag and drop
• random=1 is set to pull random games from the database, i.e. not in sequence.
• heading_tpl is a template string for the heading above the board. If you open the eco.pgn file in a text editor, you will see lines like the ones below.

  [Site "A00"]
  [White "Benko's Opening"]
  
  1. g3

  Here we see that every game has the metadata site and white. We want to use these attibutes in our heading, and we can use that with placeholders{}. The heading_tpl above heading_tpl="Opening: {site} {white}" will for the game below be rendered as "Opening: A00 Benko's Opening".

• width="60%" to make the resize the board to 60% on large screens. Default is 100%
• float="right" to position the board on the right side.

The final result

In the WordPress Posts editor, I have placed the [chess] tag for this board above this text paragraph.

Since it has float="right", these paragraphs will appear on the left hand side of the board. Just a trick to have in mind. The same rule applies for both float="left" and float="right".