Add Javascript to WordPress (youtube tutorial)

Adding a Javascript widget can make a WordPress site more interactive and engaging. The possibilities are endless from stock quotes to calculators and instant messaging. In this video we are adding a Javascript chessboard to WordPress using two different methods.

The code used in the tutorial

Standalone HTML

<html>
    <head>
        <link rel="stylesheet" href="assets/css/chessboard-1.0.0.min.css">
        <script type="text/javascript" src="assets/js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="assets/js/chessboard-1.0.0.min.js"></script>
    </head>
    <body>
        <div id="board" style="width: 400px">board</div>
        <script type="text/javascript">
            $(document).ready(() => {
                var config = {
                pieceTheme: 'assets/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
                draggable: true,
                };
                var board = Chessboard('board', config);
            });
        </script>
    </body>
</html>

code snippet

<?php
add_action( 'wp_head', function () { 
	if (is_front_page()) {?>
        <link rel="stylesheet" href="assets/css/chessboard-1.0.0.min.css">
        <script type="text/javascript" src="assets/js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="assets/js/chessboard-1.0.0.min.js"></script>
<?php } } );

add_action( 'wp_footer', function () { 
	if (is_front_page()) {?>
	
		<script>
            $(document).ready(() => {
                var config = {
                pieceTheme: 'assets/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
                draggable: true,
                };
                var board = Chessboard('board', config);
            });
		</script>
<?php } } );

Leave a comment Cancel reply