Welcome to WP Beaches
WordPress Websites design specialists, based in the Northern Beaches, Sydney
Design, Develop, Host
RECENT POSTS
Creating 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” data-toggle=”modal” data-target=”#myModal”> Open modal </button> <!– The Modal –> <div id=”myModal”> <div> <div> <!–…
Remove 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…
Set up WordPress Code Standards phpcs on VS Code on macOS
Here is a guide on how to get WordPress code standards using PHPCodesniffer on Visual Studio Code text editor using the WordPress code standards, this will be done via adding PHPCodesniffer via Composer, you can also add PHPCodesniffer via Pear or Homebrew, I used to have it running via Pear but have found it to be not as reliable…
Adding Cloudflare to the mix of ServerPilot and fail2ban
This guide looks at adding Cloudflare to a set up of ServerPilot and fail2ban with a WordPress jail set up. Once you start using Cloudflare as a CDN solution for your hosting, you are adding another firewall into the equation, albeit a very good one, but you may want to pass your servers local firewall…
Add 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 already loaded, it’s a very popular lightbox…
How to Add Web Fonts to Beaver Builder Plugin and Theme
You can add other fonts to Beaver Builder Plugin modules such as the heading module etc by first enqueuing the fonts and then using a filter to add them for the font selection of the plugin modules. Before you do this you need to enqueue the fonts so the plugin can recognise them which you…
Set a Minimum Subscription Period in WooCommerce Subscriptions
WooCommerce Subscriptions currently doesn’t allow a minimum subscription time period when setting up a subscription, nut you can manipulate the WooCommerce Subscription Sign-up fee and free trial fields to allow you to do so. Let’s say you want a minimum 3 month sign up period which then defaults to monthly after the 3 months is…
Add Extra Tabs on WooCommerce Products
WooCommerce allows you to add extra tabs on a product page alongside description, reviews and additional information with the filter, woocommerce_product_tabs. Let’s say you wanted 2 extra tabs – ‘Ingredients’ and ‘How To Use’ as the heading, you can use the filter woocommerce_product_tabs like so… add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ ); /** * Add 2 custom product…
Add 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’]…