Styling WooCommerce Default DropDown Sort Select Field
The default dropdown select field form element is difficult to style in CSS alone – it needs a bit of jQuery love, here is a guide to add some cleaner styling to the WooCommerces default dropdown sort select field – which you can apply to any select field too. Then one with some jQuery…
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 MoreOverride the Beaver Builder LightBox Plugin
Here is a quick guide on how to override the Beaver Builder Lightbox plugin in which you may wish to run another lightbox plugin instead. If you are using the Beaver Builder plugin, then add in your theme’s function.php add_filter( ‘fl_builder_override_lightbox’, __return_true, 999 ); Additionally if you are running the Beaver Builder Theme then you…
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