Just another Bedrijfje Dat Websites Maakt
Contact Form 7 version 5.6 introduced Schema Woven Validation (SWV). It allows validation rules to be defined once on the server side, and have them take effect on the client side as well (before the form is submitted). This technique is nice and useful for 99% of users, but some forms aren t meant to be ... Read More The post Contact Form 7: disable client side validation appeared first on BDWM .
Note: This tutorial is specific for Combell hosting (my favourite Belgian hosting company), but you can certainly take away something here if you are using another hosting provider. DISCLAIMER: You will probably break your website if you follow this tutorial. Make a backup first, and make sure you know how to restore it before following ... Read More The post Set up a staging environment of your…
See the Pen One-pager navigation with intersectionObserver by Jules Colle (@pwkip) on CodePen. Turn it into a reusable function, so we can also apply it on vertical secondary navigation. See the Pen One-pager navigation with intersectionObserver by Jules Colle (@pwkip) on CodePen. ... Read More The post Javascript: one-pager navigation with IntersectionObserver appeared first on BDWM .
TL;DR The trick is to drop a shadow on the PNG image, give the shadow the desired color and make sure the shadow is far away from the image. Finally, move the image out of view, just far enough for the shadow to move into view. CSS: HTML: With all the latest and greatest CSS ... Read More The post CSS: change a transparent PNG to any color you want. appeared first on BDWM .
If you have some experience with Gutenberg development, It s easy enough to create a simple control that lets a user select one or more options, like this: In this example we save the selected option to and load it from post meta. We use withSelect and withDispatch for this: and we also need to register ... Read More The post Gutenberg / Block editor: Dynamically populate SelectControl,…
Note: this article shows how you can create a drag-and-drop upload field to upload multiple files with some basic HTML, CSS and JavaScript.Using Contact Form 7? Check out this article instead: How to upload multiple files with drag and drop with Contact Form 7. In most modern browsers, you can drag files to the upload ... Read More The post HTML/PHP: Drag and drop upload files appeared first on…
A little known fact about Contact Form 7 is that you can dynamically set the values of your form input fields. Every Contact Form 7 input field supports the data-attribute. An advanced example on how to use this attribute can be found here: Dynamically populate a Contact Form 7 dropdown list (or any other input ... Read More The post Contact form 7 dynamic values appeared first on BDWM .
Contact Form 7 allows us to create custom fields that can be used in our form. Let s create an upload field that will display the image that the user selected before actually uploading it. The technique to do this can be found here: https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded Here s the form code: Next step: create custom control That s quite ... Read More…
Let s say you have an array $a, representing the current state, and an array $b representing the new state. In order to visualise the difference (or diff for you GIT nerds), we would like to expand both arrays with empty elements so the matching elements align with each other ($a1 and $a2). Note: We assume ... Read More The post PHP: align two arrays by inserting empty spaces appeared first on…
Sometimes you may want to hide your form after a visitor has completed it, and only show the success message. You can achieve this with the following code snippet: You can add this either in your theme s JS file, or in the form code itself. Notes: If you choose to add this snippet in a ... Read More The post Contact Form 7: hide form after successfully sent, and only display success message.…
How to convert a block into another block? Let s convert this (source block) to this (target block): Before we can do that, we need to define the template for the target block. I m going to use some very basic Mustache syntax for the template. Should be self-explanatory: Now, all we need to do is create ... Read More The post Gutenberg: Case study: convert group of file blocks to ACF block…
At the time of writing, there is still no documented way to update blocks. So here is how I would update all my blocks: Loop trough all posts. Find patterns matching: !-- your-block -- * !-- /your-block -- Optional: convert the block to PHP Array with parse_blocks() Replace according to your new block Save post with the updated ... Read More The post Gutenberg How to update blocks and…
wp-env is a super nice tool to kickstart plugin and/or theme development. It is zero-config, which makes it very usefult for people who don t like to mess around with Dockerfiles, manually downloading WP, basic configuration, setting up a DB, So that s almost everyone, right? Well.. I don t think so. While I do believe that ... Read More The post Create your own wp-env npm package appeared first…