My Monkey Do

A Log of Coding Solutions

Coding

Disable Responsive Images in WordPress

by

In WordPress 4.4 images are displayed with the srcset attribute.  This attribute allows the browser to select alternative images for best viewing.  Sometimes though this may not be wanted as the image being displayed is the only image you want to show for all users.

To not have any srcset images, use the following:

add_filter( ‘wp_calculate_image_srcset_meta’, ‘__return_null’ );

For other filters new to WordPress 4.4, you can visit the blog post:

Responsive Images in WordPress 4.4

 

One user had a problem with the images in the srcset not having the https protocol and causing security warnings.  This stack overflow post resolves that:

http://wordpress.stackexchange.com/questions/211375/how-do-i-disable-responsive-images-in-wp-4-4

 

Escape strings for use in JavaScript

by

When using parameters from the URL, it should always be sanitized before using it in your javascript.

Using jQuery you can easily do:

var safeString = $(“<span></span>”).text(unsafeString).html();

Using plain javascript:

var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

The stackoverflow discussion can be found here:  http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery

 

Left Sidebar Under Content

by

Problem

Having a left sidebar move under the content in a responsive design needs a bit more thinking.  You can’t just do float left width 100% or display block and let the sidebar fall to the next line.

Solution

When the browser width is narrow, use display:table-footer-group for the sidebar, display:table-header-group for the content, and display:table for the parent container.

See more:

http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table

Run WP-Cron with no visitors

by

Got a website with noone visits or simply a website that is private but still need WP-Cron to be run?  no problem, you have 2 easy options.

1) Setup a free account with set https://www.setcronjob.com ( i like them better because they enable email notifications on the free account).   Create a cron job to visit wp-cron.php on your domain.

2) set up a scheduled task or cron job on your computer.  Mac OS X and Windows PC.  Problem with this though is your computer needs to be on with internet access, and if you ever buy another computer (and don’t turn your current one on) this job will never run:

https://developer.wordpress.org/plugins/cron/hooking-into-the-system-task-scheduler/

Order Non-hierarchical Custom Post Types

by

Non-hierarchical post types are like regular posts which normally do not have a menu_order attribute.  Hierarchical post type are like pages which allows a parent/child and is normally ordered by the menu_order attribute.  What if you have a custom post type that shouldn’t have a parent/child, but you still want to order it by something other than the post date?  This code does the trick on the admin side.

https://wordpress.org/support/topic/sorting-by-menu_order-in-admin-screen-on-non-hierarchical-custom-post-types

iPad textarea not selectable

by

Problem

The textarea on iPad could not be selected and could not have anything entered.

Solution

The textarea in iPad only responds to the ‘touchstart’ event and not the ‘click’ event, but regular input accepts the ‘click’ apparently.  I some javascript where it would catch the ‘touchstart’ event and trigger a ‘click’ event to make things a little faster on iPads.  This prevented the textarea from being selected and edited.

Another possible solution was I didn’t have the cols and rows attribute in the textarea html tag.  Adding these attributes before the class or id attributes solved it for some people.

http://stackoverflow.com/questions/3909843/why-is-my-text-area-disabled-on-ipad