Minimal AJAX in WordPress

Minimal AJAX in WordPress

David Nash code, php Leave a Comment

Here’s what it takes to create minimal AJAX in WordPress. First, let’s create a button: Then functions.php include a Javascript file called do_ajax.js. It has the dependencies jquery and wp-util: Also in functions.php, we set up a function to handle the AJAX call, and add the actions: Finally, in our do_ajax.js file: And then in your console you should see “Hello!”. That string is being sent from do_ajax.js to the server, and the server simply sends it back again. That’s it – we have minimal AJAX in WordPress up and running! This post was based on this StackOverflow answer, and …

Debugging in WordPress

Debugging in WordPress

David Nash code, wordpress 1 Comment

I know, debugging in WordPress is boring! We’re creators – we want to build cool stuff without worrying about stepping on any toes! But debugging in WordPress is important! Last week I came across this tweet from Jonathan Bossenger (@jon_bossenger): My first instinct was to reply that enabling debugging in WordPress makes in impossible to use, until I looked more closely. You see, every time I set up a WordPress site I have to edit wp-config.php, and that line define( ‘WP_DEBUG’, false ); occasionally tempts me to change it to TRUE. I soon regret it, because my next step is …

Autocomplete with AJAX in WordPress

Autocomplete with AJAX in WordPress: 2019

David Nash code, tutorial, wordpress 1 Comment

This is the second part of Create an autocomplete field in WordPress: 2019, which works well if you don’t have that many options. If you have less than 10 options, use a select element. Less than 100-1000 (depending), you don’t need AJAX. If you have more than 100-1000, you’ll probably need to use autocomplete with AJAX. This means the page will load faster, and we’ll limit the data to entries that more closely match what the user is looking for. We didn’t even need Javascript for the previous part. What we’re doing now is a bit more complex, so we’ll …

Create an autocomplete field in WordPress: 2019 Update

David Nash wordpress 5 Comments

My most popular post is Create an autocomplete field in WordPress, but it’s been over three years since I wrote that. So I want to visit the topic again, and try to be a bit more thorough in my explanation. So I’ve created a fresh install of WordPress 5.1 on my local machine. It has the Sample Page and Hello World! posts, and everything else that you get with a fresh WordPress install. Previously I’d used jQuery, but we no longer need it. Browsers have come a long way, and ES5 pretty much covers everything. This time, let’s use the …

Migrate from WordPress.com to WordPress.org – Problems and Solutions

David Nash wordpress Leave a Comment

I had a client recently who wanted to migrate from WordPress.com (the paid service) to a WordPress.org self-hosted site so that he could have greater control over his theme and plugins. You’d think it’d be fairly easy. I mean, they’re both WordPress, right? This really seems like something that could be done at the click of a button. But it wasn’t as easy as I’d hoped. Here are the problems I came across and how we worked around them. Problem #1: Names As the saying goes, the two hardest problems in computer science are cache invalidation and naming things (or …

Mark My Words - built with Laravel and Vue.js

Laravel and Vue.js: creating the Mark My Words web app – Part 3

David Nash laravel, vue.js Leave a Comment

If you’d like to start from the beginning, please go back to Part 1 – which covers installing Laravel, connecting to the Oxford Dictionary API, and displaying the results to the user. Then you can move on to Part 2, where I covered creating the database with Laravel’s artisan commands, connecting the back and front ends, and saving the word/definitions for the user. At the end of Part 2, we’d saved the user’s word/definition to their list. So let’s move on to displaying that list, and allowing the user to delete the word. Getting all saved words from Laravel In …

Mark My Words - built with Laravel and Vue.js

Laravel and Vue.js: creating the Mark My Words web app – Part 2

David Nash laravel, vue.js 2 Comments

If you missed Part 1, you can view it here. Part 1 covers installing Laravel and setting up Vue.js to search for definitions from the Oxford Dictionary API. It then displays them to the user. Now we want to let the user save their word and a definition. While there might be multiple definitions for a word, I want to save the definition in the sense I came across it. The user can search for the word again to add a separate definition if they like. Using Laravel to set up the database Initially I thought that I’d just use a …

Mark My Words - built with Laravel and Vue.js

Laravel and Vue.js: creating the Mark My Words web app – Part 1

David Nash laravel, vue.js 5 Comments

After having lots of fun using Laravel to build Three Good Things, I naturally started looking for other fun projects I could build. I don’t really watch TV — I prefer to read. At the start of the year I was thinking about new year’s resolutions and decided that whenever I read a word I didn’t know, I would write it down. I quickly discovered that looking up a word and it’s definition was a fairly major interruption to whatever I was reading, especially using mobile to copy+paste into a Google Keep note. It seemed like a fairly simple thing …

Three Good Things

Three Good Things: Building and deploying a project with Laravel

David Nash laravel, linux, mysql, php 2 Comments

What do developers do in their spare time? Code! Three Good Things is a little app that I started over the holidays, and have been working on in my spare time. During the Christmas/New Year holiday period I read Flourish: A Visionary New Understanding of Happiness and Well-being, by Dr Martin Seligman. In it he describes an exercise called “What-Went-Well” (or “Three Blessings”). The idea is, every night you write three good things that happened in the last 24 hours, and why they happened. I thought it would be a good idea for an app, so I set to work. It was a …

Display WooCommerce category description and custom category titles

WooCommerce category description and custom title

David Nash woocommerce, wordpress 25 Comments

The WooCommerce category description is a good way to increase usability and improve SEO on your site. We can also show a custom category title which is a little more descriptive. To do this, it’s good practise to start with something easy, get that working, and then build from there. Show the WooCommerce category description In the child theme, if it doesn’t already exist, create a woocommerce/ directory. Copy the template file from wp-content/plugins/woocommerce/templates/archive-product.php  to wp-content/themes/[your-child-theme]/woocommerce/archive-product.php. Now we can edit that without changing any plugin files directly (which could get replaced on the next update). In WooCommerce 2.0.0+, towards the top of …