Create Equal Heights for Text Columns in a Row
To create equal heights for text columns in a row depending on data entered can be a CSS challenge, instead of futzing with CSS and height rules at different media queries there is a nice jQuery solution that automagically solves the layout aptly called… matchHeight. So in the above I am using custom post types with custom fields,…
Read MoreCreate a Masonry Layout on the Home/Blog Page in WordPress
WordPress already comes with Masonry either as pure Javascript or a jQuery plugin, here is how you can style a home blog page in a Masonry format with 3 columns. Enqueue the built in WordPress jQuery Masonry script and create a initiate file which targets our .home .entry posts. Add some CSS style for…
Read MoreCoding a Slider with Slick and ACF Pro in WordPress
Slick is a nifty jquery plugin that makes spiffy (yes I said spiffy) sliders, combined with Advanced Custom Fields Pro gallery field you can make an easy to use client interface to allow them to add images to a slider on a post/page or custom post type. The example slider in this tutorial will use…
Read MoreUsing wp_localize_script with jQuery variables including strings, booleans and integers
The use of wp_localize_script is an API in WordPress is to retrieve PHP values from the database to use in javascript/jquery scripts, it can also be utilized to make string values language translatable if required, but also used to pass user defined variables/settings say from a plugin to load via a jQuery init file for a jQuery plugin. By…
Read MoreUp and running with Sidr Off Canvas Menu for WordPress
Sidr is a very popular jQuery off canvas menu that can slide content from the left or right into the viewport which is a great solution for mobile or tablet display. Here’s how to get it up and running in WordPress. First up is to download the latest zip which contains a minified jQuery file and…
Read MoreUsing ScrollReveal.js in a WordPress Genesis Theme
ScrollReveal.js is a javascript resource for animating objects as they appear in the viewport, here’s how to get it going in a Genesis theme for WordPress. Above are four colored balls set to animate with scrollreval each time they enter into the viewport. You can apply the affects to small page elements or larger containers, for example…
Read More