Set up WordPress Code Standards phpcs on VS Code on macOS

atom-codesniffer-wpcs

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…

Adding Cloudflare to the mix of ServerPilot and fail2ban

Cloudflare Fail2ban Serverpilot

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,…

Add a lightbox popup to a jQuery lightslider carousel

Magnific Popup Lightbox

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…

How to Add Web Fonts to Beaver Builder Plugin and Theme

Add Web Fonts Beaver Builder

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…

Set a Minimum Subscription Period in WooCommerce Subscriptions

Woocommerce Minimum Subscription

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…

Add Extra Tabs on WooCommerce Products

Woocommerce Extra Product Tabs

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…

Add Navigation Arrows in WooCommerce Product Gallery Slider

Woocomerce Navigation Arrows

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 addadd_filter( ‘woocommerce_single_product_carousel_options’, ‘sf_update_woo_flexslider_options’ ); /** * Filer WooCommerce…

Add Search & Filter Pro with Ajax Reload to Beaver Builder Post Masonry Grid

Masonry Ajax Beaver Builder Reload

You can use Search and Filter Pro with Beaver Builders Themer Post Module grid masonry layout with Ajax reload. This guide goes through the tweaks needed and uses a custom post type archive page with a Post Grid module that…

Conditional Check if Custom Post Type Posts Are Published

Check Cpt Loop Conditionally

You can check on the existence of published Custom Post Types by using a new WP_Query loop with an if/else statement, as the CPT is already registered it is difficult to use a conditional check without checking the loop of…

Add Search Toggle Icon at End of Menu in WordPress

Add Search Menu Wordpress

In WordPress, you can add a search toggle field at the end of a menu using the filter wp_nav_menu_items or a similar menu filter by which you can append menu items at the end of the targetted menu, add a…