Adding Multiple Fading Images To A Background with jQuery
You can add multiple sliding/fading images to a background HTML element using the Backstretch jQuery plugin, this is great if you just want to alternate a number of images behind another web page element similar to a slider but without the overhead of using a slider plugin. Image Preparation Generally you’ll want to optimize your…
Read MoreAnchor Link Offset to Other Pages with Fixed Header Size
Here is a snippet of code that will link to a anchor link on another page with an offset which allows for a fixed header size, so the link appears just below the header. The code snippet is documented. View the code on Gist.
Read MoreImage Carousel Thumbnail Slider with ACF Gallery Field in WordPress
Here is a guide on how to make an image carousel thumbnail slider with ACF in WordPress using the ACF gallery field. Lightslider, a lightweight image slider seems to fit the bill perfectly – I need it to just display simple thumbnails below the main image which on click/touch show the image in the main slide…
Read MoreUse 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 MoreResponsive Layouts – Going from a Tab Layout to an Accordion 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 contant 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… Basic HTML…
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 More