Using VS Code to access WP on a Raspberry Pi

Using VS Code to access WordPress on a Raspberry Pi

The Raspberry Pi can offer a local development platform for WordPress. Using VS Code to access WordPress on a Raspberry Pi can aid in remote development.

Introduction

We discussed how to install WordPress on a Raspberry Pi. Having a local network version of WordPress makes the development of plugins and themes so much easier. By using a popular Visual Studio Code extension the coding can be done from a remote computer.

By using VS Code to access WP on a Raspberry Pi, development can take place in a live environment. File version management can be done using VS Code’s built-in Git functionality and file transfer can be facilitated using WinSCP.

Sponsored links

Please support us by using these links they come at no additional cost to you, but we get a little commission each time they are used. These and others are available from Amazon.com and BangGood.

We have tested most of these products ourselves. Other selection criteria include affordability, quality, availability and average user rating and popularity by other buyers.

Links will open in a new window.
(Dead or old links can be reported in the comments section below.)

Catda Raspberry Pi 4B Starter Kit
Catda Raspberry Pi 4B Starter Kit
2019 Model B, 4GB RAM
1.5GHz 64-bit quad-core CPU & 4GB RAM, Gigabit Ethernet, Wi-Fi, Bluetooth, USB 2.0/3.0, headphone jack and duel Micro HDMI (4K). Kit includes power supply, MicroSD, USB MicroSD card reader, a case with heatsink and fan, mini-HDMI cable and USB-C PiSwitch.
Available from BangGood
iUniker Raspberry Pi 4B 8GB Starter Kit
iUniker Raspberry Pi 4B 8GB Starter Kit
2019 Model B, 8GB RAM
1.5GHz 64-bit quad-core CPU & 8GB RAM, Gigabit Ethernet, Wi-Fi, Bluetooth, USB 2.0/3.0, headphone jack and duel Micro HDMI (4K). Kit includes power supply, MicroSD, USB MicroSD card reader, a case with heatsink and fan, mini-HDMI cable and USB-C PiSwitch.
Available from Amazon.com
iUniker Raspberry Pi 4B 4GB Starter Kit
iUniker Raspberry Pi 4B 4GB Starter Kit
2019 Model B, 4GB RAM
1.5GHz 64-bit quad-core CPU & 4GB RAM, Gigabit Ethernet, Wi-Fi, Bluetooth, USB 2.0/3.0, headphone jack and duel Micro HDMI (4K). Kit includes power supply, MicroSD, USB MicroSD card reader, a case with heatsink and fan, mini-HDMI cable and USB-C PiSwitch.
Available from Amazon.com

WordPress on a Raspberry Pi

After WordPress has been successfully installed and configured on the Raspberry Pi, the Raspberry Pi’s hostname (e.g. http://192.168.1.42) or the configured Site Address (URL) (e.g. http://raspberrypi) can be used to access the site from a web browser. From here the Admin area can be accessed.

The WordPress root directory /var/www/html (or /var/www/html/wp-content to get to the plugins and themes). Similarly to WinSCP, this is the directory that needs to be used by VS Code.

Visual Studio Code

Theme and plugin development can take place using VS Code while working live on the Raspberry Pi WordPress site. The VS Code Remote-SSH extension can be used to connect to the WordPress server from a remote location (in this case a desktop running Windows).

For the Remove-SSH extension to work, SSH needs to be enabled on the Raspberry Pi.

Remote-SSH extension

After Visual Studio Code has been successfully installed and configured, the Remote-SSH extension by Microsoft needs to be installed and configured. It can be searched for in the Extensions sidebar after choosing the Extensions icon from the Action Bar.

VS Code Remote - SSH extension screen
The Remote-SSH extension information page after searching for ‘remote’ in the Extensions sidebar.

At the time of writing, the Remote-SSH extension was at version 0.62.0, had over 2.5 million downloads, and a five-star rating.

After the Remote-SSH extension has been installed (by pressing the blue Install button), a Remote Explorer icon will appear in the VS Code Action Bar. From here, new remote connections can be configured.

VS Code Remote - SSH targets screen
New SSH Targets can be added in the Remote Explorer sidebar by entering the SSH connection command. The default is connection command is ssh hello@microsoft.com -A, where hello is the username and microsoft.com is the hostname. In the example above the hostname of the Raspberry Pi is pi, and the hostname is its IP address.

Adding a new remote location

New remote locations are added by pressing the + button situated next to the SSH TARGETS tab and entering the SSH connection command. To connect to a Raspberry Pi, the connection command will look something like this:

ssh pi@192.168.1.xx

where pi is the username and 192.168.1.xx is the IP address of the Raspberry Pi. The IP address and the hostname of the Raspberry Pi can be obtained using the hostname terminal command:

hostname
hostname -I

After the SSH connection command has been set, a screen will pop up in the Editor section to which SSH configuration file should be used. This configuration file will store the user and hostname information just added.

Choosing the configuration file

You can either specify a new configuration file or choose an existing one. The easiest is by choosing the file in the Users directory (usually shown first in the list).

VS Code Remote-SSH configuration file selection
In this example, the configuration file in the Users directory has been chosen. The user name (in this case, /renie) will be different on each device).

By opening the config file, the user and IP address details just entered will appear. By connecting, VS Code will connect to the remote location (see later).

VS Code Remote-SSH connection popup
A temporary popup will appear in the bottom right of the Editor section that gives options to Open Config or to Connect.

Altering the configuration file

Before a connection can be established, the Config file needs to be altered. If you were not fast enough to press the Open Config button using the popup screen, the config file can be opened by pressing the Configure icon next to the IP address under the SSH TARGETS tab.

The same config file that was used to save the hostname details needs to be selected again.

VS Code Remote-SSH config

VS Code would have saved the IP address entered earlier as both the Host and HostName entries. When using VS Code to access WP on a Raspberry Pi, the HostName needs to be changed to the hostname of the Raspberry Pi.

VS Code Remote-SSH hostname
In order to connect successfully to a Raspberry Pi using VS Code, the HostName in the config file needs to be changed to the hostname of the Raspberry Pi. In this case, the hostname was wppi.

The same reasoning can be used to aff additional remote locations to VS Code.

After the Config file has been altered, remember to save it before closing for changes to be effective.

Making the connection to the Raspberry Pi

Now that the configuration file has been corrected, the SSH connection can be made. This can be done by pressing the Connection icon next to the IP address under the SSH TARGETS tab.

A new window will open and a popup screen will appear to ask the platform for the remote host. Rasbian is a Linux-based operating system.

VS Code Remote-SSH SSH connection

During the remote connection process, VS Code will identify the Raspberry Pi’s fingerprint and will ask for the password that is assigned to the username. Choose Continue and then enter the Raspberry Pi’s password to continue.

VS Code Remote-SSH fingerprint

VS Code Remote-SSH password

When the connection to the Raspberry Pi has been established, it will be indicated with a green tick next to the IP address in the SSH TARGETS tab of the Remote Explorer sidebar. A Workspace with the correct directory structure from the Raspberry Pi can now be created.

VS Code Remote-SSH connected

Creating a Workspace

Now that a connection has been established, a Workspace with the correct directory (folder) structure from the Raspberry Pi can be created.

Workspaces are created in the Explorer sidebar (opened by choosing the Explorer icon situated on top of the Actions bar).

The Working WordPress directory would have been installed under the /var/www/html/ directory of Raspbian. To access the themes and plugins directory, the /wp-content/ directory needs to be opened.

VS Code open folder

Visual Studio Code will ask one more time for the password of the Raspberry Pi before opening the entire directory tree in the Explorer sidebar. From here, files and folders can be created, edited and removed and changes will reflect immediately on the Raspberry Pi WordPress website.

Disconnect a remote location

The command to disconnect from a remote location lies under the File menu -> Close Remote Connection.

Removing a connection

To remove an SSH location on Visual Studio Code, its entries need to be removed from the Config file (see earlier). Before doing so, rather disconnect from the remote location first (see above).

After the related entries have been removed, remember to save the Config file for the changes to take effect.

Conclusion

Here we discussed how to use VS Code to access WP on a Raspberry Pi. The Visual Studio Code Remote-SSH extension is great for connecting to a Raspberry Pi WordPress web server. The code editor makes coding much easier and changes will reflect immediately on the Raspberry Pi server.

About the author
Renier busies himself with improving his English writing, creative web design and his websites, photoshopping, micro-electronics, multiple genres of music, superhero movies and badass series.
Behind the Scenes is a free, informative website. If you find value in any of our content, please consider making a donation to our cause, or becoming a Patron for exclusive content.
Donate via PayPal Become a Patron

Save, share & discuss

Your comment is important, but don't be a knob. Keep it constructive and polite.

Leave a Reply

Your email address will not be published.

More WordPress development related posts