Use jQuery SlideToggle to Show/Hide Multiple Rows or Divs
In this tutorial a set of links control the visibility of a number of corresponding divs or rows. It uses jQuery’s slideUp and slideToggle sliding effects. I have used a list as the triggers that will open close the corresponding div/row – clicking a different list item will close the open content and open the relevant…
Read MoreAdd Scroll Back to Top of page Functionality in WordPress
How to add a scroll back to top of page in WordPress? – I am sure there are a dime a dozen tutorials and plugins on this subject – here is the solution I went with. jQuery scrollToTop was my choice of poison, download and install the scrollToTop.min.js file in your theme’s js folder and create an init…
Read MoreTab to Accordion Responsive Layouts in WordPress
There is a nice responsive Tabs plugin which is jQuery based called aptly called Responsive-Tabs, it handles changing the layout from a tabbed content structure to an accordion layout at a set media query size. The accordion layout is better suited for smaller mobile/tablet sizes. Going from tab to accordion… To a smaller viewport setting……
Read MoreCreate Tabbed Content in WordPress with ACF Repeater and Tabslet
This tutorial walks through how to create a Tabbed content section in WordPress using Advanced Custom Fields and Tabslet. ACF (Advanced Custom Fields) Pro comes with an addon called the Repeater field which allows a user to perpetually add additional rows of data of certain custom fields to a page or post (or custom post type) in WordPress. This can be…
Read MoreCreating a FAQ Page in WordPress using ACF and jQuery
How to create a FAQ page in WordPress using Advanced Custom Fields and jQuery. ACF (Advanced Custom Fields) Pro comes with a great inclusion called the Repeater field which allows a user to continually add additional rows of data of certain custom fields to a page or post (or custom post type) in WordPress. This can be an ideal client…
Read MoreCoding a User Friendly Carousel Slider in WordPress
This tutorial uses Slick and Advanced Custom Fields Pro to code a user friendly carousel slider in WordPress. It uses the gallery field from which a user can easily add or change order of slides without having to touch the code. The example slider in this tutorial will use the Multiple Items Layout in Slick. Getting Slick in…
Read MoreAdd Multiple Site Background Images To Genesis Agency Pro Theme
You can add a multiple images as alternating site background images in the Genesis Agency Pro theme by tweaking the backstretch jQuery plugin that comes with the theme. Out of the box Agency Pro uses one master site background image as set in the Customizer, preferably at 1600 x 1000px. Prepare your images Get your images ready at 1600 x 1000px and…
Read MoreCreate 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 More