WordPress & Cloudflare & that admin bar

When using Cloudflare or other external caching services, you really don’t want the admin bar to be cached (it happened today and would show itself to public users).

The filter below stops the admin bar from displaying on the public side of the WordPress site.

The nocache in the url query is used to bypass the proxy cache for this particular website (we also add it to all url’s if the user is logged in).

/**
* Show admin bar when logged or when nocache is being used on frontend site.
*/
add_filter('show_admin_bar', function()
{
  if (is_user_logged_in()) {
    if (is_admin()) {
       return true;
    }

    if (!isset($_REQUEST['nocache'])) {
      return false;
    }
  }

  return false;
});

Thie code below adds nocache query string to every URL, when the user is logged in. This helps bypass the proxy cache (with a page rule).

/**
 * Add no cache to generated links.
 *
 * @param string
 */
function add_nocache_to_url($url)
{
   if (is_user_logged_in()
      && stripos($url, 'nocache') === false) {
      $url .= stripos($url, '?') === false ? '?' : '&';
      $url .= 'nocache=1';
   }

   return $url;
}

/**
 * Only override when logged in.
 */
if (is_user_logged_in()) {
   add_filter('home_url', 'add_nocache_to_url', 99, 1);
   add_filter('post_link', 'add_nocache_to_url', 10, 1);
   add_filter('page_link', 'add_nocache_to_url', 10, 1);
   add_filter('post_type_link', 'add_nocache_to_url', 10, 1);
   add_filter('category_link', 'add_nocache_to_url', 11, 1);
   add_filter('tag_link', 'add_nocache_to_url', 10, 1);
   add_filter('author_link', 'add_nocache_to_url', 11, 1);
}

WordPress Term Taxonomy count is not in sync

This sql snippit updates the usage count of taxonomy terms.

UPDATE `wp_term_taxonomy`
JOIN (SELECT `term_taxonomy_id`,count(*) as `new_count`,`count` as `old_count`
FROM `wp_term_relationships`
JOIN `wp_term_taxonomy` USING (`term_taxonomy_id`)
GROUP BY `term_taxonomy_id`) as term_counts USING (`term_taxonomy_id`)
SET `count` = `new_count`
WHERE `old_count` != `new_count`

Animation not smooth / appears jerky

Sometimes CSS animations using jQuery can not appear smooth or comes across jerky.

The reason for this is jQuery is animating the height of the container without including the padding that may be being applied.

The very simple solution is to wrap the content with a container that doesn’t have any padding.

Making table rows sortable with jQuery

Making table rows sortable.

.sortable({
  axis: 'y',
  containment: 'parent',
  items: '> tr',
  handle: '.item-order-handle',
  placeholder: 'change-order-placeholder',
  tolerance: 'pointer'
 });
.ui-sortable-helper {
  display: table;
}

Notes

  • Need to explicitly set the column widths in your TD tags (using <col width=”20″> doesn’t pass on to the helper)

References

Re-order columns with CSS

I needed to re-order my Bootstrap columns (rows + col) when viewing the page on a mobile.

<div class="row">
<div id="first-column" class="col"></div>
<div id="second-column" class="col"></div>
<div id="third-column" class="col"></div>
</div>
#first-column { order: 1; }
#second-column { order: 2; }
#third-column { order: 3; }

@media (max-width: 768px) {
#second-column { order: 3; }
#third-column { order: 2; }
}

References