Create A Bootstrap 4 Carousel Slider With ACF Image Repeater
Create a Bootstrap 4 carousel slider of images with ACF Pro Repeater field in WordPress. There are a few options in that the carousel can be plain, add navigation and add a caption, 4 examples can be seen below. Create the ACF Repeater fields for Bootstrap carousel. Here an image and text field…
Read MoreCreate a Loop of Bootstrap 4 Tabs in WordPress with ACF Repeater
This tutorial looks to Create a while loop of Bootstrap 4 Tabs with an ACF Repeater field in WordPress. You need to already have Bootstrap 4 enabled in your theme and ACF Pro plugin installed. Create the ACF Repeater fields for the tabs. You can create as many tabs as needed, assign the field…
Read MoreFix Google Search Console Coverage Errors – WooCommerce
Google Search Console alerts users when certain pages submitted in the sitemap are set to no-index and generates a coverage error, this can include WooCommerce pages like… /cart /checkout /my-account /?-add-to-cart These pages shouldn’t be cached or indexed and are correctly set to noindex, to remove the error you can add them to your robots.txt…
Read MoreCreate An ACF Repeater Accordion in WordPress
Create An ACF Repeater Accordion for use in WordPress. Accordions can be a handy way of managing larger amounts of data to display only certain bits at a time. Create the ACF Repeater fields for the accordion. You can create as many accordion fields as needed, assign the field group to a post or…
Read MoreCreate A Responsive Bootstrap 4 Tab/Accordion ACF Repeater Loop
Create a Responsive Bootstrap 4 Tab/Accordion ACF Repeater Loop for use in WordPress. Bootstrap 4 Tabs stay as tabs in all viewport sizes which isn’t great responsively for larger content, however, this code has been adjusted to go from Bootstrap tabs to accordions at a certain breakpoint. (There is also another non-Bootstrap script that does…
Read MoreAdd Product Price in WooCommerce as a Shortcode
Looking to insert a WooCommerce product price into a layout, well you can add the WooCommerce Product Price as a shortcode using the product ID as an attribute for the correct product. The code below goes into your functions.php file, the add the shortcode where you need to display the price. add_shortcode( ‘cl_product_price’, ‘cl_woo_product_price_shortcode’ );…
Read MoreCreate an ACF Repeater Loop of Bootstrap Modals in WordPress
Create a while loop of Bootstrap Modals with an ACF Repeater field in WordPress. Create the ACF Repeater fields. You can create as many fields as needed, this example uses 3 basic fields, assign the field group to a post or page and populate the repeater rows. Add the ACF Loop Code View the…
Read MoreCreating a loop of Bootstrap Modals
To create a loop of Bootstrap style modals on a page, you can use a foreach or while loop in PHP. First, let’s do the code for one modal. Single Modal Code <!– Button to Open the Modal –> <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”> Open modal </button> <!– The Modal –> <div class=”modal” id=”myModal”>…
Read MoreRemove FOUC (flash of unstyled content) on jQuery Lightslider Carousel
When more than one slide is used on a lightslider slider/carousel, the slide images are initially loaded underneath each other and jump into place which causes the layout to jump around which is known as a flash of unstyled content or FOUC. There is a CSS class name that already ships with the lightslider CSS…
Read MoreAdd a lightbox popup to a jQuery lightslider carousel
Adding a lightbox pop up to a lightslider slider/carousel can be achieved by adding a script such as magnificPopup to a lightslider callback once the slider has loaded. The callback name is onSliderLoad which is fired when the slider is loaded. Make sure you have the magnificPopup script loaded, it’s a very popular lightbox and…
Read More