Published on

How to Add Konami Code to WordPress Site Using JavaScript


The title of this article is a big giveaway to people who know what the Konami code is, so I guess I should make this intro as short as possible so we can quickly dive in and learn how to add Konami Code to WordPress Site using JavaScript. First appeared in the video game Gradius back in May 29, 1985, the Konami Code is a set of keystrokes that when pressed in the following order will enable a cheat in the game:

<kbd></kbd> <kbd></kbd> <kbd></kbd> <kbd></kbd> <kbd></kbd> <kbd></kbd> <kbd></kbd> <kbd></kbd> <kbd>B</kbd> <kbd>A</kbd>

The Konami code appeared in many of the video games made by the Japanese entertainment company.

For example:

  • Contra
  • Silent Hill 3
  • Teenage Mutant Ninja Turtles
  • Metal Gear Rising: Revengeance

In non-Konami games such as:

  • Assassin's Creed III (Ubisoft Montreal)
  • Half-Life 2 (Valve Corporation)
  • Plants vs. Zombies (PopCap)
  • Resident Evil 2 (Capcom)

And in movies, like Wreck-It Ralph:

wreck_it_ralph konami code
View full res image

But that's not all, this code can also be added to your website:

  • MacStories
  • Digg
  • Reddit (Must have the RES Extension installed)
  • And of course, here at News47ell. Duh.

Now buckle up, because the game is about to begin.

How to Add Konami Code to WordPress Site Using JavaScript

The JavaScript code snippet provided below originally written by Wolfgang Stöttinger over at stackoverflow

Let's dive right in:

Step 1:

Create a set of folders and sub-folders that look similar to the one described below and follow the same structure:

1**KonamiCodePlugin** 2KonamiCodePlugin.php 3**Assets** 4**JS** 5KonamiCode.js

Step 2:

Paste this code inside KonamiCodePlugin.php:

1<?php 2/* 3Plugin Name: Konami Code for WordPress 4Description: Code for Adding Konami Code in WordPress 5Version: 1.0 6Author: Ahmet ALMAZ 7Author URI: 8*/ 9// Register Script 10function Konami_Code_scripts() 11{ 12 wp_enqueue_script('KonamiCodeJS', plugin_dir_url(__FILE__) . 'assets/js/KonamiCode.js', array( 13 'jquery' 14 )); 15} 16add_action('wp_enqueue_scripts', 'Konami_Code_scripts'); 17?>

Step 3:

Paste this code inside KonamiCode.js:

1// a key map of allowed keys 2var allowedKeys = { 3 37: 'left', 4 38: 'up', 5 39: 'right', 6 40: 'down', 7 65: 'a', 8 66: 'b', 9} 10// the 'official' Konami Code sequence 11var konamiCode = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'] 12// a variable to remember the 'position' the user has reached so far. 13var konamiCodePosition = 0 14// add keydown event listener 15document.addEventListener('keydown', function (e) { 16 // get the value of the key code from the key map 17 var key = allowedKeys[e.keyCode] 18 // get the value of the required key from the konami code 19 var requiredKey = konamiCode[konamiCodePosition] 20 // compare the key with the required key 21 if (key == requiredKey) { 22 // move to the next key in the konami code sequence 23 konamiCodePosition++ 24 // if the last key is reached, activate cheats 25 if (konamiCodePosition == konamiCode.length) activateCheats() 26 } else konamiCodePosition = 0 27}) 28function activateCheats() { 29 = "url('images/cheatBackground.png')" 30 var audio = new Audio('audio/pling.mp3') 31 32 alert('cheats activated') 33}

.Zip the KonamiCodePlugin folder and upload it to your WordPress site as a new plugin. You should be good to go with your very own, brand new Konami Code easter egg.

If you want, you can just copy the JS code from step 3, and paste it inside the Simple Custom CSS JS WordPress plugin which I reviewed before.

Let's break the last 5 lines of the code:

The easter eggs lay from line 37 to 43 or in other words, the things that will be triggered once you finish pressing the required keys.

The code above does 3 things:

  1. Change the = "url('images/cheatBackground.png')"
  1. Plays an audio file
1var audio = new Audio('audio/pling.mp3')
  1. Show an alert with a message
1alert('cheats activated')

If you want the easter egg 1 and 2, you have to specify the URL in the code in step 3 for the image and the audio file.

You can remove any of these lines to remove their function and add more if you want as well.


That was fun, right?

You just learned How to Add Konami Code to WordPress Site Using JavaScript and you now have a fun little easter egg hidden inside your site which I'm sure, a reader someday will trigger.

The idea for this article all started when I was reading the source code of the site MacStories and in their core.js file, I noticed a Konami Code reference after I un-minified the file. I decided to give it a shot. Voilà!

View Tweet

Have fun implementing it on your site.