Welcome to WP Beaches
WordPress Websites design specialists, based in the Northern Beaches, Sydney
Design, Develop, Host
RECENT POSTS
Add Search & Filter Pro to Beaver Builder Masonry Grid
You can use Search and Filter Pro with Beaver Builders Themer Post Module grid masonry layout, this guide goes through the tweaks needed and used the main blog post archive page. Create your Posts Module Archive Page Create your Posts Module layout on the main Post Archive page with Beaver Themer and add in your…
jQuery replace an image on click
jQuery replace an image on click- example below, this is a method to swap numerous images in HTML by manipulating the images src attribute value from the click of another element such as a button. HTML <div> <button></button> <button></button> <button></button> <button></button> </div> <img id=”change-image” src=”/wp-content/uploads/2018/09/black.jpg” alt=”Black Image” /> jQuery jQuery(document).ready(function($){ $(‘.black-button’).on({ ‘click’: function(){ $(‘#change-image’).attr(‘src’,’/wp-content/uploads/2018/09/black.jpg’); } });…
Remove WordPress Backend Dashboard Widgets
WordPress backend dashboard widgets can be annoying, dangerous, fugly or anxiety producing overload for those leaning to the OCD side. Or you may want to not have your client install Gutenberg from the Try Gutenberg widget and make life interesting or inadvertently visit the Customiser and wreck havoc on your design. Luckily you can remove…
Keep Beaver Themer Sticky Header on Mobile & Tablet
By default the Beaver Themer Sticky Header Option only sticks to the head for large devices only and disappears at tablet and mobile size – this makes for better UX but when the sticky header is minimal it can be useful at all sizes, heres how you can do it. Make sure the row that…
Script a WordPress Valet Install on macOS – bash/wp-cli/wp-cli-valet
By creating a bash script with wp-cli and wp-cli-valet commands on macOS you can create a streamlined and tailored WordPress install using Valet on your local development, this reduces repetitious tasks after a site installation – similar to a blueprint in other WP local developments. The type of tasks may include: Adding and activating a theme…
Git Command Line References
A reference and collection of Git commands used on the command line… View the code on Gist.
Styling WooCommerce Default DropDown Sort Select Fields
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…
Show related posts in Beaver Builder from one CPT to another with ACF Relationships
Showing related posts in Beaver Builder from one Custom Post Type to another is possible with an ACF Relationship field and Beaver Themers Post Module and relationship field connector from version 1.1.1. You can also use the Post Slider and Post Carousel Modules. This tutorial uses 2 CPTs, ‘Lights’ and ‘Projects’, the intent is to…
Adding a loading icon spinner on Search & Filter Pro Archive Page
Search & Filter Pro is a great WordPress filter tool, here is a guide to add a loading icon animation whilst the page is ajax refreshed when the user has selected a filter request and is waiting for the page to load the new results. The plugin author has made 2 event callbacks where you…