How to show poker cards and playing cards in WordPress pages and posts by using Custom HTML block, CSS and JavaScript with SVG data for 52 playing cards and 1 back side.
What is SVG playing cards for WordPress?
SVG is short for scalable vector graphics, which is a standard graphics format for use in HTML. SVG graphics is defined and written in XML format. SVG is great for icons, logos, illustrations, games and similar applications, where sharpness should be retained in any scaling. Thus, SVG playing cards for WordPress can be used to illustrate card games or run card games.
Install JavaScript with SVG playing cards.
Download the JavaScript, that contains the SVG playing cards, from the CardMeister project on GitHub. There are two versions of the JavaScript, where one is 60 kb and the other is only 16 kb. Download is done by right clicking the RAW button. Save the JavaScript in the child theme.
Edit the header part of the child theme. Add the JavaScript within the <head> tags.
<script src="/wp-content/themes/example/js/cards.js"></script>
Prepare CSS in WordPress.
In the following example, CSS, that rotates and places playing cards as necessary, is added to a child theme or to the Custom CSS in Appearance in WordPress. Adjust as necessary for scaling on other media screen devices.
/* Rotate and place playing cards. */
card-t img { max-width: 100px; }
.card1 img { transform: rotate(-6deg); }
.card2 img { transform: rotate(6deg); margin-left: -80px; }
.space-player { padding-right: 25px; }
How to show poker player hole cards in WordPress.
In the following example, the poker player hole cards ace of spades and king of spades, also known as AsKs, are shown in WordPress by using the Custom HTML block.
<p> <card-t cid=As class=card1></card-t> <card-t cid=Ks class=card2></card-t> </p>
How to show poker flop, turn and river cards in WordPress.
In the following example, the flop, turn and river, also known as the community cards or the board, ace of spades, king of spades, six of hearts, six of diamonds and five of clubs, also known as AsKs6h6d6c, are shown in WordPress by using the Custom HTML block.
<p> <card-t cid=As></card-t> <card-t cid=Ks></card-t> <card-t cid=6h></card-t> <card-t cid=6d></card-t> <card-t cid=5c></card-t> </p>
How to show playing cards of a poker spot in WordPress.
In the following example, three players are playing the hole cards AcAd vs KhKd vs 6s5s on the board AsKs6h6d6c. This is shown in WordPress by using the Custom HTML block.
<p> <card-t cid=Ac class=card1></card-t> <card-t cid=Ad class=card2></card-t> <span class="space-player"></span> <card-t cid=Kh class=card1></card-t> <card-t cid=Kd class=card2></card-t> <span class="space-player"></span> <card-t cid=6s class=card1></card-t> <card-t cid=5s class=card2></card-t> </p> <p> <card-t cid=As></card-t> <card-t cid=Ks></card-t> <card-t cid=6h></card-t> <card-t cid=6d></card-t> <card-t cid=5c></card-t> </p>
It is safe to assume, that every player was all-in by the river.
More about playing cards in WordPress.
Read more about the features in the brilliant CardMeister project or the ChessMeister project by Danny Engelman. Also, a special thanks to Tripox for CSS.