Make User Interface Changes

Now we’re going to work directly on the server to make changes to our site's user interface (UI).

Make the Change in Dev

1. Go to Site Dashboard, select the Dev tab, and then select Code.

2. Confirm your Connection Mode is set to SFTP.

3. Log in to your Dev site by clicking the Site Admin button.

4. Install and activate a new theme (do not activate/enable a theme that came pre-packaged with your site).

   • WordPress instructions
   • Drupal instructions for installing a new theme.

5. Visit your site to confirm the theme change.

6. Return to Site Dashboard and select the Dev tab. The files you just added are highlighted.

    Note

   You may need to refresh your dashboard to see these files in your Dev environment.

7. Add a commit message, then click Commit to add these files to your Dev environment.

    Note

   In the Dev environment, you can’t make a commit without first adding a commit message.

8. Review your changes in Dev.

Review the Change in Test

1. Go to your Site Dashboard, select the Test tab, and then select Deploys. As you can see, 1 commit is ready to deploy from the Dev environment.

2. Check the Pull files and the database from the Live environment box.

3. Consider creating a backup before proceeding:

    Create Backup (optional)

   The Backups tab is where you manage all the details for your site's backup. A backup is composed of 3 separate archives for database, files, and code. Let’s create a backup now:

   1. Click Backups on the Dev tab of your Site Dashboard.

   2. Click Create New Backup.

   3. Click Deploys to return to the lesson.

    Warning

   As intended, the following action will overwrite your Test database and files. If you skipped this backup task you will be unable to recover this data hereafter.

4. Add a Deploy Log Message (optional), then click Deploy Code from Development to Test Environment.

    Deploy Commits to Test (optional)

   Test is a separate environment from Dev, with its own codebase, database, and media files. When you deploy code from Dev, the platform leverages Git to pull any code changes into your Test environment.

5. Click Site Admin when the deployment completes to go to your Test site. Here you’ll notice that your theme is installed, but not active/enabled. You’ll also find that your content has been pulled “down” from Live.

6. Activate/enable your theme. If you need help with this step, refer to the WordPress Codex or Drupal Documentation.

7. Review your Test site.

Deploy to Live

1. Review the changes to make sure everything looks correct.

2. Go to the Site Dashboard, select the Live tab, and then click Deploys.

3. Add a Deploy Log Message (optional), then click Deploy Code from Test to Live Environment.

4. Activate/enable your theme. If you need help with this step, refer to the WordPress Codex or Drupal Documentation.

Congratulations! You just performed on-server development to make changes to your UI. You made changes on your Dev site, reviewed them on your Test site, then deployed them to Live.