How to make a pixel logo by jQuery in WordPress

scotty - 11/17/2018

There are many ways to make a pixel logo for your website, you can use gif image or vector image. For me using HTML, CSS and jQuery  to make pixel logo is a cool way to be different.

Step 1: Design your pixel art logo

I used pixilart.com to make logo, it’s a free online pixelart editor, simple and easy to use, everything you have to do is thinking and clicking.

After that, download your file, mark every pixel a number from left to right, for example your logo have 10×10 pixels you should mark top lelf pixel as 1 and bottom right at 100.

Step 2: Write .js file

Place logo-script.js file at my-theme/js folder. In functions.php add this code to include the script to my-theme

function mythem_scripts() {
wp_enqueue_script( 'logo-script', get_template_directory_uri() . '/js/logo-script.js', array('jquery'), '20180801', true ); }
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

In logo-script.js

(function ($) {

$(document).ready(function () {

//My pixel logo array
var pix1 = [35,39,50,51,54,55,64,65,68,69,78,79,80,83,84,93,94,95,96,97,98,99,100,101,102,103,107,108,110,111,113,114,116,117,122,124,125,127,128,
var pix2 = [67,71,87,88,89,104,105,109,112,115,118,119,120,123,126,129,137,140,143,146,152,154,157,160,166,167,171,174,];
var pix3 = [66,70,81,82,85,86];
var pix4 = [132,133,134];
var pix5 = [10,11,19,20,21,23,24,25,34,36,37,38,40,41,48,49,52,53,56,57,62,63,72,77,92];
var eyes = [66,67,70,71,81,82,85,86];
var eye_balls = [67,71];
var ears = [35,39,50,51,54,55];
var fires = [199,201,204,206];
var blink_light = [11]

//Generate HTML code 
for(var i = 1; i < 211; i++) {
if(jQuery.inArray(i,pix1)!='-1')$('.my-logo').append( '<span id="px-'+i+'" class="pix1"></span>' );
else if(jQuery.inArray(i,pix2)!='-1')$('.my-logo').append( '<span id="px-'+i+'" class="pix2"></span>' );
else if(jQuery.inArray(i,pix3)!='-1')$('.my-logo').append( '<span id="px-'+i+'" class="pix3"></span>' );
else if(jQuery.inArray(i,pix4)!='-1')$('.my-logo').append( '<span id="px-'+i+'" class="pix4 min-float-animate"></span>' );
else if(jQuery.inArray(i,pix5)!='-1')$('.my-logo').append( '<span id="px-'+i+'" class="pix5"></span>' );
else $('.my-logo').append( '<span id="px-'+i+'" class="trans"></span>' );
if (jQuery.inArray(i,eyes)!='-1') $('#px-'+i).addClass( 'logo-eyes' );
if (jQuery.inArray(i,eye_balls)!='-1') $('#px-'+i).addClass( 'eye_balls' );
if (jQuery.inArray(i,ears)!='-1') $('#px-'+i).addClass( 'sort-handle logo-ears' );
if (jQuery.inArray(i,fires)!='-1') $('#px-'+i).addClass( 'rocket-fire under-feet' );
if (jQuery.inArray(i,blink_light)!='-1') $('#px-'+i).addClass( 'blink-light' );

In “My pixel logo array” are the position of every part of your logo your marked in step 1, for example: 2 eyeballs at the positions 67 and 71, so we make an array: eye_balls = [67,71];

In “Generate HTML code ” we make a loop through all pixel positions, if  position is the part of specific pixel, we create a <span> contain a class of each parts of the logo.

Step 3: CSS the span and Place the logo

After the JS code generate the <span> collection with specific class, we use CSS to make them display right

.my-logo span { 
float: left; 
width: 10px;
height: 10px;
.my-logo span.pix1{background-color: blue;}
.my-logo span.pix2{background-color: green;}
.my-logo span.pix3{background-color: yellow;}
.my-logo span.pix4{background-color: red;}
.my-logo span.pix5{background-color: white;}

The width and height of every pixel belong to you, I used 10px for example. We set the color of every part of logo by using background color.

Finally, place <div class=”my-logo”></div> everywhere you want to display your logo.


reference sites

external links



the search for spock