How to Connect to a WordPress Site via SFTP in VS Code

122 views

To connect to a WordPress site hosted online using SFTP (Secure File Transfer Protocol) through VS Code (Visual Studio Code), you can follow these steps:

Prerequisites:

  1. WordPress Site Access Information: Ensure you have the SFTP credentials for your WordPress site, including the hostname (e.g., ftp.yoursite.com), port (usually 22), username, and password.
  2. VS Code Installed: Make sure you've installed Visual Studio Code.
  3. VS Code Extensions: You'll need the "SFTP" extension by liximomo. You can also use the "Remote - SSH" extension by Microsoft, but for this guide, we'll focus on the SFTP extension.

Steps:

1. Install the SFTP Extension for VS Code

  1. Open VS Code.
  2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl+Shift+X.
  3. In the search bar, type SFTP and look for the extension by liximomo.
  4. Click Install to install the extension.

2. Configure SFTP in VS Code

  1. After installing the SFTP extension, open the Command Palette by pressing Ctrl+Shift+P.
  2. Type SFTP: Config and select SFTP: Config to create an SFTP configuration file.
  3. This action will create an sftp.json file in the .vscode directory of your project.

3. Set Up the SFTP Configuration

  1. In the sftp.json file, you will see a template configuration. Replace the placeholder values with your site's actual SFTP credentials. Here’s an example configuration:

    {
    "name": "MyWordPressSite",
    "host": "ftp.yoursite.com",
    "protocol": "sftp",
    "port": 22,
    "username": "your-username",
    "password": "your-password",
    "remotePath": "/path/to/your/wordpress/site",
    "uploadOnSave": true
}
    • name: A custom name for your configuration.
    • host: The hostname or IP address of your FTP server.
    • protocol: Set to sftp.
    • port: Usually, the port for SFTP is 22.
    • username: Your SFTP username.
    • password: Your SFTP password (consider using a more secure authentication method later).
    • remotePath: The path to your WordPress directory on the server.
    • uploadOnSave: Set to true to upload files automatically when saved.

4. Save and Connect

  1. Save the sftp.json file.
  2. You can now access the SFTP commands via the Command Palette (Ctrl+Shift+P). For example:
    • SFTP: Upload Project to upload the entire project to the server.
    • SFTP: Download Project to download the entire project from the server.
    • SFTP: Sync Local To Remote to sync changes from your local directory to the server.

5. Secure Your Configuration (Optional but Recommended)

Using plain text for passwords is insecure. If your server supports SSH key-based authentication, use it instead. Here’s a basic way to set that up:

  1. Generate an SSH key pair on your local machine if you haven't already: 
    ssh-keygen -t rsa -b 4096 -C "your-email@example.com"
  2. Add the public key (id_rsa.pub) to the authorized_keys file on your server.
  3. Modify your sftp.json file to use the private key: 
    {
    "name": "MyWordPressSite",
    "host": "ftp.yoursite.com",
    "protocol": "sftp",
    "port": 22,
    "username": "your-username",
    "privateKeyPath": "/path/to/your/private/key/id_rsa",
    "remotePath": "/path/to/your/wordpress/site",
    "uploadOnSave": true
}

Notes:

  • Ensure the correct permissions are set for your SSH key files.
  • If you face any issues, check the output in the VS Code terminal for any error messages and verify your host's connection settings.

By following these steps, you should be able to securely connect to your online hosted WordPress site using SFTP in VS Code and manage your files effectively.