In WordPressChess PRO, version 1.0.86, you have access to a new position editor from the WordPress text editor.
To access it, create or edit a post in your WordPress admin. Click the Chess short code button
From the fen tab, you now have access to a new button:
You also have two new text fields, one for arrows and one for highlighted squares. You can enter values here manually, but you can also use the new position editor to have this values set automatically for you.
Click the new Button to open the Position Editor. The first time, the dialog may take a few seconds to load, since it needs to load some JS and CSS files.
This is how the position editor looks like.
Clear the board
To clear the board, click the “Clear board” button at the bottom. This will remove all pieces from the board.
To set the standard start position, click the “Reset board” button.
Add and remove pieces
To add and remove pieces, select a piece from the palette next to the board, example a white pawn. Then click on the squares on the board where you want this piece to be added.
If you want to remove a piece from the board, example a white pawn from e4, first select the white pawn from the palette, then click on the square e4.
You can send the position back to the previous dialog by clicking the “OK” button. This button will only be available/enabled when the position of the board is valid. For example: if a king is missing, you will not be able to click the OK button.
To highlight squares, select a color from the left color palette below the board. Then click on the squares you want to highlight with this color.
You can clear highlighted squares by clicking twice on the square.
There are some preset colors to choose from. You can also set your own colors by clicking on the empty boxes(bottom line). This will show you a dialog where you can enter a color code in the format #RRGGBB(Red, Green, Blue).
Arrows can be added by selecting a color from the palette to the right. To add an arrow to the board, press the mouse down on the square where the arrow should start. Then drag the arrow to the destination square. Release the mouse button to finish.
You can also set other fen options like castling, side to move, moves played and en passant using the input boxes.
The text editor also implements Stockfish JS, which you can use to analyse the position you have on your board. Click the Analysis Tab to open the Analysis Panel.
The analysis panel is the same as you have in the online game editor. You click the “Start” button at the bottom to start Stockfish JS. Stockfish JS is 3MB large, so it may take a few seconds before the engine starts analysing the position.
Here’s an example of a FEN created using this new dialog:
Editing an existing short code
From version 1.0.86, you can also edit existing existing short codes in your posts. Example: Place the cursor inside a [fen]...[/fen] tag and click the toolbar button. The chess dialog will automatically be populated with the data from your FEN short code. This also works for the [pgn] and [chess] short codes.