Category: Web Development

Set up a barebones WordPress site

You can just accept the default values (unless the defaults are asking you to pay for an upgrade).

Change the theme to the Twenty Fifteen

In the WordPress dashboard, go to Appearance > Themes > Add Themes and search for “Twenty Fifteen”.

Create a child theme of the Twenty Fifteen theme

style.css

Create a folder called mychildtheme or whatever you want to call it.

In the mychildtheme folder, create a style.css file with the following content:

The style.css file tells WordPress to load the Parent Theme’s files after the Child. It will override any styles in the Parent Theme’s style.css file that have the same selectors.

Template: Very Important! This is the folder name of the parent theme. If this variable is not correct the Child Theme will not work.

functions.php

In the mychildtheme folder, create a functions.php file with the following content:

This code tells your theme to call the style.css file and the parent CSS file.

screenshot.png

In the mychildtheme folder, create a screenshot.png file. A theme’s screenshot is the thumbnail image that shows up under Appearance > Themes in the WordPress Dashboard. The recommended image size is 880×660. The screenshot will only be shown as 387×290, but the larger image allows for high-resolution viewing on HiDPI displays.

Upload your child theme

Upload the mychildtheme folder to wp-content/themes.

Learn more about creating child themes

Activate your child theme

In the WordPress admin, go to Appearance > Themes in the Dashboard. You should see your theme listed. Click to activate it. In the screenshot below, my theme’s screenshot thumbnail is a picture of a cat.

Edit templates

Any PHP file in your mychildtheme folder will override the same file in the parent theme. For this site, I created some PHP templates so my child theme folder looks like this.

Download all files as a compressed zip file, unzip it, and upload each file to your mychildtheme folder.

Add background images

Search Google Images for large background images. Upload them to your WordPress Admin via the Media page. Make a list of URLs based on what you see for each uploaded image in WordPress.

Add JavaScript to randomly pick a background image

To add custom JavaScript, I just installed the “Simple Custom CSS and JS plugin” . Copy the code below , update the URLs to be the backyard images you uploaded to WP-Admin, then paste the code.

Whenever you update CSS or JS, make sure to flush the cache to see your changes.

The instructions below are for migrating a WordPress site on GoDaddy’s Managed WordPress service to a GoDaddy Linux Shared Web Hosting server that uses cPanel. Nevertheless, the instructions still work elsewhere.

Step 1: Back Up (Download) Your Site’s Files

To easiest way to download all your site’s files is to archive (zip / tar) all files into one large file and then download it. You can use a free FTP / SFTP tool like WinSCP to do this or Godaddy’s File Manager or cPanel’s File Manager. Just connect to the server, select all files, right click and choose “Archive and Download”. A file named archive.tar.gz will be downloaded.

If you are unable to archive all files due to the connection timing out, you can SSH into the server and archive the files from the command line. On Windows 10, you can open Windows Powershell, SSH into the server, and run the command tar -zcvf all.tar.gz *.

When downloading the archive, you may want to connect over ethernet instead of wifi to increase speeds. When I did this, I was downloading at around 23 MB/s.

You can also download files from the command line using the following SCP command if you are on Linux or MacOS.

scp [email protected]:foobar.txt /local/dir

Step 2: Back Up (Export) Your Site’s Database

The easiest way to do this is by connecting to your MySQL database using PHPMyAdmin. Then, click the Export tab, ensure SQL is selected, check the “Save as file” checkbox, and then click the Go button. The database will then be downloaded.

Step 3: Upload Your Site’s Files

On this step, you can use the same tool as in step 1, e.g. WinSCP. If you are going to host the migrated site on GoDaddy’s Shared Linux server, you can just create a new folder on the destination server, e.g. at /home/javanigus/public_html/mysite.com/ where mysite.com is the name of your site.

Make sure to upload the archive (one large file) archive.tar.gz. Don’t unarchive it locally and then upload a million separate files. After you upload the file, you can unarchive it. If you’re using GoDaddy, you can use cPanel’s File Manager to select the archive.tar.gz and extract it.

When you’re done extracting the archive, you can delete the archive.tar.gz file.

Step 4: Import (Upload) Your Site’s Database

For this step, you’ll need to create a new database and a database user who has full permissions. If you use cPanel, you can easily to this step from the control panel.

• 1. Create a database (e.g. mysite_db)
• 2. Create a database user (mysite_db_user)
• 3. Add user to the database
• 4. Assign permissions to the user

Now that you have a database, you can connect to it using PHPMyAdmin, select the database, click the Import tab, choose your database SQL file from step 2, leave all other defaults, and click the Go button. Your database tables and records will all be created.

Step 5: Edit Your Site’s wp-config.php File

In the step, you can use an FTP client to download, edit, and upload your site’s wp-config.php file. If you can cPanel, you can also use its File Manager to edit the file in the browser. You’ll need to edit the values for 4 variables:

In many cases, like for GoDaddy’s Linux Shared Hosting service, the value for DB_HOST is “localhost”.

Step 6: Add Domain and/or Change Your DNS

You can update the DNS records for the domain to use values pointing to the new host. After DNS has propagated, you should see the same site but being served from the new host instead of the old one. At this point, you can delete the old site.

If your new host is GoDaddy’s Shared Linux hosting using cPanel, you can use cPanel to create a new domain with a root folder path that matches where you uploaded the site’s files in step 3 above. When you do that, if your domain is also hosted with GoDaddy, then GoDaddy will auto-update the DNS for that domain automatically. You could then delete your old site.

Let’s say you want to make this gray sofa become a yellow sofa.

Here’s how to do it in Photoshop.

1. Select the object

Use the object selection tool and create a selection that is larger than the object itself. Photoshop will then shrink the selection to just the object.

As you can above, Photoshop selected the sofa but missed a part of the left leg. Since we only want to color the fabric and not the wood frame, remove the wood frame from the selection, e.g. using the rectangular marquee tool in Remove mode. Now, only the fabric is selected.

2. Create a new group

Click the Create a new group icon to create a new group.

3. Add layer mask

Click the Add layer mask icon to add a layer mask

4. Add Solid Color

Click the “Create new fill or adjustment layer” icon and choose “Solid Color”

5. Choose a color

In the popup color picker, choose a color.

6. Change blending mode

Click the Blending Mode dropdown and select “Color”.

The resulting image will look like this.

7. Adjust brightness

Click the “Create new fill or adjustment layer” icon and choose “Levels”

The Levels layer will appear below the Color Fill layer so drag the Color Fill layer above the Levels layer.

8. Adjust Levels

Drag the markers to adjust the brightness.

For example, when I drag the white marker to the left to the right end of the curve, the brightness increases.

Many people just need to create a simple website. There are many online website builders that offer this including Google Sites. However, what if you also need to simply password-protect some pages. WordPress.com makes this very easy. Following are steps on how to create a clear, no-frills website using WordPress.

1. WordPress.com

Go to https://wordpress.com/ and create an account. You can choose all of the free options and pick any theme.

2. Simple Theme

There are many free themes to choose from. But, if you want the most basic and intuitive theme, click on Appearance > Themes > search for the “Twenty Fifteen” theme and activate it.

3. Create Pages

Click to “customize” the theme and then choose “Menus” > Primary Menu. There will be two pages by default: Home and Blog. If you are not creating a blog, you can delete the Blog page. Then, click “Add items” > Add New Page” and add as many pages as you like. You will then need to drag the pages from the right column to the menu in the left column.

4. Edit Pages

While still in the Customize view, you can preview the site in the right column and click on the various menu links you just created. For each page, you can click the “Edit” link which will take you to the page editor view.

5. Paste Images

The nice thing about the page editor is you can just paste images where you want them and WordPress will upload the images for you. There’s no need to have an image file on your computer and then browse to it to upload it.

6. Password-protect Pages (Optional)

If you want to password protect some pages, then in the right column of the page editor view, click Document > Public > Password Protected and type in a password.

Once you publish your site, password-protected pages will appear as follows:

Once you enter the password, you’ll have access to the page’s content.

7. Publish

Now, you can click the “Publish” button to publish new page and the entire site. The site will be accessible at XXXX.wordpress.com where XXXX is customizable. You can also pay to buy a custom domain and link it to your new site.

We often take pictures with our smart phones which may save photos at very high resolutions resulting in large file sizes. What if we want to quickly resize and compress these images for uploading to a website or sharing via email. One quick was is to use Photoshops Image Processor Automation Script.

File > Script > Image Processor

You’ll then see a dialog where you

1. select a folder containing the large images
2. select a location to save the processed images
3. check a file type (JPG) and optionally resize the image to fit within a specified width and height

Then, just click the Run button and Photoshop will do the work.

If you go to Google Translate, you can not only translate text from one language to another, but you can also listen to the translation. For example, this English to Chinese translation allows you to listen to the pronunciation of the Chinese text.

Google’s Cloud Text-to-Speech API allows you to programmatically generate mp3s of any text. Below are steps to do it on Windows using PHP.

1. Follow These Instructions

https://cloud.google.com/text-to-speech/docs/quickstart-client-libraries#client-libraries-install-php

2. Set Environment Variable

When you follow the steps above, you will download a JSON file containing your credentials. You need to set an environment variable by opening a command prompt and entering

set GOOGLE_APPLICATION_CREDENTIALS=path-to-json-file

You can then verify it is set by typing “set”.

That environment variable is temporary and will persist for the duration of the terminal session. To set the environment variable permanently, follow these steps.

3. Install PHP Composer

https://getcomposer.org/download/

Composer will need a php.ini file. If one doesn’t exist, it will create one.

4. Update php.ini

To ensure your SSL certificates are up-to-date, download the latest cacert.pem from https://curl.haxx.se/ca/cacert.pem. Then, edit php.ini as follows:

curl.cainfo=”/path/to/downloaded/cacert.pem”

5. Create PHP Script

Copy and paste the example code from the instructions in step 1. This is a PHP script so wrap the code in <?php … ?>. Save it as test-text-to-speech.php somewhere.

6. Run PHP Script

At the command prompt, verify the Google environment variable is set and then run the PHP script. If PHP is in your path, you can run, for example,

This will output an audio file (output.mp3) in the same folder. By default, the text is “Hello, world!” and the language code is en-US. You can change the text to Chinese, for example: 这是一个测试 and change the language code accordingly to cmn-CN. Then, you’ll get the same speech as what you hear in Google Translate.

See list of text-to-speech voices (language codes)

There are two types of voice synthesis models: standard (parametric) and Wavenet. Wavenet is more expensive but sounds more natural.

Google Text-to-Speech pricing is based on the number of characters processed.

For additional customization of text to speech, use Speech Synthesis Markup Language (SSML).

Have you ever needed to make notes on screen like a web page to then share with others. You might first take a screenshot and then edit it in some program or buy an app like TechSmith SnagIt. A simpler option would be to install the Web Paint extension in Chrome. When you click on the extension, it opens this panel

Then, you can type, draw, add arrows, and so on then take a screen capture and share with others, e.g.

Many, if not most, web forms are backed by a database. But what if you just need a simple data store, like a JSON file, and you want to quickly and easily provide users with a user-friendly web form to make updates to the JSON data. JSON Editor takes a JSON Schema and uses it to generate an HTML form.

The generated JSON output can then be used by a templating language like Handlebars for building a web page.

JSON Editor supports many options including the ability to quickly style a form using CSS frameworks like Bootstrap.

For example, the following JSON schema

{
  "type": "object",
  "title": "Car",
  "properties": {
    "make": {
      "type": "string",
      "enum": [
        "Toyota",
        "BMW",
        "Honda",
        "Ford",
        "Chevy",
        "VW"
      ]
    },
    "model": {
      "type": "string"
    },
    "year": {
      "type": "integer",
      "enum": [
        1995,
        1996,
        1997,
        1998,
        1999,
      ],
      "default": 2008
    },
    "safety": {
      "type": "integer",
      "format": "rating",
      "maximum": "5",
      "exclusiveMaximum": false,
      "readonly": false
    }
  }
}

using the Bootstrap 4 CSS framework produces the following web form.

You can see a live demo in the JSON Editor interactive playground.

JSON Schema also supports validation so you can ensure your users are not submitting invalid data. For security reasons, this solution may not be good in a production environment by non-trustworthy people but it could work well in a secure, internal environment among coworkers.

Let’s say you have a website and you’re tired of making constant updates to some portion of oft-changing content, e.g. a conference agenda. It would be nice to offload this tedious work to a content owner who so often makes typos. But this content owner is non-technical and is a visual person. They need a WYSIWYG editor that would allow them to make changes directly on what it is that they want to edit, not directly in a database or something cryptic like a JSON file.

HTML5 supports the contenteditable attribute which makes any element editable. In the screenshot below, on a part of the byline is made editable.

Simple add the attribute “contenteditable=true” to the tag that wraps the text you want to make editable.

<p>Last Edited by <span id="author" contenteditable="true">Monty Shokeen</span>
</p>

When the content owner clicks on the text to editor, a black outline appears making it look like a form field.

The contenteditable attribute can be added to as many HTML elements as you want. Here is a live example showing three different editable fields with changes saved to local storage. Here’s an example showing how you can save the changes in JSON format and post it to a URL endpoint using AJAX or Fetch.