WordPress is an incredibly powerful and easy-to-use website builder and Content Management System. Its vast amount of themes for every type of website you can imagine (blog, e-commerce, artist’s portfolio, business website, etc.) number into the tens of thousands. However, in its simplicity, WordPress templates (especially the free ones) can be quite limited in functionality and customization options.
Case in point: Adding or changing a WordPress header image when the theme’s customizer does not allow for it. Most likely the theme that you are already using has a default header image. Your job is to locate that built-in header image and replace with your own. Here’s a quick and dirty workaround on how to make that happen.
1. Log in to your WordPress admin account.
2. Mouse over the home icon and website name in the upper-left portion of your WordPress admin window. Select “Visit Site.”
3. Depending on your web browser, there will be slight variations in this next step. However, essentially the same concept pretty much applies here across all web browsers. For example: when using Google Chrome, right-click on the header area of your website and select the option “Inspect.”
Also read: Using Google Chrome’s “Inspect” Tool for Website Diagnostics
This brings up a vast amount of behind-the-scenes information on the CSS, PHP, and HTML code. However, you do not need to be a coder in order to perform the following trick.
4. Look for the code that exists in the <div id="header"> and <div id="logo"> and (in the following image) <div id="splash"> HTML tags. There you will most likely find the URL path to where the header image is hosted, something like this: http://www.domain-name/wp-content/themes/theme-name/images/image-name.jpg
5. At this point you’ve located where the default header image is being hosted, and now it is time to go into your web-hosting account’s file system and hunt down that very same image to replace it.
But before you do, you need to make note of the pixel height and width of the default image header because the one that you’re replacing it with should be exactly the same size. You can most likely right-click on the image itself, save it to the desktop, and then inspect its file properties/info, which usually includes the image’s pixel dimensions.
6. Web-hosting services are usually managed via an easy-to-use interface called “CPanel.” Within “CPanel” is the “File Manager.” You need to log in to the file manager and click down into a path similar to the one where the header image is located, something like “/home/userdirectory/public_html/wp-content/themes/theme-name/images/image-name.jpg”
7. Right-click on the existing header image file and rename it to something like “image-name-old.jpg.”
8. Upload the new header image to that specific directory. Make sure that the new image file name is exactly that of the old image file name.
9. Clear your browser’s image cache files.
10. Go back to your website’s homepage and refresh.
You should now see a brand new header image in your WordPress template.
Conclusion
Without knowing how to code in WordPress’ three main languages (e.g. CSS, PHP, and HTML), you can do a lot of things under the hood of a WordPress template simply by jury-rigging the files that make up the template. All you need to do is know where the file (like an image file) is located so that you can hunt it down and replace it with your own custom design!
Nick Iandolo is a Boston-based professional corporate MarComm writer, journalist, and author. He writes articles about pop-culture events such as comic cons, movie reviews, local film and TV industry news, Boston and international travel, and technology blogs. He is currently working on a science-based children’s adventure chapter book series.
Subscribe to our newsletter!
Our latest tutorials delivered straight to your inbox
Sign up for all newsletters.
By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time. Subscribe