How to Change the Header in WordPress Using FTP

1. IDENTIFY THE HEIGHT AND WIDTH OF YOUR HEADER
You can find the size of your header in WordPress by going to APPEARANCE-> EDITOR -> click on Style.css on the list of Template choices. Search for the word “header” in the template. When you look at the codes surrounding the word “header” you will find code like the code listed below which shows the height and width of your header:

/***** PAGE FORMATTING *****/
#header {
width: 1000px;
background: url(images/header.gif) top center no-repeat;
height: 100px;
margin-top: 0;
color: #fff;

2) FIND THE LOCATION OF THE HEADER AND WHERE IT IS STORED
To find the location of your header, you can go to the home page of your site and on the toolbar click VIEW-> source. Search the word “header” and find code that contains the term “header” that looks like the below code:

(“http://www.abundantideas.com/wp-content/themes/eximius/images/header.gif”)

The above code is the path that leads to your image file. You can see that the end of the code says “header.gif”. This is the name of the picture that is your header.

3) CREATE A NEW HEADER
Using the name of the header that you found in step 3 and the size of your header in step 1, create your new header using the same header name and size.  (You can also change the size of your header in Step 1 by changing the height and width in the code shown in step 1.  If you cange the size in this code, create a new header based on this new size.)

4) OPEN AN FTP FILE TRANSFER PROGRAM
For this example, we will be using the client version of FileZilla. You can download this software for free onto your computer.
When using FileZilla, enter your HOST name USERNAME and PASSWORD using the hosting account that hosts your site.  For example, if your host is Hostgator, for the host field, enter the server address for server1.    For USERNAME and PASSWORD, enter your Hostgator username and password for the hosting account that hosts your site.  For the port field, enter 21.

The top left section of FileZilla shows the files on your computer and the bottom left section of FileZilla shows the folder contents after you click on a folder in the top left section. The top right section of FileZilla shows the files on your FTP server. These are the files for your website. The bottom right section of FileZilla shows the folder contents after you click on a folder on your ftp server.

5) TRANSFER YOUR NEW HEADER INTO THE FOLDER THAT CONTAINS THE OLD HEADER
Using the right side of FileZilla, browse for the old header. Find the header using the path you found in step 2.  Using the top right section of FileZilla, follow these steps:   Go to the folder called “public-html”, then the folder with your site’s name, then “wp-content” folder, then the “themes” folder, then go to the theme that is activated on your site and click on it’s folder. Next, click the images folder and browse to find the old image.  You will see the image in the bottom right section of FileZilla

Using the left sections of FileZilla, browse for the new header your created and move  it to the folder that contains the old header. FileZilla will say that a file with the name you want to transfer already exists in the folder. Override that old file to replace it with the new one.

5) MAKE YOUR WORDPRESS HEADER CLICKABLE
If you want to make your WordPress header clickable so that when you click it, your home page shows up, Go to Appearances -> Editor -> click header dot php file, then do the following:

Change from <div id="header">

to: <div id="header" onclick="location.href='http://example.com/';" style="cursor: pointer;">