Solved! Colorbox Error: cboxElement Missing Settings Object

I’ve fallen in love with the new Lightbox / Fancybox alternative Colorbox. Unfortunately though I spent half a day in frustration trying to get a simple YouTube clip displayed in an iframe popup.

The errors I received in the console were:

Error: cboxElement missing settings object

Which produced Access-Control-Allow-Origin errors or http protocol errors and a whole myriad of other warnings – just from a simple YouTube iframe setup.

My simple code on the Genesis WordPress site was something like this…

In the Genesis > Theme Settings > Header Script area I had the following:

<script src="/wp-content/uploads/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="/wp-content/uploads/colorbox/colorbox.css" type="text/css" media="screen" />

Now you should immediately note that the header of the site didn’t contain the necessary jQuery dependency needed. As I was working on a WordPress site I added the necessary jQuery by prepending this script into the theme’s functions.php file:

/** Making jQuery Google API **/

function modify_jquery() {
    if (!is_admin()) {
    // comment out the next two lines to load the local copy of jQuery
        wp_register_script('jquery', '//', false, '1.10.2');
add_action('init', 'modify_jquery');

At the Genesis > Theme Settings > Footer Script area of the website I added the following:

$(document).ready(function() {
    $.colorbox.opacity = 0.5;
    $(".youtube").colorbox({ iframe: true, width: 640, height: 480 });

Then within the sidebar of the site it had the following YouTube video link:

<a href="//" class="youtube cboxElement">Click to watch</a>

So, that was the structure that WAS NOT working for me, and I searched high and low for solutions, but didn’t find any that worked.

I was finally able to get the iframe to work by refactoring the footer script to the following:

$(document).ready(function() {
    $.colorbox.opacity = 0.5;
    $.colorbox.iframe = true;
    $.colorbox.width = 640;
    $.colorbox.height = 480;

As you can see the error relates to how the settings object parameter isn’t being passed into the colorbox function properly and therefore needs to be prepended before the element is ready.

After I made this change the YouTube videos worked perfectly. While this certainly is a workaround it isn’t the best option especially if Colorbox is to be used for other elements on the site such as images, but at least it works for now!

Cloud Apps

How To Speed Up WordPress By Serving Static HTML

I have a server that contains five separate WordPress installations. I’ve maintained these WordPress installations on the same NGINX (with php5-fpm) server and lately have been realising that the websites have been having some issues with the MySQL database crashing.

Upon investigating the server’s details through New Relic I found that the server was running low on physical memory.

At present the server has 512MB of RAM and the two largest processes on this server are PHP5-FPM and MySQL – both of these combining to about 60-70% of the RAM available! With all process totalling around 85% of all RAM available.


Knowing this was likely to cause issues down in the future (especially if another WordPress install occurs!) I began investigating ways of mitigating the processes chewing all the available RAM and one such method was by installing the awesome WordPress plugin WP Super Cache.

Upon installing this process I immediately noticed a drop in the total amount of RAM consumption from the server’s running processes. No longer was I running at 85% capacity, now I was politely humming at 55%!

I also noticed a dramatic decrease in page speed for one of the WordPress sites, where BEFORE installing the cache plugin the home page of the site was running at an average of about 3.1 seconds and AFTER the plugin installed the home page was running at an average of 1.9 seconds!

So not only have I received less RAM consumption I’ve also received better page loads.

Win win!

Cloud Apps

How To Add Icons To Widget Headers

Working on a current site required me to enter icons before the widget title in a sidebar.

I knew that WordPress wouldn’t allow such detail, and I didn’t want to have to find another plugin to do what I thought would be a menial task… so by resorting to jQuery it ended up being quite easy to do.

The result was to try to achieve something like this:

Contact Us Icon
Widget with corresponding icon displayed

And the way I was able to get this to operate was by using this code:

(function($) {
// move icons in sidebar to be in front of their header
if ( $('#sidebar').length > 0 ) {
// get all widget titles and loop through each
$("#sidebar h4.widget-title").each( function(index) {
// get the sibling textwidget > span
var sibling = $(this).parent().find(".icon-widget");
$(this).before( sibling );
view raw addWidgetIcons.js hosted with ❤ by GitHub

It assumes within the text/html widget you have already defined the icon element in the body of the widget.

For example:

Title: My Widget Title
Body: <span class="icon-phone"></span>
Remainder of your content to go here.

The CSS of the above would be:

.icon-widget {
margin-right: 5px;
.icon-phone {
width: 10px;
height: 10px;
background-image: url("/wp-content/uploads/2013/08/icon-phone.png");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;