Reading time: 6 minutes.
If you’re looking to add an interactive and fun feature to your WordPress site, a custom Wordle game might be the perfect solution. Wordle is a popular word puzzle game where players have six attempts to guess a five-letter word. This post will guide you through creating a custom Wordle game using HTML, CSS, and JavaScript, and integrating it into your WordPress page.
To take a look at the Custom Wordle game, go to this page: Custom Wordle
Step 1: Setting Up Your WordPress Page
To start, you’ll need to create or edit a WordPress page where the Wordle game will be hosted. Follow these steps:
- Log in to Your WordPress Admin Panel: Navigate to your WordPress admin panel by logging in with your credentials.
- Create or Edit a Page: Go to
Pagesin the left-hand menu and choose to add a new page or edit an existing one. This will be the page where your Wordle game will be embedded. - Add a Custom HTML Block: In the WordPress editor, add a new block by clicking the
+button and selectCustom HTML. This block allows you to insert HTML, CSS, and JavaScript code directly into your page.
Step 2: Inserting the Custom Wordle Code
Now, you’ll need to insert the custom Wordle game code into the HTML block you just created. Copy and paste the following code:
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin: 0;
padding-top: 20px;
background-color: #f0f0f0;
}
.wordle-container {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 50px);
grid-gap: 5px;
}
.tile {
width: 50px;
height: 50px;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
font-weight: bold;
text-transform: uppercase;
background-color: #fff;
}
.tile.correct {
background-color: green;
color: #fff;
border-color: green;
}
.tile.present {
background-color: orange;
color: #fff;
border-color: orange;
}
.tile.absent {
background-color: #ccc;
color: #fff;
border-color: #ccc;
}
.input-container {
margin-top: 20px;
}
.input-container input {
padding: 10px;
font-size: 1rem;
width: 200px;
margin-right: 10px;
}
.input-container button {
padding: 10px;
font-size: 1rem;
}
.message {
margin-top: 20px;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="wordle-container" id="wordle-container">
<div class="setup-container" id="setup-container">
<input type="text" id="custom-word" maxlength="5" placeholder="Enter a 5-letter word">
<button onclick="startGame()">Start Game</button>
</div>
<div class="grid" id="grid" style="display:none;"></div>
<div class="input-container" id="input-container" style="display:none;">
<input type="text" id="guess" maxlength="5" placeholder="Enter your guess">
<button onclick="submitGuess()">Submit</button>
</div>
<div class="message" id="message"></div>
</div>
<script>
let solution = '';
let attempts = 0;
function createGrid() {
const grid = document.getElementById('grid');
for (let i = 0; i < 6 * 5; i++) {
const tile = document.createElement('div');
tile.classList.add('tile');
grid.appendChild(tile);
}
document.getElementById('wordle-container').scrollIntoView({ behavior: 'smooth' });
}
function startGame() {
const customWord = document.getElementById('custom-word').value.toLowerCase();
if (customWord.length !== 5) {
alert('Please enter a 5-letter word');
return;
}
solution = customWord;
document.getElementById('setup-container').style.display = 'none';
document.getElementById('grid').style.display = 'grid';
document.getElementById('input-container').style.display = 'block';
createGrid();
}
function submitGuess() {
const guess = document.getElementById('guess').value.toLowerCase();
if (guess.length !== 5) {
alert('Please enter a 5-letter word');
return;
}
if (attempts >= 6) {
alert('No more attempts left');
return;
}
const row = attempts * 5;
const tiles = document.querySelectorAll('.tile');
for (let i = 0; i < 5; i++) {
const tile = tiles[row + i];
tile.textContent = guess[i];
if (guess[i] === solution[i]) {
tile.classList.add('correct');
} else if (solution.includes(guess[i])) {
tile.classList.add('present');
} else {
tile.classList.add('absent');
}
}
attempts++;
if (guess === solution) {
document.getElementById('message').textContent = 'Congratulations! You guessed the word!';
} else if (attempts >= 6) {
document.getElementById('message').textContent = `Sorry, you ran out of attempts. The word was "${solution}".`;
}
document.getElementById('guess').value = '';
}
</script>
</body>
</html>
Explanation of the Custom Wordle Code
This code creates a fully functional Wordle game, allowing users to enter a custom word before starting the game. Let’s break down the different parts of the code:
HTML Structure
The HTML structure includes several key elements:
- Container Divs: These contain the game elements, including the setup container for entering the custom word, the grid for displaying guesses, and the input container for entering guesses during the game.
- Input Fields and Buttons: These allow users to interact with the game, enter their custom word, and submit their guesses.
- Message Div: This displays messages to the user, such as congratulations or game-over messages.
CSS Styling
The CSS provides the styling for the Wordle game, including:
- Layout and Positioning: The body and container divs are styled to center the game elements and ensure they are properly aligned and spaced.
- Grid and Tiles: The grid is styled to display the game tiles in a 5×5 grid layout. Each tile is styled to have borders, font styling, and background colors that change based on whether the guessed letters are correct, present, or absent.
- Input and Message Styling: The input fields and buttons are styled to match the game’s overall design, and the message div is styled to display messages clearly.
JavaScript Functionality
The JavaScript provides the game logic and interactivity:
- Creating the Grid: The
createGridfunction dynamically creates the grid tiles when the game starts. - Starting the Game: The
startGamefunction handles the custom word input and initiates the game by hiding the setup container and displaying the game grid and input container. - Submitting Guesses: The
submitGuessfunction handles the user’s guesses, updating the grid tiles based on the correctness of the guessed letters, and displaying messages based on the game’s progress.
Customizing the Custom Wordle Game
You might want to customize the Wordle game further to fit your specific needs. Here are some tips:
- Change Styles: Modify the CSS to change the colors, font styles, or layout of the game elements.
- Add More Words: If you want to use a predefined set of words instead of allowing custom input, you can modify the JavaScript to include a larger word list and select a random word from that list.
- Add More Features: You can add additional features, such as a timer, score tracking, or hints, by extending the JavaScript functionality.
Adding the Custom Wordle Game to Your WordPress Site
Once you have customized the code to your liking, follow these steps to add it to your WordPress site:
- Copy the Code: Copy the entire code provided above.
- Create or Edit a Page: Log in to your WordPress admin panel and create a new page or edit an existing one.
- Add a Custom HTML Block: In the WordPress editor, add a new
Custom HTMLblock. - Paste the Code: Paste the copied code into the
Custom HTMLblock. - Save and Publish: Save your changes and publish the page. Your custom Wordle game should now be live on your WordPress site.
Conclusion
Creating a custom Wordle game for your WordPress page is a fun and engaging way to add interactive content to your site. By following the steps outlined in this post, you can create a fully functional Wordle game that allows users to enter a custom word and play directly on your page. Customize the game further to fit your specific needs and enjoy the added interactivity on your WordPress site.
Feel free to share your experiences and any additional customizations you make in the comments below. Happy coding!
