Welcome to WP Beaches

WordPress Websites design specialists, based in the Northern Beaches, Sydney
Design, Develop, Host


Toggle Bootstrap Off Canvas Content Panels with Buttons

Bootstrap Off Canvas Content

Utilising a Bootstrap 4 WordPress theme – below code snippets to toggle off-canvas content. For multiple panels of content the trigger button data attribute – data-trigger needs a unique value that matches its content panel in the case below it is the article element which has the matching id value. HTML <b></b> <button data-trigger=”#card_mobile” type=”button”>Show…

Output WordPress Custom Query Posts Loop in Bootstrap Modals

Loop Query Bootstrap Modal

Here is some code to output a custom loop via Shortcode that will display a posts full content in a Bootstrap Modal without linking back to the single post page. This is done on a WordPress theme that has the Bootstrap framework already loaded. A new loop is created only showing the post title and…

Change ‘Return To Store’ text button in WooCommerce

Woocommerce Return To Store Button

WooCommerce version 2.6 has brought out a new text filter that lets you change the text of ‘Return To Store’ on the button that appears on the cart page when the cart is empty. The filter is called woocommerce_return_to_shop_text and this is how you can use it. add_filter(‘woocommerce_return_to_shop_text’, ‘prefix_store_button’); /** * Change ‘Return to Shop’…

Create a WooCommerce Featured Products Loop of Featured Images

Woocommerce Featured Product Loop

Here is a guide on how to create a WooCommerce featured products loop of featured images. The featured product option is chosen from the star column in the WordPress dashboard backend of the WooCommerce products, ‘featured‘ it is a term that belongs to the taxonomy named ‘product_visibility‘.     View the code on Gist. So…

Create a slider of WooCommerce Product Featured Images

Woocommerce Slider Images

Here is how you can create a slider of WooCommerce product featured images using a jQuery slider. There are many slider scripts you can use, this one uses Slick Center Mode, this one from Slick adds a CSS class on the center image by which you can target with CSS and add in transition  and…

Adding Bootstraps Collapse to a Beaver Builder button and module

Bootstrap Collapse Beaver Builder

If you have the Beaver Theme here is how you can add Bootstraps Collapse effect to a Beaver Builder row or module can be achieved using the Bootstrap data-toggle attribute. Let’s say you have a button which when clicked reveals a module below it and another click hides the module again. As below… Example Pellentesque…

Updating WordPress Plugins Versions with wp-cli

Wordpress Wp Cli Plugin Updates

With wp-cli installed on your webhosting  you can upgrade your WordPress plugins to specific versions of the plugin, all plugins, all but certain plugins and minor or patch releases. Also you can test the update with a dry run option just to make sure installs go without error. Show all WordPress Plugins wp plugin list…

Adding jQuery Slide Toggle to a Beaver Builder button and module

Jquery Slide Toggle Beaver Builder

Adding a jQuery Slide Toggle effect to a Beaver Builder row or module can be achieved with some Javascript and CSS. Let’s say you have a button which when clicked reveals a module below it and another click hides the module again, give the button a class of .trigger-button and the module an ID of…

Avoid Blank Square FontAwesome 5 Icons when used as CSS Pseudo Elements

Fontawesome Blank Square

Are your FontAwesome 5 icons appearing as blank squares “□ □ □ □” ? Are the icons displaying on Desktop ok but not displaying on iOS Mobile Safari iPhones or iPads? – you need to tighten up your CSS rules in order for them to display correctly. Add FontAwesome 5 CSS First up is to…