Two WordPress Plugins to Add ASCII Art to Source Code

Adding ASCII art to the source code (the HTML files) may not interest people who don’t look at source code.

The source code is an easy place to add ASCII art because those files open in plain text, no formatting or fancy fonts. So, the ASCII art shows up without much extra work, almost none in fact.

If you access your HTML files you can add ASCII art yourself, without the plugins. (See above). But, not everyone wants to do that.

WP Figlet

WP Figlet is all about adding text created in ASCII art fonts (figlets). It even lets you choose which figlet fonts you want to use. The auto suggestions creates a figlet in your source code like this (you choose your own words):


It does work.

Source Code ASCII Art

Source Code (although not updated in 4 years, also works). If you are timid about mucking around in the HTML files then either of these plugins will work for you. Source Code lets you choose to have the ASCII art in your header or footer. However, I found it did need the extra HTML code for keeping the formatting after I saved my text image.

One thing I dislike about Source Code is the lack of artist credit (artist initials). I checked several of the ASCII images available with the plugin and none had artist credits. I used my own ASCII image with my initials.

In the end… DIY.

Don’t be bashful about getting into your own source code. Skip the plugins and just do it yourself.  Once you access the file it’s very simple to add the ASCII art with the code for notes. (See the first image in this post, no reason you can’t do that yourself).

ASCII Art Hidden in Source Code

Now and then if you look at the source code (the HTML code) of websites you can find ASCII art. Its like a secret surprise for those who dig a little deeper.  Have a look at – ASCII Art Signatures in the Wild.

You can add ASCII art to the source code for your own site or blog.

Choose the ASCII art you want to use. Make your own ASCII art or borrow art created by someone else. (Don’t forget to keep the artist credit/ initials with the work).

Open the source file in a text editor. Notepad (the software which comes with Windows) will work.

Pick the place you will add the ASCII art – make sure you don’t break the HTML code because that would mess up your site.

You need to add some simple HTML code before and after the ASCII art.

This code prevents your ASCII art from showing on the page – instead it is like a note you have left to yourself in the code. Only people looking at the actual HTML code can see what you place in this particular HTML code.

Then save the file and close it.

ASCII art found:

Welcome Mat.co shares the code for adding a “Welcome” to the HTML code of your site.

How to Create ASCII Art (Text Pictures) with Your Keyboard

Whether you know it as ASCII art or didn’t know a proper name for all that text art made with standard keyboard characters, you can do it yourself. It really is much simpler than you may expect.

I’ve been creating ASCII line art since 1997. After a few years I left it behind, there were so few places I could still use it once email became HTML instead of plan text. Now ASCII art seems to be making a come back for cell phones and other new technological gadgets which can send simple graphics, in text.

Start with an idea of what you would like to create. Get an image in your mind and then draw a rough sketch, look for a clip art image online or any other way you can get a visible image in front of you. When you are starting and still learning it is important to keep the image clean and simple. Stick to something with only a few lines and not many round shapes. (Circles are one of the more complicated shapes to create and will take some practice.)

Once you have your image where you can see it, open a text editor. I still use the plain, old text editor that came with Linux. You can use Notepad in Windows, it is simple – you will already have a fixed width font ready to use. If you use a graphic editor or anything other than a basic text editor you will need to make sure the font is fixed width. This means all the characters (letters, numbers and symbols) are the same standard space apart from each other. From W to I they take up the same amount of space. Other fonts will give you a very different result and are harder to work with when it comes to displaying text art. (At the very least they will always lean to the far left).

I like to be set up with my text editor taking up about half the screen and my inspiration image/ picture on the other side (unless it’s a print image and then I prop it up in front of me on my desk).

The first thing I do is make some empty working space on the text editor. Just use the enter key to go down a few lines. Start working on a level that is comfortable for you to view – not too high or low on your screen.

No one can tell you exactly what characters to use. That is all up to your own judgement. Base your choices on what will fit/ suit the image you are creating from. Look at the direction the lines go and then find a keyboard character that will work. Take your time, change your mind a few times, try different numbers and letters as well as the basic shapes with / \ | > ( ) < and the small dots from punctuation characters ‘ . –

Use the space bar to move to a new spot you want to type in. You need to create the blank spaces in order for them to appear. This is a time when the mouse is second fiddle. The enter or carriage return will take you to a new line. Backspace erases anything you want to change. This may seem obvious but we have grown comfortable using the mouse – it does take getting used to just working with the keyboard.
As you work notice how different characters set on different levels. Some are higher and some lower. Use this to your advantage. _ , – ‘ `

When you want to make eyes there are a lot of options @ o 9 a e b q p d c g 6. Try them all. Each gives a different personality to the image. A combination of q p (for instance) can create eyes and a nose or snout.

Take a look at letters like Y T and W. Those will give you some basic shapes too. When you create smaller ASCII text pictures the shape of letters and numbers matter and can give you exactly what you need in a small space. Y makes a nice nose for a cat’s face.

For making a box I like to use .——. to join it to the sides at the top and then .____. to join it to the sides at the bottom.

For shading/ making a dark area # works well. Some people get more complicated and create greyscale ASCII art. This takes some practice, some familiarity with the keyboard characters and how they combine to create a finished image. Don’t try something too complicated for your early work.

Experiment and learn as you work. Look at the ASCII art done by others and see how they used different letters, numbers and characters to create the shapes they wanted. Think of it as a puzzle, a jigsaw puzzle, where you are fitting the pieces together to create the complete image.

If you have a print image you can hold it up to your screen and match your text to the shapes by comparing how they fit under the paper it’s printed on. I never did this myself. It seems to take away some of the creativity and ingenuity for me. But, if that gives you the will to keep trying, go ahead and do it.

Leave a couple of lines above and below your finished ASCII text art. I also like to keep my work a few spaces over from the left hand side of the screen edge.
Once you are fairly happy with your creation save the text file on your computer. Give it a name and add it to your hard drive. If you have software to capture your file as a graphic image file you can do that too. I just use a screen capture that lets me pick the size I want to save instead of the whole screen. It is much easier to share and post text/ ASCII art in an image file.

Don’t forget to add your artist initials to your finished work. ASCII art is usually shared freely, often adapted by other artists (diddled as we used to call it in the ASCII art newsgroup) but the initials should be kept with the art as respect to the original creator of the art. Plus, when you find something you really like you have a chance to find more of it when you know who made it.