How to rewrite author permalinks in WordPress

How to rewrite the author permalink URL structure in WordPress

Recently, one of our clients building their website on WordPress with us had a requirement — they wanted to have a URL base structure for their author pages that was different from the WordPress default. Instead of the default /author/[username] structure, they wanted to use /authors/[username] instead. Although there are plugins for this, we decided to implement it into the theme we were developing for the client to make the functionality as lightweight as possible.

Turns out, the implementation was pretty simple, as WordPress has built-in hooks for this. To update the author page URLs, we need to do 2 things:

Continue reading
How to convert double dash to em dash in WordPress Gutenberg

How I made double dashes automatically convert to em dashes in WordPress Gutenberg Editor

Over the weekend, I was tackling a client request requesting for us to help modify their WordPress backend so that when writing posts, the Gutenberg Editor will automatically convert consecutive double dashes -- to an em dash character.

It was a particularly difficult task for me, despite having coding in WordPress for many years, simply because the Gutenberg editor was relatively new, and there is very little documentation regarding it.

Continue reading
How to override Astra Pro templates in a child theme

How to override Astra Pro templates in a child theme

At the recommendation of a fellow web developer, I’ve been using the Astra theme in WordPress to develop Terresquall’s client websites for years now, and it’s been by and large a positive experience. Astra is a very versatile theme that can be used to build many different kinds of website, and their paid Astra Pro plugin adds even more customisation options, allowing for even more rapid customisation options.

If you are building your site upon the addition features that Astra Pro provides using a child theme, however, customising Astra Pro templates can be a bit difficult to do, because there isn’t much documentation about this.

Continue reading
XAMPP phpMyAdmin not accessible in Windows

Unable to access phpMyAdmin on XAMPP (in Windows)

XAMPP is a great tool for web developers because it packages a couple of applications used for web hosting into one program, and it allows websites to be tested locally on a computer. Unfortunately, because it links multiple applications together, it is pretty error-prone.

One of the errors that might happen is that you might not be able to access XAMPP’s phpMyAdmin, which provides users with an interface to modify the local SQL database. In this article, we go through the various reasons why this might occur, as well as how you can fix them.

Continue reading
XAMPP cannot start on macOS - Cannot calculate MAC address

XAMPP can’t start on macOS — cannot calculate MAC address

If you are running XAMPP on macOS, you may run into a variety of problems that may prevent you from starting the program. One of these problems is an error that says “cannot calculate MAC address” when you try to start the program.

Error starting XAMPP stack
The error message is not very helpful.

If your error message says something else, you may want to check out the other articles on XAMPP for macOS:

  1. XAMPP Apache not starting on macOS
  2. XAMPP MySQL not starting on macOS
Continue reading
How to set up a local web domain on WampServer

How to set up a local web domain (i.e. VirtualHost) on WampServer

When working on a website, it is not uncommon for developers to locally host websites on their own computers first, as it is often a good idea to run and test your website before you publish it online, so that you avoid having your live website run into errors and bugs.

If you are a Windows user, one of the several local web hosting softwares you have available to you is WampServer, which normally runs on the localhost URL when it is started up.

Fun fact: Wamp stands for Windows, Apache, MySQL and PHP. It is a play on the term LAMP (where L stands for Linux, and the rest of the letters mean the same as those in Wamp), as almost all web servers in the early days of the web ran on such a set-up. Today, LAMP stacks are still widely used to host many websites.

While running on localhost gives us the benefit of using root-relative URL paths, it still has a distinct drawback — it is a hassle to run multiple websites off the localhost URL, as it will still cause the aforementioned root-relative URL paths to break.

Fortunately for us, it is possible to set up what I call “local domains” on WampServer, so that you can use URLs outside of localhost to access your websites on WampServer.

Continue reading
CodeLobster IDE, a free PHP, HTML, CSS and JavaScript / TypeScript editor

CodeLobster IDE — A free PHP, HTML, CSS and JavaScript / TypeScript editor for web developers

If you’re just starting your foray into the world of web development, you’re probably wondering what kind of code editor or Integrated Development Environment (IDE) to use. In most other branches of coding, like application or games development, you’re probably only going to deal with 1 or 2 programming languages concurrently. In web development, however, you’re almost always going to be dealing with at least 3 languages concurrently, so it’s going to feel very different from almost any other branch of coding.

Especially if you’re new to web development, having to deal with so many languages in one go (and having to be familiar with the native libraries of each of the languages) can be rather overwhelming, and the developers of CodeLobster IDE seem to understand this very well.

Continue reading
Why doesn't vertical-align: middle work?

Why doesn’t vertical-align: middle work? How to vertically-centre elements in HTML and CSS

If you are new to working with CSS, you may find that the language comes with its fair share of quirks that can be frustrating, such as the text-align attribute not always working at horizontally-aligning your content.

In a similar way to text-align, the vertical-align attribute doesn’t always work at aligning your content vertically. Take the following HTML code for example:

Continue reading