Add Dot Pagination to WooCommerce Product Gallery Image Slider
You can add dot pagination to WooCommerce Product Gallery images by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider which it has a few more configurable options. By default the product gallery navigation uses thumbnails but this can be swapped to dots by changing the ‘controlNav’ value. In functions.php add…
Read MoreCreate A Bootstrap 4 Carousel Slider With ACF Image Repeater
Here is how to create a Bootstrap 4 carousel slider of images with ACF Pro Repeater field in WordPress. There are a few options in that the Bootstrap carousel can be plain, add navigation and add a caption, 4 examples can be seen below in the demo lower in the post. Create the ACF…
Read MoreAdd Navigation Arrows in WooCommerce Product Gallery Slider
You can add Navigation Arrows in WooCommerce Product Gallery by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider and it has a few more configurable options. In functions.php add add_filter( ‘woocommerce_single_product_carousel_options’, ‘sf_update_woo_flexslider_options’ ); /** * Filer WooCommerce Flexslider options – Add Navigation Arrows */ function sf_update_woo_flexslider_options( $options ) { $options[‘directionNav’]…
Read MoreAdding 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 MoreOverride Cyclone Slider 2 Plugin Template in WordPress Active Theme
The WordPress Cyclone Slider 2 Plugin is an easy to use, free, slider solution for sliding images and text, this guide looks at overriding it in the WordPress active theme. Cyclone Slider comes with a couple of templates but you will probably find that you need to create a unique design to follow your layout,…
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 a Loop of Featured Images in a Slider from Posts in Genesis
You can create a slider of Featured Images from the posts in Genesis by creating a custom loop and using Slick Slider. Setting Up Slick Slider First download and set up the Slick files needed, you’ll need to file these in your theme’s js and css directories: slick.min.js ~> js slick-theme.css ~>css ajax-loader.gif ~>css fonts/ ~>css…
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 MoreAdd a Slider to the Home Page in Genesis Theme WordPress using Cyclone Slider
Sliders have been slammed a lot recently, notably for their effectiveness and usability, however within certain contexts they are still relevant and more importantly still popular with clients, their use may be more relevant to certain industries, their usage may be better suited to subtle areas of the page. That said, here is a guide…
Read More