Helpers

Each of these helpers will save you time and img just may change your life. 😉

dd()

With die & dump is a big help with you're troubleshooting the results of a query or need to know what the object you have contains. While you wouldn't use dd in production, you'll use it a lot in developing a site to check your data.

If it's a variable or a return, you can use dd to check its contents.

// get all members
$members = wpm('q.member')->get();

// die and dump the contents of $members to the page
dd($members);

img is on the fly image creation and caching. It works perfectly with featured image or Advanced Custom Fields. When you need to add an image to your theme dynamically, use img to define the image area and then pass it the id of the image to display. With img you do not need to predefine your image sizes in your function file or use one of WordPress' 3 image sizes. This frees designers and developers to select image sizes that work well in each part of the theme without worrying about the rest.

img can return an the new image url, the complete image tag and can accept an array that will allow you to adjust the image tag's attributes.

->fit()

fit allows you to define an area the image should fit within. The image will only be scaled proportionally to fit in this area and will not be cropped. Fit will not automatically create an image that is beyond the natural width and height although this can be forced with the upscale method.

// create an image element that will fit in a width of 300px
// and a proportional height
$img = wpm('img')->id(766)->fit(300)->get();

// return a url of an image that will fit in a width of 300px
// and a proportional height
$imgUrl = wpm('img')->id(766)->fit(300)->url();

// return an image, as above, and add a border of 1px with the
// "style" attribute
$img = wpm('img')->id(766)->fit(300)->get(['style' => 'border: 1px solid red']);

// return an image that will fit in a 400x200 area
$img = wpm('img')->id(766)->fit(400, 200)->get();

// return an image that will fit in a height of 200px by the proportional width
$img = wpm('img')->id(766)->fit(null, 200)->get();

// provide an image that will fit in an area of 500x500 and force it to
// the largest size possible
$img = wpm('img')->id(766)->fit(500, 500)->upscale()->get();

// provide an image, as above, but set teh quality to 50%
$img = wpm('img')->id(766)->fit(500, 500)->quality(50)->get();

->resize()

While fit only scales an image, resize will create a new image that is cropped to the given dimensions. It does this by scaling the image proportionally to either the given width or height and then cropping the center of the image by the opposing pixel dimension.

As an example, an image of size 1400x1200 being resized to 300x150 will be scaled to a width of 300 and a proportional height. Next the image will be cropped to display the center 150px vertically and cutting off the top and bottom.

If the original image is 500x1000, it would fit the height first to 150px and then cut the width to the middle 300px cropping the left and right.

// resize an image to 300px in width by the proportional height and return
// the url to the new image
$img = wpm('img')->id(766)->resize(300)->url();

// resize an image to 300px in width by proportional height and return the
// image tag
$img = wpm('img')->id(766)->resize(300)->get();

// resize an image to 400x200 and return an image tag with a set border style
$img = wpm('img')->id(766)->resize(400, 200)->get(['style' => 'border: 1px solid red']);

// resize an image to 500x500 and scale the image beyond its natural limits
// if necessary
$img = wpm('img')->id(766)->resize(500, 500)->upscale()->get();

// resize an image to 500x500 with the image quality of 50%
$img = wpm('img')->id(766)->resize(500, 500)->quality(50)->get();

Paginating results requires previous/next buttons or a numeric page navigation menu. Let these helper functions to the work for you.

// get the previous page url
$url = wpm('wp.nav')->prevUrl();

// get a link to the previous page url
$url = wpm('wp.nav')->prevUrl('Previous');

// get the next page url
$url = wpm('wp.nav')->nextUrl();

// get a link to the next page url
$url = wpm('wp.nav')->nextUrl('Next');

// echo a numeric page navigation.
echo wpm('wp.nav')->paginate();

// echo a numeric page navigation and pass in arguments to get_the_posts_pagination
echo wpm('wpm.nav')->paginate([
    'prev_text' => 'Prev',
    'next_text' => 'Next'
]);