How to create user snippet (code template) in Visual Studio Code

User snippets are templates that make it easier to enter repeating code patterns in Visual Studio Code.

For example, in a .html document, when you type h1 and press ENTER, it will be replaced by <h1></h1> automatically.

Follow the instructions below to define your own user snippet.

  1. Under the File menu, select Preferences, then User Snippets

    Visual Studio Code User SnippetsVisual Studio Code User Snippets
  2. Select or type in the file type you wish to add the snippet to

    Visual Studio Code User Snippets File TypeVisual Studio Code User Snippets File Type
  3. Enter title of snippet, prefix, body and description. Below is an example of adding stg as a shortcut to <strong></strong>.

        {
          "strong tag": {
            "prefix": "stg",
            "body": [
              "<strong>${1}</strong>"
            ],
            "description": "<strong></strong>"
          }
        }
        
  4. The settings above are stored in a file on your computer, which can be copied to another computer if desired.

    If you do not know where the file is located, enable full path name and the path will be shown in the title bar of Visual Studio Code.

Sample User Snippets

t-html for .html file

t-vue for .vue file

For detail information on how to configure user snippet, here is the link to the official Visual Studio Code site on ‘Creating your own Snippets’.

WordPress migration from Arvixe to MochaHost

Below are some tips on migrating WordPress from one web host to another. My experience is with migrating from Arvixe to MochaHost, but the steps mentioned should be similar on other shared web hosting accounts.

Steps:

Back up WordPress database

  • On cPanel, click on phpMyAdmin
  • Select the WordPress database, then Export
  • Select check box Custom – display all possible options
  • Make sure all tables are selected
  • Make sure check box Save output to a file is checked
  • Scroll to the bottom and click on Go
  • A .sql file will be produced, save it to your hard drive
WordPress database back upWordPress database back up

Back up WordPress files

  • Connect via ftp to your web host
  • Copy all WordPress files to your local drive
  • If you are not sure where the WordPress files are located, access the WordPress icon in cPanel, click on Edit, the pencil icon, of your WordPress installation.
  • The Directory field shows where the WordPress files are located
WordPress File LocationWordPress File Location

Install a new WordPress instance on the new web host

Note: If this step is skipped and the files are copied to the new server directly, the backup feature of Softaculous will not be available.

  • On cPanel of the new web host, click on WordPress. This should be in the SOFTACULOUS APPS INSTALLER section.
  • Click on Install Now
  • Fill in the appropriate fields.
  • It is recommended to keep Table Prefix the same as the old database to avoid having to rename tables
  • Make a record of Database Name
WordPress Database Name and Table PrefixWordPress Database Name and Table Prefix

Copy old WordPress files to new web host

  • Connect via ftp to your new web host
  • Rename the WordPress folder on new web host, e.g. public_html to public_html__backup
  • Create a folder with the same name as the WordPress folder before it was renamed, e.g. public_html
  • Copy WordPress files from the old web host to this folder

Set up WordPress database on new web host

  • On cPanel of the new web host, click on phpMyAdmin
  • Select the WordPress database, then Operations
  • Copy the database for backup and comparison purpose
  • Click on Import, select the .sql file created earlier, click Go to import the database

Configuration: wp-config.php

  • On cPanel of the new web host, click on File Manager
  • Select the WordPress folder, e.g. public_html
  • Open file wp-config.php
  • Change the following settings to match the new server, replace ??? with values from new web host
    (Note: values can be found from the wp-config.php file in the backup folder, e.g. public_html__backup)

That should be it, WordPress is now successfully transferred to the new web host.

How to show full file path in Visual Studio Code

  1. Select File > Preference > Settings

    Visual Studio Code SettingsVisual Studio Code Settings
  2. Click on WORKSPACE SETTINGS

    Visual Studio Code Workspace SettingsVisual Studio Code Workspace Settings
  3. Type window.title into the search bar

    Visual Studio Code Window TitleVisual Studio Code Window Title
  4. Click on the pencil tool and select Copy to Settings

    Visual Studio Code Copy To SettingsVisual Studio Code Copy To Settings
  5. Set the title to ${dirty}${activeEditorLong}

    Visual Studio Code Set TitleVisual Studio Code Set Title
  6. That’s it! For additional options, please visit https://code.visualstudio.com/updates/v1_10#_configurable-window-title

Note: My personal favorite window.title setting is “${dirty}${rootName}${separator}${activeEditorMedium}”

How to generate FREE SSL certificate from Let’s Encrypt

  1. Visit https://www.sslforfree.com
  2. Sign in to your account (create one if you do not have an account yet)
  3. Under Active, select Create one now
  4. Enter your domain name (click on Advanced Options if you wish to register multiple domains under one certificate)
  5. Click on Create Free SSL Certificate
  6. Use one of the three methods to verify that you own the domain name(s)
  7. Once verification is completed, you should see the Certificate Successfully Generated screen
  8. Click on Download All SSL Certificate Files
  9. Install the SSL Certicate accordingly (contact your web host if you are not sure how, each host is different)

Manual Verification

  1. Create folder .well-known in the root folder of your domain name
  2. Create folder acme-challenge within .well-known
  3. Upload verification file to acme-challenge

Manual Verification (DNS)

  1. Click on Manually Verify Domain
  2. TXT record will be generated
  3. Go to the DNS editor of your hosting account (cPanel will be under Advanced DNS Zone Editor)
  4. Click on Download SSL Certificate

How to configure Google Search Console

  1. Visit https://www.google.com/webmasters/tools
  2. Sign in with your Google account (account can be created for free on https://accounts.google.com/SignUp)
  3. On the Welcome page, add the site you wish to optimize

    Google Search Console Welcome pageGoogle Search Console Welcome page
  4. Select a method to verify that you own the domain name.

    Google Search Console VerificationGoogle Search Console Verification
  5. It is recommended that you add domain names with and without www to the search console.
  6. Once both domain names are added and verify, you can pick the preferred domain under Site Settings

    Google Search Console Site SettingsGoogle Search Console Site Settings
  7. Select the country you are targeting under International Targeting > Country

    Google Search Console International TargetingGoogle Search Console International Targeting

Best way to modify WordPress theme

Do not modify the template files directly (Appearance > Editor). If you update or upgrade the selected theme, all your changes will disappear.

Use child theme instead.

To start using child theme

Step 1: Create a child theme folder

  1. Create a folder for the child theme in folder wp-content\themes\
  2. Name the child theme folder with suffix -child
  3. For example, if parent theme folder is twentysixteen, the child theme folder should be twentysixteen-child

Step 2: Create a style.css file

  1. Within the child theme folder, create style.css
  2. Copy the style sheet header below, customize it, and add it to the top of style.css

    Important: The Template field must match the folder name of the parent theme
    Note: The mandatory fields are Theme Name and Template, the rest is optional
  3. Add style rules below the header

Step 3: Create a functions.php file

  1. Within the child theme folder, create functions.php
  2. Copy the code below

Step 4: Activate the child theme

  1. Under Appearance > Themes, the new child theme should show up now
    Hint: Add screenshot.png in the child theme folder to display a thumbnail for the child theme
  2. Click “Activate” to start using the child theme

Modify other files such as header and footer

All files within the theme folder can be modified. Examples:

Header section: header.php

Footer section: footer.php

Single post content section: template-parts/content-single.php

Make a copy from the parent theme folder and save it into the child theme folder. If a file does not exist, the parent file will be used.