Inserting Image(s) Into WordPress Page(s) Using FTP

Introduction:

After WordPress is installed on your Web server, please use an FTP client like FileZilla or Cute FTP to navigate to the WordPress folders and files and folder.

Creating An Images Folder In WordPress Using FTP:

After you have downloaded and installed the FileZilla FTP client software on your local computer, it’s time to configure FileZilla to be able to locate and connect to your Web server on which your WordPress CMS has been installed. To configure FileZilla it has to be running on your local computer. To do this, go to your desktop and locate the FileZilla icon as shown in Diagram 1 and click it.

This will invoke the FileZilla program you installed earlier and get it running on your computer's memory ready to be configured.

Diagram 1

When the FileZilla program loads in your computer memory it displays its Graphic User Interface ( GUI ) as shown in diagram 2.

Diagram 2

Click the textual menu item File. In the sticky menu that opens up select the link Site Manager, as shown in Diagram 3.

Diagram 3

Under the label MySites, Select your website. Click Connect as shown in Diagram 4.

Diagram 4

Scan though the list of folders in the right hand window of FileZilla and locate the folder public_html as shown in Diagram 5.

Diagram 5

Double click the small yellow folder icon to enter that folder. FileZilla next displays all the folders and files that are within the public_html folder as shown in Diagram 6.

Diagram 6

If not already available, create a new directory named images inside the root folder. Right-click anywhere inside the right hand side window, click “Create directory” as shown in Diagram 7.

Diagram 7

A small dialog box appears which prompts to enter the name of the directory which should be created as shown in Diagram 8.

Diagram 8

Rename the New directory to images ( or as required ) as shown in Diagram 9.

Diagram 9

The images directory is successfully created as shown in Diagram 10.

Diagram 10

In the left hand section of FileZilla, the directory tree of your local hard disk is exposed. Navigate to where you have saved the images that you want upload to your WordPress website as shown in Diagram 11.

When the directory is created and you have entered into the directory in the right hand section of FileZilla, simply select, drag and drop them from the left hand side to the right hand side OR right click the file and select Upload from the options provided.

This informs FileZilla that you want to copy and upload files selected in the local hard disk to the distant WordPress website in its folder named images as shown in Diagram 11.

Diagram 11

FileZilla will upload image file into the folder images on the WordPress website. The status of the image file transfers can be seen in the bottom most section of FileZilla.

Once image have been uploaded from the left hand side of FileZilla FTP client to its right hand side,

Congratulations !!!! - You've successfully uploaded the image from your local hard disk to your WordPress website as shown in Diagram 12.

Diagram 12

Once done, you can insert these images within any WordPress Pages ( or Blog post ). The technique for doing this is covered in the following material.

Inserting A Path To An Image In A WordPress Page

To insert an image into a page(s) manually in WordPress 3.X.X login to WordPress as administrator, by simply entering the url_of_your_website/wp-admin in your Browser. Enter the appropriate username and password {which was provided while installing Wordpress} and then click on Log In as shown in Diagram 13.

Diagram 13

After logging in as WordPress Admin, a Dashboard page opens as shown in Diagram 14.
The Dashboard provides access to different WordPress functions and features.

Diagram 14

In the left menu, locate the link Pages. Click Pages. From the drop down menu that appears click on Pages as shown in Diagram 15.

Diagram 15

Click the Title of the page as shown in Diagram 16 or click Edit to open the page in editable mode within the WordPress Editor.

Diagram 16

Ensure that the WordPress editor is in HTML mode. Click on the HTML tab as shown in Diagram 17. Next navigate to the page content and insert the cursor wherever you want place the image. Click img in the top menu bar as shown in Diagram 17.

Diagram 17

A dialog box is displayed. Place the cursor within the text box displayed and enter the relative path of the URL for this image within the dialog boxas shown in Diagram 18 and Diagram 19.

Diagram 18

Click OK to save the data entered as shown in Diagram 19.

Diagram 19

A second dialog box opens us. Enter a description for the image as shown in Diagram 20 and 21.

Diagram 20

Click OK to save the data provided as shown in Diagram 21.

Diagram 21

The HTML codespec to insert an image is displayed as shown in Diagram 22. The two values entered in each of the dialog boxes are set as values for the HTML src and alt tags.

NOTE: You can now easily modify the codespec (if required) such as adding specific styling to an image or setting the image height and width proportionately within this codespec.

Diagram 22