Welcome to WP Beaches

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

RECENT POSTS

Styling Default Select DropDown Fields

style-select-dropdown

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 change default dropdown sort select fields.   Then one with some jQuery magic… Using select2.js So the above select field was transformed by…

jQuery Document Ready Function For WordPress

Document Ready WordPress

You can set up a jQuery document ready function for use with WordPress and use the jQuery library that WordPress ships with rather than use another one. Here are three ways to use jQuery document ready function with WordPress. Usually, a jQuery document ready function is expressed as below. $(document).ready(function(){ }); jQuery document ready 1st…

Set Up SMTP/Email for Local Valet WordPress Development

Mailhog Smtp Local Setup

If you have a Laravel  WordPress Valet workflow, you can use MailHog as an email SMTP catchall solution when testing email issues. You set up an SMTP host on the WordPress install and all email sent gets captured in MailHog, a minimal and straightforward solution. Install MailHog Install MailHog and start via Homebrew brew install mailhog…

Add text block to a Gravity Form visible when sent as email

Gravity Form Disable Input

You may want to show arbitrary text on a Gravity Form that is not shown on the website but is sent on the email along with the other fields. In the Gravity Form add a paragraph field and add in your text in the advanced tab in the default value field – also give it a…

Sticking An Element To The Top Of The Browser After Scroll

You can stick an element to the head of the browser after a user has scrolled past it with either pure CSS or jQuery with the help of Waypoints and Sticky Elements. CSS You can actually do this with a simple CSS property position:sticky You would apply some CSS to an element that you want…

Add WooCommerce MyAccount Page Login/Logout to Menu

This code adds a login/logout link to your WordPress primary menu to log the user into the WooCommerce My Account page and then also log out to the same or different page. It differs from the referred article as that adds the WordPress default login/logout page. The menus need to be registered via register_nav_menu and positioned with theme_location,…

Display CSS Animations When In Browser Viewport

Animate Browser Viewport

CSS Animations can be easily applied to elements in HTML and viewed in the browser, but when the animation is lower down on the page it may have animated already before the user has scrolled to it. Here’s where Waypoints can solve the problem. (This example is done using WordPress). Waypoints allows you to run…

Add Javascript and CSS files to the Head and Footer in WordPress

Getting it right in the head As a hack every now and then I used to add in javascript or CSS files with links hardcoded directly into the header.php or footer.php template files of a WordPress theme. This really is a no no! as this can result in script conflicts or duplications or just downright badness,  there…

Install and Configure wget on macOS

Xcode Yosemite

macOS Mojave, Sierra, and earlier versions come with the command line utility called ‘curl‘ which is a network transfer tool, it does not come with the popular ‘wget‘, in fact, ‘curl‘ can probably get you by just fine, check man curl at the command line to see its usage. Otherwise, let’s look at getting ‘wget‘… this can…