Hi, I’m Jules.
I’m a web developer from Ghent, Belgium. Because I thought it was cool at the time I created a company of one in 2010 and named it BDWM, which stands for “bedrijfje dat websites maakt”. That’s Dutch for “small company that creates websites”. I enjoy working on and selling my own WordPress plugins and some other stuff too.
This website is a place for WordPress development related blog posts. Here are the most recent ones:
- Javascript: one-pager navigation with IntersectionObserverSee 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 … Read More
- CSS: change a transparent PNG to any color you want.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 … Read More
- Gutenberg / Block editor: Dynamically populate SelectControl, RadioControl or CheckboxControl optionsIf 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 … Read More
- HTML/PHP: Drag and drop upload filesNote: 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 … Read More
- Contact form 7 dynamic valuesA 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 … Read More
- Contact Form 7 upload field with image previewContact 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 … Read More
- PHP: align two arrays by inserting empty spacesLet’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 … Read More
- Contact Form 7: hide form after successfully sent, and only display success message.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 … Read More
- Gutenberg: Case study: convert group of file blocks to ACF blockHow 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 … Read More
- Gutenberg – How to update blocks and block-templates in bulkAt 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 … Read More
- Create your own wp-env npm packagewp-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 … Read More
- Contact Form 7 toggle buttonsYou don’t need any fancy plugins to turn your checkboxes or radiobuttons into actual buttons. Just good old CF7 with some basic CSS will do. Simply create your form like this: It’s very important to include: use_label_element … Read More
- Gutenberg: how to insert a reusable block in the editor with JavaScriptAccessing core blocks and custom made blocks, is pretty straight forward. For example, if you want to get the paragraph block, you could do so with: And if you want to insert a paragraph, you can easily … Read More
- Gutenberg: how to force sidebar to be always open on post edit screenAdd this to your functions.php … Read More
- Gutenberg: custom validation / how to prevent post from being savedThis script will disable the Publish/Update button: To make the post publishable again, you can do: Very nice. But how is this useful? Here are a couple of use cases. Force users to enter a post title. … Read More
- Gutenberg: Prevent specific block from being removableIdeally, we should use template_lock as much as we possibly can. But with the problems it introduces currently, and because there might be special use cases that template locking cannot handle, I wanted to explore a way … Read More
- Gutenberg: Problems with template_lockIn my previous post, I described a way for developers to create a custom user interface for a specific post type. This approach relies heavily on using template_lock=’all’ in combination with templateLock={false} on some of the child … Read More
- Gutenberg: creating an advanced custom admin user interface for your post types with the block editor using template lock.As a freelance developer, I want my clients to have an easy to use interface when creating posts. Before WP 5.0 (and before Gutenberg) I used Advanced Custom Fields a lot for this purpose. An example interface … Read More
- Gutenberg: set category with dispatchSet the category with id termId and post ID currentPostId: Both termID and currentPostId need to be integers. use parseInt to enforce this if necessary. Custom taxonomy Same thing, just use your custom taxonomy slug instead of … Read More
- WordPress core development with Xdebug and VS CodeI had a bit of a struggle to get Xdebug working with wordpress-develop, but the solution turned out to be very simple. So I’m sharing it here for future reference. … Read More