Exploring The Internet

Exploring the web – Growing my online experience




Interested In How to Change Your Header Images?

April 21st, 2008 · 15 Comments · How to, Web Design, WordPress, WordPress Tips



Why should you change your header images? Well, you want to have your unique header images that reflect your personality, right? If you wonder how I’ve changed my header images on this blog (using Cutline theme), I’ll tell you how. Actually it is pretty easy. You just have to follow the steps below:

  • First you have to have your images ready on your PC (personal computer). You may create your own if you are good at it. Alternatively you may find Header Templates doing all the jobs for you if you want your header images to look professional; or get some free header images from the Internet here
  • Second you have to login to your WordPress Dashboard, find out your header images dimensions by clicking on Design/Theme Editor/header.php
  • Scroll all the way down to find this line: <div id=”header_img”>. The header dimension looks like width[970], height[140]
  • Once you know your header image’s dimension, you may have to customize your image(s) on your PC the same width and height as stated in your header.php file. I use a simple program – Microsoft Paint (which came with my PC) to do the job
  • Use FireFTP to upload your saved header image(s) to this folder: /word-content/themes/your_template/images; if you don’t have FireFTP, you can use any available FTP you have to do the job. Make sure you change your_template to be your real template name
  • The header image(s) you uploaded will replace the default ones. In my case I need to upload five different header images. You should give the same name(s) as your default one(s)

Do you like this article? Then don’t forget to subscribe! Also your comments are welcome!

Related articles
How To Customize Your Header Images
How to Replace Your Header Image in WordPress.com Blog?
Interesting in Getting a Header Image for Your New Blogger?

Custom Website Banner or Header - Vector File - Unlimited Revisions

$39.95
End Date: Friday Jul-7-2017 8:57:32 PDT
Buy It Now for only: $39.95
Buy It Now | Add to watch list

Business Website Banner or Header - Vector File - Unlimited Revisions
$39.95
End Date: Friday Jul-7-2017 9:00:01 PDT
Buy It Now for only: $39.95
Buy It Now | Add to watch list

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • Twitter
  • Technorati
  • Live
  • LinkedIn
  • MySpace

Tags: ·····

15 Comments so far ↓

  • What is Your Reaction When Someone Stole Your Content? « My Internet Stuff

    [...] 23, 2008 · No Comments Yesterday when I searched the topic – Interested In How to Change Your Header Images?, I found out that someone stole my partial article (the beginning part). My site showed up on the [...]

  • Shannon

    Hello, this is a wonderful article! I am a bit confused though. When I have my own image ready, I have to save it as .gif, .jpg, .jpeg, and .png, ALL OF THEM? Or just one extension? Also, say I have the image saved as mylogo.jpeg on my computer. I have to change this to header_1?

    Do you know how to have just one and only one header appear?

    Thanks so much for your response!

  • Shannon

    I got it! Thanks for your tutorial!!

  • Lana

    Hello, Shannon;
    I am happy that this tutorial helps you. You also asked how to have just one header appear. Did you get that one too? If not, here is the solution for that:
    open head.php by clicking on Design/Theme Editor/header.php on your WP Dashborad; find and keep this code:
    <img src=”/images/header_1.jpg” width=”970″ height=”140″ alt=” header image 1″ title=” header image 1″ />
    Then delete the other cases. This way you can have just one header appear. Hope it helps.

  • How to Add a Favicon to Your WordPress Blog? « My Internet Stuff

    [...] just added a favicon to my WordPress blog. Now it is your turn to add yours. If you don’t know how, the following steps could be [...]

  • How to Replace Your Header Image in WordPress.com Blog? « My Internet Stuff

    [...] articles Interesting In Getting a Header Image for Your New Blogger? Interested In How to Change Your Header Images? for WordPress [...]

  • charles

    Thanks for the tutorial – great job!
    I’m running Cutline 1.3 columnsplit and trying to create a page ( memoria in aeterna) with a static image (header_harold.jpg).

    The problem is, the (memoria in aeterna) page is ignoring code inserting my other images (header_1.gif thru header_29.gif). The (memoria in aeterna) page is correctly defined within and does appear on all pages of my blog.

    Below is my header code. Any assistance is appreciated.

    <img src=”/images/header_harold.jpg” width=”975″ height=”150″ alt=” memoria in aeterna page header image” />

    <img src=”/images/header_.jpg” width=”975″ height=”150″ alt=” random header image” />

  • charles

    Here is the complete header code:

    <img src=”/images/header_harold.jpg” width=”975″ height=”150″ alt=” memoria in aeterna page header image” />

    <img src=”/images/header_.jpg” width=”975″ height=”150″ alt=” random header image” />

  • Lana

    Hello Charles,

    Please check your default image dimension. Is it like what you said 975×150? or 970×140? If your image is too big, it is not going to show up because I have that experience with mine.

  • Lana

    Oh, if you created a new page. Don’t forget to include codes in your header.php; toward the end of the file. This is for your HOME page

    <?php if (is_home()) { ?>
            <img src="<?php bloginfo(‘template_url’); ?>/images/header_1.jpg" width="970" height="140" alt="<?php bloginfo(‘name’); ?> header image 1" title="<?php bloginfo(‘name’); ?> header image 1" />

    You can change slightly with your memoria page. If you want to have a static image just for this page, then it should not be in the loop of other images. It should be modified just point to this page. Hope this helps.

  • Charles

    Lana, thanks for your assistance. All 35 of my header images are 975/150 respectively. I also had the correct code in my header for the “memoria in aeterna” page.

    Please note that I also had other page (i.e. announcement, contact, and about) that worked with static image without any problem.

    My problem was after I change the page name from “memoria in aeterna” to only “memoria” it worked.

    Thanks

  • Lana

    Hello Charles;

    You’re welcome. I am so glad that it works out for your memoria page now.

    Probably when you created your codes, you used “memoria” instead of “memoria in aeterna”. So that makes sense that it works after you changed it to be the same name as you stated in your codes.

  • Ray

    I try to follow your methods but under the
    , it show nothing except..

    <a title=”Home” href=”/”>

    Can you advise me on this…many thanks..

Leave a Comment

Your e-mail address will not be published. Required fields are marked *

Comment moderation is in use. Please do not submit your comment twice.

*






Custom Search