How to Use an iPad for WordPress Theme Development

After college, I had to use the iPad Pro to attend classes before I bought my MacBook Air (by the way, the M1 chip is awesome). However, as a computer science student, I had to find a way to program with it. So, I started looking for the best way to program on my iPad.

At first I found some good options, but it wasn't perfect because I couldn't run any code or program I wanted due to the lack of command line or root permissions. I could have used platforms like Coder, Gitpod, GitHub Codespaces, and even Replit, but they are not what I want.

But then, I found the perfect program. It is free, open source, and can be hosted on its own. It is also the basis of Coder, a platform I discovered when searching. It is called code-server and is basically a managed VS Code that has full access to the server's file system.

Initially, my use case was Java programming (which is the language we learn in class), but I quickly realized that I could use it for other programming tasks, i.e. WordPress theme development, too!

Prerequisites

You need two things to start:

• A Linux server with root access. I personally use OVH VPS. The Raspberry Pi is also OK, but the steps are more complicated and are beyond the scope of this article.
• An iPad or any other device that is not usually available for programming (such as a Chromebook).

I'm assuming you're working on the same server as your WordPress site. Also, it is important to note that this guide is written using Ubuntu 20.04.2 LTS.

Install

First, we need to connect to our server via SSH. If you are using an iPad, I recommend using Termius as it is perfect for our needs. Once we log in to the server, we will install code-server, which requires root/sudo permissions.

Installation is very simple; in fact, only one terminal command is required. The same command is also used when upgrading:

 <code>curl -fsSL https://code-server.dev/install.sh | sh</code>

Configuration

After installing code-server, we can configure it through several methods. We can run code-server directly and it works - but it also lacks HTTPS and only provides basic authentication. I've always wanted HTTPS enabled and my domain needs it as well.

There are also several ways to enable HTTPS. The first method in the code-server documentation uses Let's Encrypt and reverse proxy, such as NGINX or Caddy. While this works great, it requires more manual configuration and I don't want to bother with it. However, code-server also offers another option, --link , which works well, although it is in the beta phase. This flag sets the TLS certificate, GitHub authentication, and a dedicated cdr.co URL! No configuration required! So cool‽ To set it, run this command (this command does not require root/sudo access, any ordinary user can):

 <code>code-server --link</code>

This creates a URL for us to log in to your GitHub account so that it knows which account to authorize. Once done, we will get a dedicated URL and everything is ready! Each user has their own configuration and GitHub account, so I think technically it is possible to run multiple instances for multiple people at the same time. However, I haven't tested it.

After configuring the GitHub account, we will press Ctrl C to stop the process.

Running <code>code-server --link</code> will provide a login URL.

Clicking the URL in Termius opens it in Safari.

After logging in, GitHub will authorize your account.

Once the application is authorized, it should take you directly to a familiar interface!

Going back to our SSH session, we can see that the permanent URL is now available! Remember that it works only when the code-server is running.

Set WordPress theme dependencies

There are many ways to do WordPress theme development, but I really like the way Automattic's underscores(_s) is, so we'll start with that.

To get started with _s, let's install Composer. Because I assume you are on the same server as your WordPress website, PHP is already installed. While I can list the steps here, Composer's website has done better than I might.

After installing Composer, we need to install Node.js by running the following command in the terminal:

 <code>cd ~ curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh sudo bash nodesource_setup.sh sudo apt install nodejs node -v</code>

These commands add an updated Node PPA—because the one Ubuntu contains is outdated (Node 10!)—and then install Node and get its version.

The last command should return something like v16.6.1, which means we are ready!

Setting up the theme

To set the _s theme, we run npx degit automattic/_s my-cool-theme . This downloads the _s code to a folder named my-cool-theme. If you want the theme to be located directly in your WordPress theme directory, you can move the folder, create a symbolic link for it, or provide the full path to the folder in the previous command. I personally prefer to compress my files by running npm run bundle and then manually unzip them in my theme folder.

Once all of this is done, let's run <code>code-server --link</code> , open our browser and navigate to our URL!

In our VS Code instance, we can open a folder containing our theme and follow the quickstart steps of _s to correctly name our theme. Then, in the integrated terminal, we run composer install and npm install . This will install all the packages required for the theme. I won't explain how WordPress themes work, as many more experienced people have done so.

that's all! Our server now has everything we need to develop some cool WordPress themes using an iPad or any other device with a browser and keyboard. Once their new browser is released, we can even use Xbox.

Development process

Everything we discussed sounds great in theory, right? What you might be wondering is what it is actually like to develop on an iPad with this configuration. I recorded the following video to show what it looks like to me. It's only a few minutes long, but I think it reflects a good idea of ​​what's going on in WordPress development.

Some instructions on this setup

Since code-server uses open source VS Code—not Microsoft’s version—something is missing. It also does not use Microsoft's expansion market, meaning not all extensions are available. We can't log in to our Microsoft or GitHub account to sync our settings, but we can also use the Settings Sync extension, although I personally have trouble using it to sync my extensions. Each Linux user has its own settings and extensions, saved in this folder: ~/.local/share/code-server . It is similar to the folder structure of a regular VS Code installation.

There are also ways to run code-server as a service instead of running directly in an SSH session so that it always runs, but I prefer to open it if needed.

Some iPad-specific tips

If you plan to use your iPad like me, here are some tips to make your experience more enjoyable!

• Activate the location tracking feature in Termius because it keeps the SSH connection active even when the application is running in the background.
• Open the website with Safari and open the share table to add it to your home screen! Long live PWA!
• Safari caches content very aggressively, and clearing caches is very annoying. The only way I found is basically to clear the browser's history, which is not ideal. It doesn't have a "force refresh" like any other desktop browser. Chrome might handle it better, though.
• Buy a Bluetooth keyboard, or even a protective case (the Brydge is a good choice) because it makes it feel more like a laptop than a tablet. The physical keyboard makes the experience 1,000 times better than the on-screen keyboard!
• iPads sometimes "lose" the editor's focus, especially when switching between apps, which makes it impossible to type. I usually solve this problem by clicking on the sidebar and then clicking on the editor.

The above is the detailed content of How to Use an iPad for WordPress Theme Development. For more information, please follow other related articles on the PHP Chinese website!