Much More Modern & Micro Mobile Menu

Watch carefully – at department stores, restaurants, arenas, on the bus – you’ll notice something. Something alarming. Every single freaking person is on a smart phone. Yes, everyone. Jess got a text from her Grandma yesterday. Her Grandma! If your website isn’t responsive, easy, and quick to use on a mobile phone that all of these people have, you’re doing something wrong.

I’ve used a few different ways of creating off-canvas navigations, making the website feel more like an app where the navigation is hidden “behind” the current viewport, and the active screen is animated, sliding out of the way. I like this, I do, but it’s cumbersome – it often requires modernizer, lots of jQuery window calculations and event binding, CSS animations, and lots more. Typically it calls for building a second navigation, which defeats the “responsive” idea. Adding on, it’s no longer the norm of popular apps to have off-canvas sliders, it’s not a good direction.

Things are changing, getting simpler, and cleaner. Myself, I’m on a minimal binge – in both design and code, so I’ve written a new, much smaller and simpler responsive navigation:



Copy/paste this and it looks like crap, so lets focus on the functionality of it here.

The desktop and mobile nav are differentiated by our @media query.
Normal desktop looks like a normal nav, when we’re less than 960px wide, we’re display a label as a navigation drawer, which when clicked, alters the input‘s :checked pseudo element and determines the visibility / drawer status of nav.

It doesn’t get much more simpler than this for a responsive navigation.

Opengraph Image From Featured, Inline, or Attached

For opengraph and similar social sharing protocols, you’ll want to include graphics with your post and pages whenever possible for blatantly obvious reasons. Often these images are scraped from the webpage and made selectable by the share’r, which is why you’re able to specify which image you’d like to show when shared.

Sometimes (and with some WordPress setups) it’s hard to say whether the post will have a featured image, an inline image, an attached image, a gallery of images, or none at all. Furthermore, some featured images are on the webpage but shown with CSS instead of scrap-able <img alt=“” /> tags.

For that problem, I wrote this solution:

Where logo.png is your fallback image, if your post/page has nothing else. You can change the order of the if/else conditions to prioritize what you’d like (i.e. attached images to be found before inline images).

Pro tip of the day: Need more images on your text-heavy blog?

Change Primary Domain of a WP Network While Domain Mapping

There may be a variety of reasons for having to do this, despite how daunting it may seem, it’s actually not that big of a deal.

If we want to change to on a domain mapped WordPress Network, we just have to modify a few settings in WordPress, all records manually in the database, and then write a rewrite for external links pointing to the old domain.


Change the network domain name in wp-config.php:

PHP MyAdmin

There’s a few options here – it depends on the scale of your network, and how many plugins your networks site use that store information in serialized strings.

The main* records that will allow your network domain change are:

However beyond that, you will need to modify all instances of in the database because when you change the main mapped domain, your domain mapping plugin will not modify the hard-coded urls anymore (i.e., in TinyMCE if you add a link, the link will be, on the front end, the domain mapper will change to When switching primary domains, the detection of the old network url is lost, and must be fixed).

So instead of modify records individually, I’d recommend exporting the entire database, doing a find+replace of the domains (don’t bother with http:// or trailing /, as some records don’t include this, keep it simple, just the domain names) with a text editor, wipe the remote database, then importing the altered .sql file.

Note: I mentioned serialized strings because they may break when doing the find+replace because the string length of the domains. Please take extra care into making sure things like widgets are preserved.


For anything external, write a redirect in your .htaccess file. The 301 will fix these links overtime for indexing on Google etc.


I recommend holding onto the old domain as long as possible (to preserve these external urls, maintaining SEO ratings).

Get TOP Status’s into PHP/HTML

I used the following below to create a widget in Panic’s Status Board.

SSH Setup

To start, we’ll need to configure top to show more than one core. To setup top to reveal all CPU’s by default, login w/ ssh to your server and run the following:

1 reveals all cores. shift+W saves the current screen as default. Exit top once complete w/ $ cntl+C.

Next we’ll add a cronjob to make top output to a text file every minute. Launch the crontab editor

add at the bottom:

Where ‘/…/’ is a real path to somewhere on your server. I recommend keeping it 1-below your public /httpdocs/ directory so the world can access it but your scripts can. Then to save changes: ZZ. You can double check that it’s installed with crontab -l

should show your new addition. That’s it. Now every minute top will write to your top.txt file.

Now on to scripting.

We need to use some PHP to import and parse the top output data, and jQuery to reload the import/parse portions of the page for a continual update.

Make a php file, and add the following JS to the head:

Where http://…/this_file.php is the URI of your current file.

Where /var/www/…/top.txt is the path to your top output, and 16 is the number of cores you have on your server (if unsure, count them in the top.txt output). The “load time %” is a percentage out of 5 seconds. 0% being 0 load time, 100% being 5 second load time.

Once this is setup, done, and working you’ll now have a file that continually refreshes your servers output. From there you can use tools like gauge.js to animate some gauges, or create your own.

Increase WordPress Memory Limit

Nothings worse then getting an email about someone being unable to upload a 6mb .PDF because it “exceeds the upload file size limit

Here’s the fix – but important note: raising postmaxsize increases the possibility of DoS attacks on your server:

In functions.php add:

If that doesn’t work, it could be a apache restriction, in .htaccess add:

If you’re still unable to it could be a php restriction, in php.ini add:

Obviously change the 32mb/32000kb as needed.


The above worked for me 99% of the time, but I had once instance where I need to add the following into functions.php as well:

Responsive Height, Maintain Ratio

Say you have an element #banner with a background-image. On a responsive design that’s width:100%; you’ll notice your image will be auto croped by the viewport change. The solution is simple: background-size: cover; but a pain that follows is the height of the element will not scale down or up with the width change, leaving this weird empty vertical gap or a very cropped image.

Here’s a fix to figure out and change the height end_h based on the current window width, keeping background-image ratio making it responsive/scalable:

This resize happens when your script is loaded, as well as on any browser resize event.

date_default_timezone_set() Not Working

This is a silly amateur hour error that I’m positive lots of people miss. datedefaulttimezone_set() needs to be called within functions, it isn’t a global function.

The script below will demonstrate the how datedefaulttimezone_set() affects date() (and time()).

Will output:

// Eastern
// Server‘s Time
// Central
// Eastern

WordPress Simple Cronjobs

WordPress makes it super simple to run cronjobs.. To add one, just place the following code in your functions.php file and change the function/action prefix’s to your relevant plugin name/functions.

A little break down for those unfamiliar: the first action runs mypluginschedulecron() on each load. If your cronjob (myplugincronjob) is not registered, it‘s scheduled into WordPress’s cron and becomes a hook. Once it’s registered/schedualed with WordPress, the second action myplugincronjob is usable and runs your cronjob function (myplugincronfunction).

If you want your cronjob to occur less frequent than ‘daily‘, you need to add a additional timespan. Since what I’m writting this for has dynamic timespans, I’ve added several intervals for weekly, monthly, quaterly, biyearly, and yearly cronjobs:

If you’re uncertain if your cron function is working and want to test it, you can uncomment the third action and refresh the page (to run what WordPress cronjob will run on it’s intervals). If you’re uncertain if your cronjob is actually scheduled you can install Cron View, a plugin that displays the available schedules and the scheduled tasks.