Simple CSS Form Checkbox Toggle

The HTML checkbox input is one of the oldest elements to be introduced to HTML. So it’s no surprise that I’m tired of looking at them. But the element is crucial to forms and not going away any time soon. I prefer the look and feel of toggle switches, possibly because of the iOS toggles so commonly used.

There was a time when you needed Javascript to assist with the animation and handling of this style of toggle. No longer. Below is a simple and elegant CSS only solution to handling the toggle.

Sample CSS Toggle Button:

Simple HTML Checkbox Toggle

<div class="toggle-wrapper">
  <input class="toggle-input" type="checkbox" id="my-field-id" name="my-field" value="true" />
  <label for="my-field-id" class="toggle-button"><span>My Label Text</span></label>
</div>

Simple CSS Checkbox Toggle

.toggle-wrapper {
    position: relative;
}
input.toggle-input,
label.toggle-button > span {
    position: absolute;
    left: -9999px;
}
label.toggle-button {
    background: #c87074;
    border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    height: 24px;
    width: 50px;
}
label.toggle-button:before {
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    content: ' ';
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 2px;
    left: 2px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
input.toggle-input:checked ~ label.toggle-button {
    background: green;
}
input.toggle-input:checked ~ label.toggle-button:before {
    -webkit-transform: translate(26px, 0);
    -moz-transform: translate(26px, 0);
    -ms-transform: translate(26px, 0);
    -o-transform: translate(26px, 0);
    transform: translate(26px, 0);
}

That’s it! It works like magic. I love using this checkbox toggle for forms that turn modules or features on and off.

Solved: WordPress Cannot Upload Images (NGINX)

Symptom: WordPress running on NGINX cannot upload images or files. You may see an error message that tells you “permission denied” in the media uploader. Naturally you check permissions on your uploads folder, but the permissions appear correct. You might have even tried setting chmod permissions to 777. However, none of this will help if NGINX, your web server, is denying WordPress the ability to upload to it’s temp directory.

Your php error log may contain something like this.

open() "/var/lib/nginx/tmp/client_body/*" failed (13: Permission denied)

View the temp folders current ownership and permissions. This is where the root of the issue is.

sudo ls -l /var/lib/nginx/

You should get something like this back:

drwx------ 7 owner group 4096 Jun 28 18:52 tmp

Specifically, look at the owner and group. This needs to be set to your WordPress application user and group. Not sure what that is? Go take a look.

sudo ls -l /var/www/pathtowordpress/wp-content

Set the ownership of your temp directory to match the wp-content folder.

sudo chown yourwebapp:yourwebapp /var/lib/nginx/tmp

At this point, if everything went as planned, you should be able to upload images and other files.

Cheers.

Truncate a Phrase Using Words, Not Characters (PHP)

Often when people truncate text in their WordPress excerpts or sample text, they simply limit the total number of characters and add an ellipsis. It’s pretty easy to do, but it usually ends up with a word being broken at the end.

For exampl…

This function will truncate any phrase by the number of words you specify and add an ellipsis if you specify one.

function ssm_truncate($phrase, $max_words, $ellipsis = '') {
   $phrase_array = explode(' ',$phrase);
   if(count($phrase_array) > $max_words && $max_words > 0)
      $phrase = implode(' ',array_slice($phrase_array, 0, $max_words)).$ellipsis;
   return $phrase;
}

One could expand on this and also add a character limit in the event that the phrase contains several long words. Perhaps I’ll do that someday.

The Easy Way to Remove the Popular Tab from a WordPress Taxonomy

Wow, that was a long title for this short article.

First off, I am assuming that you know how to add JS scripts to your WordPress admin. If not, you need to know that first.

So without further ado…

if ($ === undefined) {
    $ = jQuery;
}
if ($('#custom_taxonomy_id-pop').length) {
    $('#custom_taxonomy_id-pop').remove();
    $('#custom_taxonomy_id-tabs').remove();
    $('#custom_taxonomy_id-all').show();
}

There are other ways to go about destroying the meta box and rebuilding it manually. This, however, seems to be less invasive. It’s also a lot less code.

Here’s Why Your Bootstrap Collapsed Alert Jumps When Expanded

I’ve seen this Bootstrap issue countless times. A collapsed div is collapsed and expanded with Bootstrap Collapse. When it opens up, it appears to over-expand and then jump back up. It’s super annoying.

Here’s what your code might look like:

<div class="collapse alert alert-info" id="my-alert-box">My hidden alert box with some text.</div>

Here’s what you should do:

<div class="collapse" id="my-alert-box">
    <div class="alert alert-info">My hidden alert box with some text.</div>
</div>

The collapsed div can’t have padding applied to it. By moving the alert inside of the collapsed div, we solve the problem.

Track Ad Blocking Software with Google Tag Manager

Ad blocking plugins can easily cut into any website’s revenue. Not sure if it’s happening to yours? You can use this simple method to find out just how much your traffic is being affected by AdBlockers.

For the purposes of this illustration, I will assume you’ve already set up Google Tag Manager and Google Analytics. If not, go there first, and get it set up. This tutorial also assumes that you are using jQuery.

Set Up an AdBlocker Tracking Variable

Once you’re inside Google Tag Manager, click on the menu item labeled Variables. Under User-Defined Variables, choose New. Under Choose Type, select Custom Javascript. Then configure the script like this:

function () {
  $(document.body).append('<div id="adsense" style="position:absolute; left:-999999px;">Advertisement</div>');
  var eventValue = 'Blocked';
  if ($("#adsense").height()) {
    eventValue = 'Unblocked';
  }
  return eventValue;
}

Track the Result With a New Tag

Now we have to report this new variable to Google Analytics. Click on the menu item labeled Tags. Set up a new tag like this:

Publish Your Changes

None of this will work until you publish your changes in the Google Tag Manager.

Follow Along in Google Analytics

All you need to do now is watch your Google Analytics in real time as you visit your web site. From Google Analytics, visit Real Time >  Events. Click on Events (last 30 minutes). You will see AdBlockStatus start to appear here. Clicking on AdBlockStatus here will show you how many people are blocking your ads, along with a percentage.

SOLVED: This does not appear to be a WXR file, missing/invalid WXR version number.

Today I went to import a large number of posts from a live WordPress site to a local copy of the site. We all know that the WordPress Importer tool hasn’t had much love lately and is slightly broken. PHP will time time out you and drive you crazy if you try to use it.

However, there’s WP-CLI to help. Using WP-CLI, you can easily import your XML/WXR files. But when you do this, you may get this error:

Error: This does not appear to be a WXR file, missing/invalid WXR version number

Don’t worry, this is super easy to fix.

  1. Open your exported XML file that you are attempting to import.
  2. Find the line:
    <wp:wxr_version>1.2</wp:wxr_version>
  3. Change it to:
    <wp:wxr_version>1.1</wp:wxr_version>
  4. Import the file.

Problem solved, at least for me.

PHP Phone Number Formatting Function

Phone numbers have got to be one of the most commonly gathered bits of information in forms. I created a little PHP function that formats them for the most common US strings, 7 or 10 digits.

The Function

// FORMAT PHONE NUMBERS
function formatPhoneNumber($variableName) {
  global $$variableName;
  // Keep numbers only
  $$variableName = ereg_replace("[^0-9]", "", $$variableName );
  // Remove "1" if it's the first character
  $$variableName = preg_replace("/^1/", "", $$variableName);
  // format for 7 digit numbers
  if(strlen($$variableName) == 7)
    $$variableName = preg_replace("/([0-9]{3})([0-9]{4})/", "$1-$2", $$variableName);
  // format for 10 digit numbers
  if(strlen($$variableName) == 10) // 10 digit numbers
    $$variableName = preg_replace("/([0-9]{3})([0-9]{3})([0-9]{4})/", "($1) $2-$3", $$variableName);
}

Calling the Function

if (isset($_POST['phoneNumber'])) {
  $phoneNumber = addslashes($_POST['phoneNumber']);
  formatPhoneNumber('phoneNumber');
}
// Do something with the phone number, i.e. insert into a db...

Things This Doesn’t Account For:

Obviously, this does not perform any form validation. If anything other than a 7 or 10 digit number is submitted, it will only be stripped down to numbers.

Body Height + CSS Background Images

If you’ve ever tried adding a background to the body element of a web page, you may have been a tad frustrated. By itself, the background will only cover the used portion of the page. If the height of the browser window is taller than the page, your background is cut short. Continue reading Body Height + CSS Background Images

Easily Redirect Your Entire Domain with .htaccess

Permanently moving one domain to another is a huge task. Creating a single redirect for each page on your site is unrealistic and would suck the very life from your body. Well, relax – there’s an easier way, using htaccess. This will redirect all of your pages to their respective new pages on your new domain. Continue reading Easily Redirect Your Entire Domain with .htaccess