How to Add or Change Banner Images on Your WordPress Website

In order to add or change the banner images on a WordPress website, you must have Administrator privileges.

Before uploading banner images:

Ensure that your banner images meet the York University Communications Standards guidelines.

Header .psd files are available at: http://www.yorku.ca/yorkweb/standards/templates/index.html (Passport York login required).

To customize:

  1. Open the appropriate file in Photoshop
  2. Select the text layer
  3. Change the text to the name of your website
    Banner images must remain either 910x180px or 910x70px – do not adjust the size of these banners.
  4. Click on File > Save-for-Web
  5. Save as a .jpg with Very High quality

To add or change your banner image:

  1. Log into your WordPress website
  2. Upload banner image(s)
    1. Click on Media (left navigation) > Add New
      You will see a ‘Multi-file uploader’ – you can do the same tasks with the ‘Browser uploader’ as well, however these instructions are for using the ‘Multi-file uploader’.Banner images must be either 910x180px or 910x70px in order to display properly. The template files provided are already sized to these dimensions and the dimensions should not be cropped or changed in any way.
    2. Either:
      1. drag and dropthe media files you wish to use on your website to the space inside the dotted lines;OR
      2. click on ‘Select Files’, find the file you wish to upload, and click to upload.Information about the file will then appear.
    3. Fill in the Alternate Text field
      This is the text that would appear if a visitor’s images are turned off or if a visitor was using a text or screen reader. It should describe the image in a succinct manner.
    4. Take note of the File URL
      This is the URL you use to link to the image or file. 
    5. Click ‘Save all changes’ to keep your file in the system
      You will be directed to the Library page that lists all uploaded media for your website.
  3. Click on Appearance > York Theme Options
  4. If you are using a 180px tall image on your homepage, insert the image URL next to ‘Main Page Header’, and insert the URL for the 70px tall header next to ‘Secondary Page Header’.
    According to York’s Communications Standards, a 180px tall header image should onlybe used on a website’s mainpage; all other pages should use the 70px tall image.If you are using a 70px tall image on all your pages, insert the image next to both ‘Main Page Header’ and ‘Secondary Page Header’.
  5. Click ‘Save Changes’
    Your changes will be applied immediately.