Adding a click-able image into the header
Question:
I would like to add an image into my header that is linked to a certain page or site.
Answer – Option 1: Have the image show up on every Page and Post
1) Log into WordPress
2) Go to “Media” -> “Add New” and upload your image. Copy the generated image URL.
3) Go to “Appearance” -> “Editor”
4) Select Header (header.php) from the file list on the right.
5) Add a div tag with absolute positioning above the #sitewrap div
Note: You will need to adjust the position margins to your image and header!
Answer – Option 2: Have the image show up only on the Homepage
1) Log into WordPress
2) Go to “Media” -> “Add New” and upload your image. Copy the generated image URL.
3) Go to “Appearance” -> “Editor”
4) Select Header (header.php) from the file list on the right.
5) Add PHP code (see screenshot & below) to check if the page is the homepage
6) Add a div tag with absolute positioning above the #sitewrap div
Note: You will need to adjust the position margins to your image and header!
Important Note: Different browsers (Internet Explorer, Firefox, Chrome etc.) all render “absolute positioning” slightly different. Your results may vary. This post is just a “general” how to intended for experienced users.
To learn about CSS positioning property visit W3 Schools.
