ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Blogs

WordPress - Upload images to your WordPress site with Filezilla

Updated on December 2, 2012

In an earlier hub I explained how to Download and Configure FileZilla a very commonly used robust FTP client software on your local computer. If you've not had a look yet, it may help if your did a quick read up.

The textual content of your webpage is created within WordPress itself, using editing tools available when you login to WordPress as Admin. If you would like to know how to do this, do take a quick look at my hub entitled Your very first WordPress page. It's pretty simple really.

Web Page Images

Professional website builders normally create all the images they want to include in a webpage (perhaps using Photoshop, Corel Draw or Gimp i.e. great image creation and image retouching tools) and save these images, on their local computer's hard drive.

The images could be the Website logo, Menu item buttons, and other visual stuff that would add to the aesthetics of the webpage.

Hence, all the images required for use on a webpage are stored locally, but your WordPress CMS is hosted on a distant computer. Hence your first task would be to deliver the images on your local computer to the computer on which your WordPress CMS is hosted. Once these images are relocated there they can be included in your WordPress page. This ensures that the webpage aesthetics are more appealing than one that is purely textual in its content.

WordPress page content that is totally textual in nature could be visually boring to the visitor who may quickly lose interest in the page and move on. This can result in the visitor being flagged as a bounce in Google Analytics. Bounces do not help in getting your webpage to rank better in Google, Yahoo or Bing.

A nice blend of text and graphics (i.e. images) on your web page arrests the attention of visitor, which causes them to linger a while on your website reading your visually appealing and helpful page. Just perfect for getting noticed by search engines.

Here's how to achieve this:

Start up your FileZilla - FTP client.

Click File -> File Manager. From under the label MySites choose the website you want to connect to then double click the link. Take a look at diagram 1 and diagram 2.

Diagram 1. File -  Site Manager
Diagram 1. File - Site Manager
Diagram 2. Connecting to your website
Diagram 2. Connecting to your website

FileZilla immediately connects to your the website, and displays its root directory, folder structure in the right hand section of the FileZilla FTP client window as shown in diagram 3.

Diagram 3. Website root folder exposed in FileZilla
Diagram 3. Website root folder exposed in FileZilla

Scan though the the list of folders in the right hand window of FileZilla and locate the folder public_html. Take a look at diagram 4.

Diagram 4. The public_html folder
Diagram 4. The public_html folder

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. Take a look at diagram 5.

Diagram 5. Some of Folders within public_html
Diagram 5. Some of Folders within public_html

Notice the vertical slider on the extreme right hand side. Use the vertical slider to navigate through all the folders and files in the public_html folder.

Right click anywhere in the section where the folders are displayed (use the empty white space), From the sticky menu that appears click the Create Directory link to create a new folder within the public_html folder as shown in diagram 6.

Give the new folder an name, let's say pageimages as shown in diagram 7. Its not the most imaginative name but it will suit our purposes nicely. The folder will be created.

Use the vertical scroll bar to locate the folder. Double click the little yellow folder icon to enter the folder. FileZilla will show you the contents of this folder which in this case is nothing, i.e. the pageimages folder is empty.

Please notice that the folder name is written completely in lowercase.

Diagram 7. Creating the pageimages folder
Diagram 7. Creating the pageimages folder

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 you've created that you want uploaded to your WordPress website.

When the images are exposed in the left hand section of FileZilla, simply select, drag and drop them from the left hand side to the right hand side. This informs FileZilla that you want to copy and upload all the images selected in the local hard disk to the distant WordPress website in its folder named pageimages. Take a look at Diagram 8.

Diagram 8.  Uploading files to the website using FileZilla
Diagram 8. Uploading files to the website using FileZilla

FileZilla will being to upload one image at a time into the folder pageimages on the WordPress website. The status of the image file transfers can be seen in the bottom most section of FileZilla. Once all the images have been copied from the left hand side of FileZilla FTP client to its right hand side, Congratulations !!!! - You've successfully copied and pasted the images from your local hard disk to your WordPress website.

In my next Hub I'm going to explain how these images which are now on the WordPress website, in a a folder named pageimages can be displayed in a WordPress page. Stay tuned to this Hub place.

I would be really obliged if you left me some comments on whether you like, dislike my hub content. Please feel free to ask me for any information you would like to see on a hub concerning WordPress or any other Open Source CMS based tool. If I have the knowledge I'd be happy to share.

Ivan Bayross
Open Source Tutorials


    0 of 8192 characters used
    Post Comment

    • profile image

      SK 4 years ago

      So helpful - thank you!

    • profile image

      ZK 4 years ago

      Excellent article! Exactly what I was looking for. Please continue to make articles like this for other topics and software!

      (mt) ZK