How To Create a TinyMCE Editor Dialog Window in a WordPress Plugin

My last post generated a few inquiries.  It seems a demand exists for popup dialog boxes in WordPress’ TinyMCE editor.  This is pleasantly surprising since there is so little relevant information available.

I thought I was alone when I recently tackled this task in one of my plugins.  I struggled greatly with the poorly documented procedures.  Tears flowed.  Vulgarity spewed.  Fetal positions were entered.

Because of these queries, and so that I don’t forget how to do this myself, I’ve decided to teach how to create these dialog boxes.

The tutorial assumes you understand how WordPress works, how to make a WordPress plugin, and can at least read and understand CSS, HTML, and JavaScript.


Understanding the Basics

WordPress’ default editor is the TinyMCE editor.  TinyMCE is a “platform independent web based JavaScript ‘what you see is what you get (WYSIWYG)’ editor.”  TinyMCE is not a part of WordPress, but WordPress has integrated and customized TinyMCE to fit with their product.

Ultimately, for us plugin developers, this separation makes our job difficult.  We have to deal with a poorly defined cultural and programmatic paradigm shift between the two.  There is a wall separating WordPress and the editor that can only be passed through in specific and awkward ways.  And, the WordPress methods for manipulating the editor are just different enough from stock TinyMCE that TinyMCE’s documentation is often unhelpful.


To make matters worse, the programming language used to interact with WordPress is PHP, while TinyMCE’s is JavaScript.

Not only are these two separate languages with stark differences.  But they also run at different times in the loading process and don’t interact with each other directly.  PHP is executed server-side before anything is sent to the client’s web browser.  JavaScript is client-side and executed long after it is sent to the web browser.

This disconnect is inconvenient and occasionally infuriating.  Several portions of this tutorial will focus on breaking this wall and making WordPress and TinyMCE talk to each other.


What’s the Plan?

This post is going to teach you how to make a WordPress plugin.  This WordPress plugin is going to register a custom shortcode with WordPress, and create a TinyMCE toolbar button and dialog box for end users to create the shortcode.

This plugin is simple.  It will turn specified text red.  Pointless, I know, but easy to demonstrate and understand.

The complete, working and finished code can be browsed and downloaded on GitHub.  The code is heavily documented and, I hope, easy to follow when accompanied by this tutorial.

Browse Finished Plugin Source Code on GitHub


Start Your Plugin!

Let’s start a new WordPress plugin, create the main plugin file, and add the plugin file header.  Since I’m assuming you already know how to make basic WordPress plugins, let’s race through this procedure quickly.

The plugin is named TinyMCE Developer Starter Kit.  The plugin file is tinymce-dev-starter.php.  The plugin file header is as follows:


After the header, let’s define some constants. I always define constants like these in my plugins to smooth out some of WordPress’ confusing edges.

To keep in line with WordPress plugin best practices, everything I define in this plugin will be prefixed to prevent plugin naming collisions.  My prefix will be TDSK which is the acronym for the plugin name.


Now, register the dumb shortcode


Then enqueue jQuery, which we’ll use in the TinyMCE dialog box later.



Now We Start Worrying About TinyMCE

Everything we’ve done so far is typical in a WordPress plugin.  It’s been pretty straightforward, and the procedures are well documented online.

The remainder of this plugin, however, will be for TinyMCE.  Documentation is much harder to find, and things get stranger.  Here, I’m going to get more descriptive about what I’m doing.

 Step #1:  Register a TinyMCE Toolbar Button

There’s several things we’ll need to do to get a button on the toolbar.  Right now, we must tell WordPress to tell TinyMCE that we are going to define this button.  We’ll actually define it later, but we need to signal intent.

We signal our intent with WordPress filters.  WordPress has a handful of filters for the TinyMCE toolbar.  They are mce_buttonsmce_buttons_2mce_buttons_3, and mce_buttons_4.

Each of those filters corresponds to a row in the TinyMCE toolbar.  mce_buttons refers to the first/top row.  mce_buttons_2 refers to the second row.  mce_buttons_3 refers to the third row.  And mce_buttons_4 refers to the fourth row.  In WordPress, only two toolbars are used in the default editor, and the second row is hidden unless you toggle it with a button in the first row.

Since our plugin is supremely important, let’s add the button to the first row.  If you later want a different row, simply replace the filter with the one corresponding to your row.


We’re going to add the filter, and define a function to handle the filter’s task.  First, we add the filter.

Then we define the function to handle it.  The function is passed a numeric array of button IDs.  The purpose of this array is to tell TinyMCE which buttons to look for, and in what order to put them.  As with all WordPress filters, when finished altering what we’re given, we must return it.

My filter is going to add an entry to the end of this array of button IDs.  The simplest form of this is as follows.


However, it is common to want to restrict when this button appears in the toolbar.  For example, there are plugins available that present the TinyMCE editor on the public facing portion of your site.  You probably don’t want the public using your button.

In every case in which I’ve used a TinyMCE button, I’ve only wanted it available on post and page editors in the admin.  This plugin, is going to use those same constraints.  Simply modify the if statement below if your constraints are different.


Now, WordPress will inform TinyMCE to look for a button with an ID of tdsk_button, and add it to it’s first toolbar.  Later, we will define this button and tell TinyMCE what to do with it.


But, before we can do that, we need to tell TinyMCE where we are going to define this button.  We do this, by registering a TinyMCE “plugin.”


Step #2:  Register a TinyMCE Plugin That Will Define Our Button

The procedure for doing this is very similar to adding a button.  WordPress provides a filter.  The filter is mce_external_plugins.


This filter’s handler function is passed an associative array where each key is an ID of the TinyMCE plugin, and the value is the URL of the JavaScript file containing the plugin definition.  We must add an entry for the TinyMCE plugin we’re going to create in the next step.  Once the plugin is added to the array, return the array.  The simplest form is this:

However, just like with the button, it is probable that you will want to add some conditions so the plugin doesn’t get included with EVERY TinyMCE editor.  The conditions will be the same as the button’s.


Now, we can create the TinyMCE plugin.  WordPress is going to tell TinyMCE the new plugin’s ID is tdsk_plugin, and the plugin definition is in a file called tinymce-plugin.js in the root of our WordPress plugin’s directory.  So we need to create that file, and move into it for the next step.


Step 3:  Define our TinyMCE Plugin

Okay, we should now be in tinymce-plugin.js.  We are now completely outside of the realm of WordPress, and instead inside the realm of TinyMCE.  This means we switch to using JavaScript, and we hook into TinyMCE, not WordPress.

I’m going to start this JavaScript file by creating an immediately invoked function expression (IIFE).  If you don’t know what that is, I recommend learning about it.  Essentially, it is a method for preventing bad habits and difficult to trace bugs in situations like this.  In this IIFE, I’m going to need jQuery, so I need to pass it in.  I’ll discuss why jQuery is needed a bit later.


Now, all of our code goes inside the IIFE construct.  The code we’re going to put in there is our TinyMCE plugin definition.  I’m going to give you the entire plugin definition now.  It has comments explaining what’s happening, and I will break it down momentarily.


Okay, that was pretty ugly and confusing.  So let me break it down.  Let’s start here:

This is the opening line for creating a TinyMCE plugin.  The first parameter for the tinymce.create function is the plugin ID we specified earlier preceded by tinymce.plugins.  The second parameter is a JavaScript object with the meat of the plugin.

Now, onto the meat of the plugin.  The object can have a couple properties, but we are only interested in one.  The init property.  This property should contain a function which will be run when the TinyMCE plugin is initialized (when TinyMCE loads).  It is in here that we will define our button.

The function we’re attaching to init gets two parameters.  The first is the TinyMCE editor instance that is initializing the plugin.  The second is the absolute URL to the directory containing the plugin file.


Now, inside this init function, we want to define our button.  Fortunately, creating a button is simple.  We simply use the addButton function available in the editor instance.  This function is given two parameters.  The first is the ID of the button, which we defined earlier (tdsk_button).  The second is an object with the button’s properties.

Two of the properties are straightforward.  The title property is the text in the tooltip when you hover over the button.  The image property is the URL to the button image you want to display.  The third, less clear property is cmd.  cmd is the name of a TinyMCE “command” you want to execute when the button is clicked.  We are going to create our own command momentarily, so we just need to give it the name of our command.  I call mine tdsk_command.



Now, we get to create this command.  We do this by using the addCommand function in the editor instance.  This function has two parameters.  The first is the name of the command, which is tdsk_command.  The second is a function that is run when the command is executed.


So, let’s do a quick review before continuing.  We told WordPress to tell TinyMCE we would be defining a button.  We told WordPress to tell TinyMCE we would be defining a plugin to handle the button definition.  The button gets defined in our TinyMCE plugin.  The button, when clicked, executes a command we define.  This command runs the code in the function above.  It’s been a long chain of events, but we’re almost done dealing with TinyMCE (thank goodness).

What we need to do now is have the command open our dialog window.  We can open a dialog by using the open function in the editor instance’s windowManager.  This function has two parameters.  The first is an object with properties of the window.  The second is an object with any data we want available to the dialog.

The properties are fairly straightforward if you read the comments next to them.  For the data parameter, we must pass the dialog at least two things.  The first is the editor instance.  This is going to be used to put our shortcode in the editor.  The second is jQuery.


And one last thing with TinyMCE before we can move onto the dialog window’s contents.  After the plugin’s create function, we must tell TinyMCE we’re done with the plugin and it’s okay to use it.  We use the add function in TinyMCE’s PluginManager for this.  The first parameter of the add function is the plugin’s ID.  The second parameter is the plugin we created.  This second parameter is the same as the first parameter of the tinymce.create function, but without quotes.


And now we can move on!  Finally!


Dialog About Dialogs

In that mess of code just finished, we told TinyMCE that the dialog it creates should fill itself with the contents of tinymce-dialog.html in the root directory of the WordPress plugin.  So, that file needs to be created, and we’ll switch to it for the next portion of this tutorial.

This dialog content file should just contain a normal HTML page.  It can use JavaScript, CSS, images, and everything else a normal HTML page does.  For the purposes of this tutorial, the dialog is only going to display a form input in which the user types the text we want the shortcode to show.

We will then use JavaScript and jQuery to take that form data and turn it into a shortcode in the TinyMCE editor when submitted.


First, let’s create a basic HTML page that we can build on.  The only strange item here will be a few <meta> tags that disables browser caching.  Because of the way TinyMCE creates the dialog, browser caching gets in the way more than it helps, especially when testing, so we disable it.

The rest is basic HTML.


Now, add a form with a label, text input, and a submit button in the body. Note that, if you had a lot of inputs, you would probably want to divide them into logical sections and give everything ID’s and classes for easier CSS and JavaScript targeting later.



Personally, I find the default styling of everything created to be unappealing.  Therefore, let’s add some CSS to beautify what we have.  We can create a separate CSS file and link it like any other HTML page.  We can use inline CSS.  Or, we can add a <style> tag and include the CSS in the <head> of the page.

I’m going to add a <style> tag to the head.


The JavaScript

At the moment, clicking our submit button doesn’t do what we want.  We want a shortcode in the editor.  To get this, we must use JavaScript to extract form data, construct the shortcode, and tell TinyMCE to insert that shortcode into it’s contents.  jQuery makes this job much simpler and cross-browser compatible, so let’s use it.

Like with the CSS, JavaScript can be included in it’s own JavaScript file, or put on the page in a <script> tag.  Here, let’s do the latter.  Let’s put the <script> in the footer, just before the closing </body> tag.


But, before we can jump into the shortcode creation, we need to deal with two other TinyMCE oddities.  Passed arguments and using jQuery.  This was the topic of my previous post.  A summary of the post is below, but I recommend you check out the original for more detail.


The short version of my previous post is that TinyMCE opens our dialog in an iframe, and this iframe’s only connection to the rest of the WordPress site is the arguments passed to it in tinymce-plugin.js.

This means we need to get those arguments.  It also means that there’s no jQuery native to this dialog.  We have to load it, or somehow reference the jQuery from the main site in our dialog.

It’s bad form to reload a resource already loaded.  And, if you plan on submitting your plugin to the WordPress plugin repository, reloading jQuery will cause them to reject your plugin (trust me, I speak from experience).  So we need to do the latter and reference the main site’s jQuery.


Oddity #1:  Getting the Arguments

Passed arguments are accessed using the getParams() function in TinyMCE’s window manager.  Here’s how:

passed_arguments now points to the object passed in tinymce-plugin.js.  Specifically, we had an object with two properties.  The first property is editor, which is the TinyMCE editor instance.  The second property was jQuery.  Which leads us into the next oddity.


Oddity #2:  Referencing the Main Site’s jQuery

The only way to access the main site’s jQuery, that I know of, is to pass a reference to jQuery in the dialog’s arguments.  Fortunately, we’ve already done that.  It is, at this point, accessible using passed_arguments.jquery.  However, typing that repeatedly is going to be tedious, so let’s assign jQuery to the $ variable in the dialog.


Unfortunately, one of the downsides to this passing jQuery method is that jQuery is attached to the main site, not our dialog box.  When it searches for elements and makes manipulations to the DOM, it’s going to work on the main site, not our dialog.  To remedy this, we need to tell jQuery where we want it to operate.

This is accomplished by passing a 2nd parameter to jQuery selector functions when used.  This parameter will provide some context to jQuery. The parameter should be the <body> tag of the iframe.  Which, we can get using pure JavaScript.


Now, whenever we use a jQuery selector, we must also pass the jq_context.  Like this:



Now, Intercept Form Submission and Create the Shortcode

Now that we have our arguments and jQuery, we can work on the shortcode.  Our ultimate goal is to create a string containing the shortcode text we want and output the string in the TinyMCE editor.

I’m going to show all the code to do this below.  The code is heavily commented, and I will explain in detail further down.


The beginning of this is standard jQuery interaction.  We select the form, and attach a submit event handler.  In this event, we prevent the default behavior with event.preventDefault() so that we can do our own dirty work.


We then extract the value in the form’s text input and store it in a variable.


Then we begin constructing the shortcode string.  If the input_text isn’t empty, we add on the shortcode argument.  Then we close the shortcode.


Now, we have our shortcode stored in the shortcode variable.  We simply need to input it into the TinyMCE editor.  We do this with the following code:


And now, since we’re done with the dialog window, we close it.



At this point, we have a working WordPress plugin with its own shortcode and TinyMCE dialog for creating the shortcode.  From this base framework, you should be able to expand to fit your needs.  I’ve outlined a likely addition some of you will need in your plugin below.


Addition #1:  Pass PHP Data to the Dialog

As I mentioned at the beginning of this lengthy tutorial, TinyMCE is completely and totally client-side JavaScript.  This makes it difficult to get data from other parts of your server-side, PHP plugin.  But sometimes we still need to do precisely that.

Imagine that your plugin includes a settings page that allows the user to alter the content of the dialog box.  The settings values can only be retrieved using PHP.  TinyMCE can’t access them.


To get around this problem, we have two options.  The first is to use AJAX.  But, using AJAX will typically be a bad idea.  It will slow the loading of your TinyMCE dialog box.  And asynchronous JavaScript will only make things more difficult.

A better option is to have PHP output data that you’ll need into a JavaScript variable when the page is loading.  This is easily done back in the tinymce-dev-starter.php file.  We simply tell WordPress to add your JavaScript to the admin head section.

In my example, I’m going to pass the output of the PHP function phpversion() to the dialog box because it is a simple demonstration of the technique. The method, however, should work with any PHP data.  I will simply add the following code at the bottom of the file.


With this setup, there is a global JavaScript variable named tdsk_data.  This variable contains an object which can hold as many properties as needed.  I only need the one property containing the PHP version.

Then, in our TinyMCE plugin file, we extract this data.


And now, we add it as an argument for the dialog box.


Then, in our dialog’s code in tinymce-dialog.html, we simply have another argument.  If I were to add a <p> tag above the form with an ID of tdsk_php_version, then I could output the PHP version with the following jQuery.


The End

Well, that was long.  For an example of what can be done with this method, check out my plugin Tweet This.  The plugin generates a fairly significant shortcode with several optional arguments, using data retrieved from a settings page, and created using a nicely styled dialog box.



I also recommend you look at the source code of this sample plugin we’ve made and see everything in its completed state.  The entire plugin code can be browsed or downloaded on GitHub.  It is heavily commented and breaks down each step.  Thanks for reading, and show me what you make!

Browse Finished Plugin Source Code on GitHub


Using jQuery and jQuery UI in TinyMCE Dialog Iframe

WordPress is a wonderful tool.  But some things are very difficult to do.  A WordPress plugin I recently created (called Tweet This) adds a button to the WordPress editor toolbar.  This button, when clicked, opens a sizable dialog window with lots of items and a fair amount of jQuery and jQuery UI code.


My Toolbar Button:



My Dialog:




Getting  jQuery and jQuery UI to work inside the dialog box was challenging because it is poorly documented and not a commonly executed task.  The dialog box was by far the most time and labor intensive aspect of the plugin.  And was the source of many headaches and frustration.  So, now that I’ve figured it out, I want to write it down so I don’t forget!  And, hopefully, it will help you out as well.


The Problem

WordPress makes it easy to include jQuery and jQuery UI in admin pages using the wp_enqueue_script function.  However, TinyMCE dialog boxes are opened dynamically as iframes.  They are not loaded in advance, and the source code for the dialog box is independent of the WordPress admin page.

So jQuery isn’t present, and WordPress doesn’t have the capability to load jQuery in the dialog box.  It needs to be included another way.



The Easy Solution

The easy solution is to simply include jQuery (and jQuery UI if needed) in your dialog box like you would on any HTML page.  You can download it yourself or use Google’s hosted versions.


But this is a very inelegant solution.  It slows down the loading of your dialog box dramatically.  And will cause the WordPress plugin folks to reject your plugin because you are creating a dependency on an external source and/or you are re-including a different version of something that WordPress already has, has tested, and approves of.

In other words, this works, but is bad form and unacceptable.


The Better Solution

The better solution isn’t terribly difficult in theory, but was awful to figure out how to do.  The documentation wasn’t helpful, and it seemed I was the only human being on the planet not using the easy solution.  But, with information cobbled together from lots of other sources, I figured it out.  And it’s pretty simple to do.


In words, what you need to do, is pass jQuery as an argument to your dialog, and pass the dialog box context to jQuery when using it.

Okay, now let’s see what that actually means.  A simplified version of my TinyMCE plugin code is included below.



The entire plugin initialization code is wrapped in an immediately-invoked function expression (IIFE) since it is all self-contained.  This IIFE takes the jQuery variable from the global scope and uses it inside as the infamous dollar-sign variable ($).  You will need your WordPress plugin to include jQuery in the admin section using the previously mentioned wp_enqueue_script function.


The above code register a button and a command with TinyMCE.  The command is tied to the button and it opens a dialog box which loads content from a file called tinymce-dialog.html.  Any arguments you want passed to this dialog are put into an object and passed as the second arguments to  You can add as many arguments as needed, but you will need to pass at least the jQuery variable which is the last argument in the example above.


Then, the contents of tinymce-dialog.html is simply any HTML, CSS, and/or JavaScript you want in your dialog box.  The JavaScript at the bottom shows how to use jQuery.  An explanation is included underneath the code.


By passing jQuery as an argument in the plugin initialization code, it is now included in the dialog box document.  You can fetch passed arguments using the following:

Now, the variable args is the object passed in the initialization code:


And jQuery is args[‘jquery’].  To make life simple, I assigned jQuery to the $ variable.


Now, using jQuery should work the same as normal, with one crucial exception.

jQuery’s context is the parent window, not the dialog box.  Any selectors you use will search the parent document, not the dialog unless you specify that the dialog is the context you want.  This is done by passing the body tag of the dialog element as the second argument in  jQuery’s $ function.  There are multiple ways of getting and using this body tag, but in my opinion, this is the simplest:

Use plain JavaScript to select the first body tag it encounters in the DOM and store it in a variable.  If you have multiple body tags on your page (multiple iframes?), this won’t work, but when using the WordPress post/page editor, the first and only iframe should be your TinyMCE dialog and it works beautifully.



And now, as long as you remember the context argument, jQuery will work as expected within the dialog.



Not too difficult once you’ve figured it out.  But I’ve lost many hours figuring it out.  Hopefully, you won’t have the same problem!


Fix For 100% Hard Disk Usage at Logos in Titanfall PC Game

I just purchased the video game Titanfall for PC through EA’s Origin software.  After the 50GB download and lengthy game installation, I fired up the game to play, and was met with the game effectively freezing at the EA logo.

It would advance slowly.  About 1 frame every 15 seconds.  After some investigation, I saw in the Windows Task Manager and Resource Monitor that Titanfall was writing to my hard drive at 100% capacity.

Now I don’t have the fastest hard drives in the world, but I have two decent drives in a striped RAID configuration, so this should not be happening.


It took about 2 hours of Googling before I found someone with the same problem.  And fortunately, someone had a fix that worked for me.


It’s a bug with origin’s recent update to the overlay. Right click the game, properties, and disable origin in-game.


So if you’re having this problem, Google no more.


Open Origin.  Browse to “My Games,” right-click on Titanfall, click “Game Properties,” check “Disable Origin in Game for this game,” and finally click “Apply.”

Game Properties     Disable Origin Overlay


Worked like a champ for me.

SSH Tunnels – Part 3: Network Side

This post is the last in a series of three posts regarding SSH tunneling.  This post will discuss the required configurations and information to connect to an SSH server from outside your network (over the Internet).


SSH Tunnel Series

  • Part 1: Client Side:  Discusses connecting to an existing SSH server and using it to encrypt Internet traffic on untrusted networks.
  • Part 2: Server Side:  Discusses creating and configuring an SSH server.
  • Part 3: Network Side:  Discusses configuring your network to allow SSH connections from other networks, and tips and tools to make connections easier.



Step 1: Find Your IP Addresses

Before we get carried away, there are two important pieces of information we need to determine.  Those are the local and external IP addresses for your SSH server.  Your external IP address will be the server address used in part 1 of this series.  Your local IP address will be used below to configure your network.  If you do not know how to find your external and local IP addresses, you can read one of my other blog posts which explains how to do so on Windows, OS X, and Linux.  Write down both IP addresses for reference.

Step 2: Forward Port 22 to Your Server

Nearly all home routers include a built-in firewall.  If you don’t know what a router is, it is one of those boxes used to provide your Internet connection.  Depending on your exact setup, you might have one single box, usually provided by your Internet service provider, which combines a bunch of functions into one, or a collection of devices of which one is your router.  If you have more than one device, the router is probably the one with antennas on it and/or the one with a bunch of ports on the back (usually 4 or more).

A firewall is simply a program running on your router that prevents some of the evil people on the Internet from accessing your computer in ways you don’t want.  Firewalls provide security.  Unfortunately, in the process of providing security, they will also block your SSH tunnel if you attempt to use it outside of your home network.  In order to prevent this from happening, we must forward the SSH port of 22 to your SSH server.


The exact procedure for this varies widely from router to router.  Fortunately, there is a website dedicated to providing instructions on how to forward ports on nearly every router out there.  That website is  If you do not know how to forward ports using your router, find the manufacturer and model number of your router (usually located on a sticker on the bottom of the router), and then click that link to  Once there, click the link for the manufacturer of your router (mine is DLink for example), then choose the model of your router from the next list.  And finally, scroll down the list of programs and find the entry for SSH.  You should then be given a detailed list of steps for forwarding port 22 to your computer.




That’s it!  You should be able to refer to part 1 of this series for instructions on how to establish an SSH tunnel and use it.  This concludes the series on SSH tunneling.  I hope it helped.  If you have any questions or suggestions, let me know in the comments.  I also love to hear success stories and interesting use cases!

How-To Find IP Address on Windows, OS X, and Linux

There comes a time in every geek’s life when they need to know their IP address.  If you are one of those people, read on for instructions on how to find yours.


Introduction to IP Addresses

Every computer connected to a network is assigned a unique identifier.  That identifier is known as an internet protocol address, or IP address for short.  I like to think of IP addresses as phone numbers for computers.

Without diving too deeply into the realm of networking, there are two IP addresses that the average user may need to know at some point.  The first is their external IP address, which is the IP address that users from other networks or the Internet utilize to find your local network.  And the other is your local IP address which is how devices on your local network communicate to each other.


If you are away from your network and want to “contact” your network, or computer connected to it, you will need to know its external IP address.  If you want to “contact” a device on the same network as you, you will need to know its local IP address.  Below, I explain how to find out both, beginning with the easiest, your external IP address.


Find Your External IP Address

This one is easy.  On any device on your network, open up a web browser and visit  It will tell you in big bold font what your external IP address is.

Example Screenshot of

An example screenshot of



Find Your Local IP Address

Go to the computer whose local IP address you wish to know.  Determine what operating system it is running, and scroll down to the appropriate section below for instructions on how to find the IP address.


There are a few ways to find your local IP address on Microsoft Windows, but only one method is consistent across all the recent versions of Windows.  Because of the discrepancies between versions, I will detail this method, even though it not necessarily the easiest one.

You need to run the “ipconfig” command from a command prompt.  To do that, hit the key combination of “Ctrl + r” on your keyboard.  This should open up a window titled “Run.”  In this run dialog window, in the text field, type “cmd” and then hit Enter.  A black command prompt window should open.  In that command prompt, type “ipconfig” and hit Enter again.  Buried in the output from that command is the local IP address of your computer.

To find it, look in each section of the output from that command for a line that says “IPv4 Address.”  Once you have found it, your local IP address should be the series of period-separated numbers next to it.  For example, at the moment, mine is “”

Windows 8 - IPConfig Results

Results of “ipconfig” command run on my Windows 8 desktop.

Mac OS X

For Mac OS X, the easiest method that is consistent across recent versions is to look under “Network” in “System Preferences.”  To do this, click the apple pull down menu, and choose “System Preferences… ”  Now find the Network entry and click it.  A window should appear detailing a bunch of information; you want the IP address.  For example, mine is in the screenshot below.

Mac OS X IP Address

Max OS X network settings window


In Linux operating systems, the method consistent across the most distributions is to run the  ifconfig | grep 'inet addr'  command with root privileges on the command line.  Depending on your setup, your computer may boot into a command line, or it may boot into a user interface such as KDE or Unity.  If you start into a user interface, you will want to open a terminal window (you will need to Google how to do this as the precise methods vary across distributions and user interfaces).  Once at a command line, run “ifconfig” with elevated privileges.  For many distributions, this is as simple as typing sudo ifconfig | grep 'inet addr' , and typing in your password.  For others, you will need to switch to the root user with the “su” command, and then run the  ifconfig | grep 'inet addr'  command.

Once “ifconfig” is run, you must read through each line of the output to find your local IP address.  You are looking for the line that begins like this: “inet addr: 192.168.”  On many computers, that will probably be the first line.  Once the line is located, your local IP address is the period separated group of numbers next to “inet addr.”  For example, in the screenshot below, mine is

ifconfig grep inet addr output

Results of the “ifconfig | grep ‘inet addr'” command run on my Linux server.




And that’s it!  You now have your local IP address.

SSH Tunnels – Part 2: Server Side

This post is the second in a series of three posts regarding SSH tunneling.  In this post I will demonstrate how to setup a basic SSH server that is configured to allow SSH tunneling.


SSH Tunnel Series

  • Part 1: Client Side:  Discusses connecting to an existing SSH server and using it to encrypt Internet traffic on untrusted networks.
  • Part 2: Server Side:  Discusses creating and configuring an SSH server.
  • Part 3: Network Side:  Discusses configuring your network to allow SSH connections from other networks, and tips and tools to make connections easier.



Installing & Configuring SSH Server

There are multiple pieces of software that will suffice as an SSH tunneling server.  The software I use below in my examples is free and easy to setup.  As this is an introductory tutorial on SSH tunneling, it does not touch upon advance configurations and use cases.  If you need that stronger security or additional options, you may need to seek out other programs.


Similar to the situation in part 1 of this series, it is easier to setup an SSH server in Linux than it is in Windows.

However, the number of Linux distributions in existence is mind-boggling, and many of those distributions have their own methods to install tools and manage software.  If you have a specific distribution you would like help with, let me know in the comments.  For now, I will discuss installing the necessary software on Ubuntu Linux in a manner that will work on several other popular distributions.

The easiest to use SSH server for Debian based distributions is OpenSSH.  Once this package is installed, you should be able to start using your SSH tunnel.  However, for security, there are a few settings that I recommend changing.  To begin, open a terminal window, and execute the following steps from within the terminal window.

  1. Execute the following command: sudo apt-get install openssh-server
    • You will likely be prompted for a password. This is your password that you use to login.
    • After typing in the password, you may receive a notification about what will be installed on your computer.  Type ‘y’ and press Enter to continue.

      Ubuntu 64-bit, Install openssh-server

      sudo apt-get install openssh-server

  2. Once installation is finished, execute this command: sudo nano /etc/ssh/sshd_config
    • nano is a terminal based text editor.  There are numerous other editors that can be used. I recommend nano here because it is installed by default in Ubuntu.
  3. In the text editor window that appeared, find the line that says “PermitRootLogin yes” and replace “yes” with “no”
    • This prevents the root user from connecting to your computer via SSH which is a huge security risk.  When using Ubuntu, you don’t use the root user, so it shouldn’t impact your experience.  But, it will provide a measure of security.

    Ubuntu 64-bit, edit sshd_config

    Change “PermitRootLogin yes” to “PermitRootLogin no”

  4. Now press “Ctrl+O”  followed by Enter to save your changes, and then “Ctrl+X” to close the editor.
  5. Now execute this command to restart the SSH server: sudo service ssh restart

And that’s it.  You should now have a functioning SSH server running on your computer that will allow logging in with your user remotely.  Now, you can create an SSH tunnel on another device as described in part 1 of this series.  The username and password for the connection will be your username and password used to login to Linux, and your port number will be 22.



  1.  Download freeSSHd from the following website:
  2. Install freeSSHd
    • When asked to generate private keys, click “Yes.”
    • When asked whether you would like to run this program as a service, choose “Yes.”
    • If you are running Windows Vista and higher, you may be asked to allow administrator rights to the installer.  Allow them.
  3. Click “Finish” to close the setup window.
  4. Run the newly installed freeSSHd program (double-click on icon on the desktop, or find it in your programs list).
  5. After a short time, a new icon for this program will appear in your system tray, double-click it to open the settings.
  6. Open the “Tunneling” tab and check “Allow remote port forwarding.”
  7. Open the “Users” tab and click the “Add…” button.

    freeSSHd, add user

    Add a user to freeSSHd

  8. In the “Authorization” dropdown, choose “Password stored as SHA1 hash.”
  9. In “Login” field, type the username you wish to use for SSH tunneling.
  10. In the “Password” and “Password (again)” fields, type the password you wish to use for SSH tunneling.
  11. Check the “Tunneling” checkbox, then click “OK.”
  12. Depending on your system and setup, it may not be necessary, but I recommend restarting your computer.

And that’s it.  You should now have a functioning SSH server running on your computer that will allow logging in with the user you specified in steps 10 through 13.  Now, you can create an SSH tunnel on another device as described in part 1 of this series.  The port number for this SSH server will be port 22.


Mac OS X

Mac OS X is the easiest to setup of these three titans of the operating system world.  All the software required is already installed, it simply needs to be enabled.  Here’s how to enable it.

  1. Click the Apple logo in the top left of the menu bar.
  2. Click “System Preferences…”

    Mac OS X Menu Bar, System Preferences...

    Open “System Preferences”

  3. Click “Sharing”
  4. Check the box next to “Remote Login”

    Mac OS X, Sharing Settings

    Check the “Remote Login” option.

  5. Close the “Sharing” window.


And that’s it.  You should now have a functioning SSH server running on your computer that will allow logging in with your user remotely.  Now, you can create an SSH tunnel on another device as described in part 1 of this series.  The username and password for the connection will be your username and password used to login to your Mac, and your port number will be 22.



Make sure you check out the other parts of this series of posts.  This only covers part of the whole procedure.  If you have any issues setting up the SSH server, or suggestions on how I can improve this how-to guide, let me know in the comments below!  I’d also love to hear about any success stories or examples of how you utilize this ability.

SSH Tunnels – Part 1: Client Side

This post is the first in an upcoming series of three posts regarding SSH tunneling.  In this post I will demonstrate how to connect a computer to an existing SSH server that is properly configured and accessible over an Internet connection.  If you do not have an SSH server to connect to and/or your SSH server is not accessible over an Internet connection, check out the other parts of this series.


SSH Tunnel Series

  • Part 1: Client Side:  Discusses connecting to an existing SSH server and using it to encrypt Internet traffic on untrusted networks.
  • Part 2: Server Side:  Discusses creating and configuring an SSH server.
  • Part 3: Network Side:  Discusses configuring your network to allow SSH connections from other networks, and tips and tools to make connections easier.


Example Configuration Used

This how-to requires some previously configured software.  As this configuration will vary from person to person, this can’t be a perfectly personalized guide for your situation.  Instead, I will use some example data as a placeholder for your configuration.  Whenever you see this information in the following how-to, you will need to replace it with the information relevant to your setup.  If you are unsure what this means, feel free to leave some questions in the comments and I will gladly assist you.

Example Server & Network Configuration

SSH Server Address:

SSH Server Port: 22

SSH Username: tacos

SSH Password: tacosareawesome


Establishing SSH Connection

The first part in using an SSH tunnel is establishing the connection to your SSH server.  The methods for doing so vary from operating system to operating system.  I will detail how to make this connection on a typical Linux distribution, on the most recent versions of Mac OS X, and recent versions of Windows.

Linux Client

For many computer related tasks, Linux can be much more complex than its Windows and Mac OS X cousins.  Fortunately, in this regard, that is not true.  Linux is supremely easy to setup provided you know the proper terminal command.

  1. Open a terminal window.
  2. Type the following command: ssh -D 5222 -N -p 22
  3. Follow on screen prompts.
    • If a message appears regarding the authenticity of the host and whether you want to remember the host, accept it.  This should be a one time message.
    • You will need to enter a password.  If you are unfamiliar with terminal sessions, please note that it is very common that when prompted for a password, the screen will remain blank while you type.  This is a security feature, it prevents people from being able to peer over your shoulder and see your password.  Unfortunately, it makes it look as if the terminal is not responding to your typing.  This is not the case, it recognizes your typing, it just doesn’t display it.  Type the password normally, for this example, it is “tacosareawesome,” and hit enter.
  4. The connection should then be established.  If it was successful, the terminal won’t really react.  You’ll see a blinking cursor on a blank line.  This is good.  Now minimize the terminal.  DO NOT CLOSE IT!  Only minimize.  Upon closing the terminal, your SSH connection will be broken, and you will have to reestablish it before continuing.


Mac OS X Client

The Mac OS X procedure is very similar to the Linux one.  In fact, outside of the method for accessing the terminal, it should be identical.  As of this writing, you can find the terminal by opening you launchpad and typing “terminal.”  If you are unable to find it, let me know in the comments and I will gladly help you out.

Once you have a terminal window open, follow the same procedure as the Linux client.

  1. Type the following command: ssh -D 5222 -N -p 22
  2. Follow on screen prompts.
    • If a message appears regarding the authenticity of the host and whether you want to remember the host, accept it.  This should be a one time message.
    • You will need to enter a password.  If you are unfamiliar with terminal sessions, please note that it is very common that when prompted for a password, the screen will remain blank while you type.  This is a security feature, it prevents people from being able to peer over your shoulder and see your password.  Unfortunately, it makes it look as if the terminal is not responding to your typing.  This is not the case, it recognizes your typing, it just doesn’t display it.  Type the password normally, in this case, it is “tacosareawesome,” and hit enter.
  3. The connection should then be established.  If it was successful, the terminal won’t really react.  You’ll see a blinking cursor on a blank line.  This is good.  Now minimize the terminal.  DO NOT CLOSE IT!  Only minimize.  Upon closing the terminal, your SSH connection will be broken, and you will have to reestablish it before continuing.


Windows Client

Unfortunately, Windows is the most difficult to use of the three operating systems when connecting to an SSH server.  Windows does not have a built in SSH client to handle the connection like Linux and OS X do.  This means you will need to download an SSH client for Windows.  There are a handful of programs out there that can do the job.  Probably the most popular, and the one that I use, is called PuTTY.  It is a great little tool and has been around for a long time.  You can download it at  There are a lot of choices in the list of download options, you want the Windows x86 version of the PuTTY client.  Download the PuTTY file and save it.

PuTTY is a standalone executable file.  This means that it does not install on your computer, it simply runs when you double-click on the file.  Therefore, you will want to move that file somewhere that you can find it, and won’t delete it.  Once you have PuTTY downloaded, open it and follow the instructions below.

  1. In the category list on the left, scroll down and find the Tunnels category that is located in the SSH section of the Connection category.  Click on that Tunnels section to bring up its options page.puttyss
  2. In the Source port field, type 5222.
  3. In the radio button field under Destination, choose Dynamic.
  4. Click the Add button.
  5. Scroll back up the category list and find the Session category.puttyss2
  6. Under the Host Name (or IP address) section, type in the address of your server, in the case of this example, it is “”
  7. Under the port, change it to whatever port you are using, in this case, the default of 22 is accurate.
  8. In the Saved Sessions input field, type a name for this connection (e.g. “SSH Tunnel”), then click Save.
  9. Now, double click on the “SSH Tunnel entry in the list below Saved Sessions.
  10. A black terminal window should appear.
    • If this is your first time connecting to the SSH server, you may receive a message regarding the authenticity of the host and whether you want to remember the host.  Click OK.  This should be a one time message.
  11. You will then be prompted to enter a username, “tacos” in this case.
  12. Then a password.  “tacosareawesome” in this case.
    • If you are unfamiliar with terminal sessions, please note that it is very common that when prompted for a password, the screen will remain blank while you type.  This is a security feature, it prevents people from being able to peer over your shoulder and see your password.  Unfortunately, it makes it look as if the terminal is not responding to your typing.  This is not the case, it recognizes your typing, it just doesn’t display it.  Type the password normally, and hit enter.
  13. A connection should be established to your SSH server.  If it was successful, you will likely get some form of a prompt.  If it wasn’t successful, some sort of error message should appear.
  14. Now minimize the PuTTY terminal.  DO NOT CLOSE IT!  Only minimize.  Upon closing the terminal, your SSH connection will be broken, and you will have to reestablish it before continuing.



Configuring Applications to Use SSH Tunnel

The previous section created what is called a dynamic SSH tunnel between port 5222 on your local computer, and your SSH server.  However, the creation of the tunnel does not automatically send your Internet traffic through the tunnel.  Instead, you must direct your programs to use the tunnel.  This is accomplished by configuring  your programs to connect to a SOCKS proxy on port 5222 of your local computer.  Any program that can be configured to use a SOCKS proxy should work with this SSH tunnel.  Most popular web browsers can be configured to connect to this SOCKS proxy.  The instant messaging client Pidgin can connect through a SOCKS proxy.  The Mozilla Thunderbird email client can connect through a SOCKS proxy, and much more.  Below, I will demonstrate configuring the Mozilla Firefox web browser on Windows 8.  Most programs should be very similar.  If you have a specific program you would like me to help you with, let me know in the comments below.

Mozilla Firefox Web Browser

  1. Open Firefox, click the menu dropdown at the top left, and then click Options.
  2. Find the Advanced settings tab, and then the Network sub-tab.ffsocksss1
  3. Now click the “Settings…” button under connection.
  4. Click the Manual proxy configuration radio button.
  5. In the SOCKS Host input field type “localhost”, and in the “Port” field, type 5222.ffsocksss2
  6. Click OK, on the Connection Settings dialog window, and OK in the Options window.
  7. And that should be it.  Firefox is now configured to send all web traffic through the SSH tunnel.


Tips & Tricks

One thing that most computer geeks have in common is laziness.  For us, repeating all of these steps every time we want to enable an SSH tunnel is a horrifying thought.  As such, I have included a tip or two that will remove some of the tediousness and repetition.

Firefox Add-On:

There are several add-ons for Firefox that will enable rapidly enabling and disabling the SOCKS proxy in Firefox.  This is very useful if you only use SSH tunneling some of the time.  My favorite add-on is called Elite Proxy Switcher.  It places a status message in the lower status bar that will cycle the SOCKS proxy connection on and off when clicked.  This keeps you from having to go into the options menu every time you want to turn the tunneling on and off.


WebFaction: The Last Hosting Provider You’ll Ever Need


It’s taken several years, but I’ve finally found it.  WebFaction is the perfect web hosting service for me.

Yes, there are lots of web hosting companies.  A simple web hosting package is extraordinarily cheap and easy to come by these days.  

But most of those services lack the features needed by power users such as myself.  

For us, meaningful hosting almost requires running our own server; whether it is a dedicated server, VPS, or self-hosted server in the garage.  But that’s excessive.  Running your own server to host a tiny website is like burning down a mall because you’re cold.  

What we geeks need is a happy medium between the watered down shared hosting packages and the pyromaniac option of running our own server.

In that middle ground, the options are far fewer, and expensive.  Fortunately, there is one stand out company, WebFaction.

WebFaction markets their product as “hosting for developers.”  To describe their services simply, they offer a shared web hosting service that boasts many of the benefits of a VPS or dedicated server.  Their product is perfect for developers and knowledgeable tech geeks looking to host small to medium sized websites on a budget.


My Previous Hosting Experiences

I have tried several of the dime-a-dozen shared hosting services.  I have also tried a VPS, a dedicated server, and my own self-hosted server.

During that leaping around I learned a lot about what services and technologies I was looking for, and the price I was willing to pay.  In that time, the best solution I found was a shared hosting package offered by 1&1 web hosting.  The exact package I had has been discontinued, but it was one standard middle-range package.   It costed $9/month and included one domain name.

Their service was great, and I highly recommend them if you only need straightforward web hosting.

But, the restrictions of a run-of-the-mill shared hosting package was strangling my geeky side.

I needed to do database operations that require elevated privileges.  I wanted to run shell scripts and scheduled tasks (cronjobs).  And I was experimenting with Python driven websites which 1&1 does not support.

After years of pushing at the boundaries of what the shared package offered, I began researching alternatives.  I didn’t want to increase my costs much, if any, but I was looking for a more flexible service.


I shopped around a lot, but WebFaction had the best looking product and fantastic reviews to go along with it.

Their package only costs me around 50 cents more a month, but it does not include a domain name, and has slightly lower storage space.  So, on the surface, it is a tad more expensive for a slightly lesser package.

But under the surface, it’s a radically different story.  They offer shell access, python hosting, databases with greater permissions, and much more.  The extra capabilities more than make up for the small price difference.



Taking the Plunge with WebFaction

The additional features for a reasonable cost were to enticing to pass up.

On March 17, 2013 I signed up for their service.  I transferred all my 1&1 registered domains to NameCheap, and pointed them at the appropriate WebFaction nameservers.  I changed over all email addresses on my domains to WebFaction, and over a couple weeks migrated my websites and services to WebFaction.

The process was about as painless as transferring domains, emails, and websites could be.  Which is to say it was a terrible experience, but not in any way aggravated by WebFaction.

WebFaction uses a different setup process for websites and services than 1&1 and the other hosts I have tried.  Their “dashboard” is a bit different.  But, they have great documentation and it wasn’t difficult to figure out.  Replicating what I had with 1&1 was fairly easy and was all doable via the control panel, phpMyAdmin and FTP.


Once everything was transferred over and running smoothly I began experimenting with the shell access.

I wrote a shell script that would backup my websites and databases daily to a compressed file that I can download to any other computer with FTP.

I also setup a private MySQL instance so that I could have all permissions on my databases when needed.  This allowed me to fix a pain-in-the-ass timezone issue I had been having with a WordPress plugin and MySQL.

This ability to write a backup script and the private MySQL instance alone made the changeover worthwhile.  The other services and tools they offer sweeten the deal even more.



There’s not much to say other than thank you WebFaction!  You have a wonderful service, and offer the perfect solution for me.

If you are shopping for a web hosting service offering something between “shared” packages and full blown servers, look no further.  Do yourself a favor and signup with WebFaction.  They offer the best of both worlds for a bargain.  You’ll be hooked.

Let me know if you have any great experiences with WebFaction or questions about their service in the comments!


Offering full shell access to fast servers with all your favorite tools pre-installed and maintained for you.



This post is shamelessly loaded down with affiliate links.  Despite this, I assure you that all opinions stated in this post are my own and are valid; I fully endorse all mentioned services regardless of any benefits I may or may not receive.  If you do not wish to support the secret lair I am saving up for, you can visit their websites directly.  If you choose to do so, I will not harbor any ill-will when my lair is completed and I move on to world domination.  I will just cry in my pillow for a few nights and be done with it.

Annoying Trends in Modern Web Design

This is an exciting time for web developers and web users.  In recent years, technology and techniques have evolved that allow for fantastic designs.  Much of this evolution is manifested as looks and layouts with fancy buzzword names.  “Responsive,” “minimalist,” “flat,” “metro.”  As with many trends, there are excellent showcases of the designs and annoying misuses of them.  I want to draw attention to some of these misuses below.


Wasted Space in Minimalist Designs

Minimalism is the practice of reducing fluff and streamlining websites.  When done correctly, this is very pleasing to the eye and makes finding what you want easy.  But when taken to far, your page becomes pointless.  Removing all the useful information and content in favor of empty space is annoying.  You are forcing the user to go to another page in order to find anything out when you have prime real estate to spare.

Minimalist trend: Too much whitespace; not enough content.

Minimalism should be about making content front and center instead of banners, logos, and other fluff.  It is about showing the user only what is necessary, in order to make their experience more pleasant.  Don’t remove the content to minimize; remove the fluff!


Huge Photos or Logos Instead of Content

Huge photos taking center stage is “in.”  It’s what all the cool kids are doing, and it’s what you want to do.  When done correctly, these huge photos are great.  The problem with huge photos is that they take away space for that valuable content mentioned above.  Every once in a while, a site embracing this trend will throw up a photo on the main page… and that’s practically it.  Sure, there may be some navigation up top, or fineprint in the footer, or a slight spattering of hard to read text.  But the primary purpose of the page is to showcase a big-ass photo.

Huge photo trend: Photo replaces content.

And that’s not the point.  Photos are to break up text.  It’s a splash of color and appeal to keep the visitors attention.  In the vast majority of cases, a picture should only be supporting material.  It’s not the main product, its the window dressing.  Go ahead.  Use photos.  Use big photos.  But don’t substitute the content of the site with a big photo, supplement the content.


Limited Contrast Colors

To be fair, this is not a new problem.  It has been around since the dawn of the website era.  In the past however, this problem was largely relegated to smaller websites.  Now however, with the advent of flat design and the more subdued look of modern websites, this problem is more mainstream.  Sites with grey text on white backgrounds are a dime a dozen now.

Flat/Subdued Trend: Low contrast, grey text on a white background

Content should pop out at the user, even with a subtle, subdued design.  If the background is light colored, it should be very light colored and the text very dark.  If the background is dark, it should be very dark and the color very light or plain white.  Having to strain the eyes to read a website is a turn-off to visitors.  Contrast, contrast, contrast!


Unprompted Modals

With the advent of pop-up blockers in every major web browser, unwanted pop-up windows have all but disappeared.  However the use of modal windows has grown significantly, and they are heading down the road that killed off pop-ups.  Some people might know of modals as lightboxes, and they look something like this:

Modal trend: Unprompted modal restricts access to content.

These rebooted pop-up windows are very useful when done sparingly and in appropriate places.  An example of an excellent modal is to show enlarged photos when a thumbnail is clicked.  In that use case, they prevent separate page loads, and keep the user where they were.

But they are frequently abused, as in the case of the website screenshot above.  That website displays this modal on their home page without provocation.  This means every time someone visits their home page, they are assaulted by this message, whether they’ve seen it before or not.  Modals should NOT automatically fire on a page load.  Especially with an ad or a site registration form.  You are keeping your customers from the good stuff on your page.  Use modals sparingly and in a support role, when prompted, only.


Intro Videos or Animations

Ugh… These… I hate these!  I was so excited that we had been moving away from gaudy Flash videos and animations every time a website is loaded.  But now, with HTML 5, CSS 3, and JavaScript, this horrible trend is making a comeback.  I have honestly never understood the idea.  Maybe, and that is a big maybe, your intro is interesting enough for a first time visitor to sit through.  But what if someone wants to revisit your site for information later?  What if the person isn’t looking for the content your video provides, but what the page that eventually shows up after the video does?  Now they have to sit through that thing, or manually skip it if you are nice enough to provide a “skip intro” button.

This trend upsets me to no end.  If I want to find your address or phone number, don’t make me sit through a damn intro video to do it.  I have always avoided Flash like the plague because it is was abused by this intro fluff, and 95% of the legitimate uses for Flash could be replicated with some creative JavaScript and CSS.  Please let these die!  If you want a video, make a video and post it somewhere on your website or on YouTube.  Loading gaudy, unnecessary videos and animations is not what websites are for!



With very few exceptions, loading should be considered evil.  Waiting for content to load is unacceptable.  There are only a handful of seconds before a web surfer determines whether to stick around or not.  You want to impress upon them as much good information as you can in that time.  A loading message is not good information.  You should not have long loading, flashy content in most situations.  If you’re doing something that requires loading simply because you can or to showcase a skill or catchy talent, don’t do it.  Content is king, don’t overdo the presentation and sacrifice the content (a theme seems to be arising here).


One Page When Multiple Will Do

Look, someone has got to say it.  Sometimes content deserves to be broken up into multiple pages.  Yes, having everything on a single page and then scrolling through it, or using navigation to jump around can be cool, and keeps users from having to load pages.  It seems like a logical extension of the don’t reload the page paradigm that AJAX forms and data retrieval allow.  But please don’t put random, unrelated items on a single page.  It’s confusing, makes utilizing search engines a pain, interferes with social sharing, and deviates from what is expected for no good reason.  Each page of your website should have a single, well-defined, clear purpose.  When that purpose is fulfilled, make a new page.



These annoyances that I have listed can be done tastefully and effectively, but doing so requires careful planning and execution by a skilled developer and designer.  If you are a developer and/or designer yourself, remember content is what the visitor is looking for.  Your job is to present that content in an easily navigated, efficient, and logical form.  Please don’t abuse modern tools and design!

Free, Royalty Free Photos For Your Blog or Website

Visitors  to your blog or website have a horrible attention deficit. One of the biggest strengths of the Internet is one of the biggest problems for content generators; the Internet is mindbogglingly large.  In most cases, what you are offering is offered elsewhere, and your consumers will jump ship at the drop of a hat. In practical terms, this means that your content must be unique, genius, or, at a minimum, not turn-off the user.  For the moment, I want to focus on that last one.  One common way to scare a reader away is with a solid wall of monochromatic text.  Even if your readers goal is to, well, read, large blocks of text will send them screaming into the night.  Your text should be broken up with something visually appealing.  This visual stimuli can easily be provided by using some simple photos.


A picture is worth a thousand words.

But this presents a problem. Where do you get these photographs?  Unless content generation is your only job, and maybe not even then, you likely don’t have time to take, edit, and publish relevant photographs for every post you write. Turning to the Internet, with its seemingly limitless supply of photos is an attractive proposition. However, you’re technically not supposed to use most of that eye candy. There are legal and ethical problems with simply Googling an image and then repurposing it for your own use. So how are you supposed to navigate these murky waters of morality, ethics, and legality? When can you use a photo? When can’t you? This is the quagmire that I have found myself in on more than one occasion. In fact, until recently, most of my previous blog posts didn’t use any pictures that I didn’t personally create because I didn’t want to deal with this. But, simply ignoring photos is an untenable position. So, I finally got sick of it and decided to research a solution.



The Core Issue

Most countries in the world are signatories of the Berne Convention for the Protection of Literary and Artistic Works.  This means that most every work “published” to the world is copyrighted by default.  Photographers do not need to register for copyright protection, it is automatically applied.  Not surprisingly, there are numerous legal subtleties to this.  But it’s safest to assume that the photo you have discovered is not safe for you to use unless you are absolutely positive of the contrary.  Since everything is copyrighted, you need to somehow get the author’s permission before using their works.


Getting Permission to Use Photos

Method 1: Ask for It

If the author has not in some way stated that you are free to use a photo (more on this later), you can simply ask the author for permission to use their work.  Be sure to clearly ask whether you are free to use the photo, whether the author wants to be credited (and if so, what information the author wants you to give), and if there are any restrictions.  Most people will be flattered by this request and will react positively.  If the author does give you permission, document it.  Save a copy of all relevant communications and all the information about the author that you have.  This can provide some protections if the author changes their mind later on down the road.


Method 2: Subscribe to a Stock Photo Service

Room service, how can I help you? You want a photo? Wait one moment, we'll be right up.
Creative Commons Attribution 2.0 Generic License  by  inkiboo 

There are numerous websites out there dealing in royalty free photos.  A very popular example is Getty Images.  These services are wonderful and useful, but not particularly cheap.  If you find yourself producing content constantly, it may be worth it. I recommend you think long and hard about subscribing to one of these services, because they will make your life easier.  If you require photos often, it may be worth the money.


Method 3: Creative Commons

But for those of you who don’t find it to be worth it, there is an alternative.  “Creative Commons is a non-profit organization headquartered in Mountain View, California, United States devoted to expanding the range of creative works available for others to build upon legally and to share.”  People who wish to share their photographs with the world can “license” their photos with the ready made Creative Commons licenses.  There are usually a few minor restrictions for photos licensed under Creative Commons, such as having to attribute the work to the original author, but most of the time, these restrictions are very reasonable.

A very useful way of searching for Creative Commons licensed photos is using Flickr.  You can restrict searches to Creative Commons photos only, and thus have a search engine for photos that you are then free to use.  More than that, Flickr provides a tool, that does all the attribution work for you, and clearly states what the restrictions are.  So you search the Creative Commons filtered photos on Flickr, when you find one, give the URL to ImageCodr, and it spits out the necessary code along with a list of restrictions.  All for free, while remaining relatively painless.

Flickr is not the only way to find photos with “free” licenses, and Creative Commons is not the only “free” license, but it is the most convenient combination, with the largest supply of photos, that I have found.  If you have any other good websites or tips for this, please comment and I will update this post accordingly.  All photos in this post were found and are displayed using this Flickr/ImageCodr combination.



It’s true that simply throwing up a mesmerizing manifesto dearth of pictures is a viable option that is easier to accomplish.  However, if you want traffic, a picture is worth a thousand words.