I saw some people looking to display a different image on each WordPress Page instead of the site wide random images. Read on...
First, I'll give you the code and explain how it works. That way, you'll understand it better and can easily adapt it to your site.
The Code
<?php if (is_page('28')) { ?>
<img src="<?php bloginfo('template_url'); ?>/headers/image1.jpg" width="920" alt="<?php bloginfo('name'); ?> header image" />
<?php } elseif (is_page('26')) { ?>
<img src="<?php bloginfo('template_url'); ?>/headers/image2.jpg" width="920" alt="<?php bloginfo('name'); ?> header image" />
<?php } elseif (is_page('30')) { ?>
<img src="<?php bloginfo('template_url'); ?>/headers/image3.jpg" width="920" alt="<?php bloginfo('name'); ?> header image" />
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/rotating.php?image=<?php echo mt_rand(0,100); ?>" width="920" alt="<?php bloginfo('name'); ?> Rotating Header Image" title="<?php bloginfo('name'); ?> Random Header Image" />
<?php } ?>
I have 3 Pages here. With the above code, I'm telling the theme to display a given image on each of those 3 Pages and to display random images everywhere else.
- 1st two lines tell the theme to display
image1.jpgon a Page with ID28. - next two lines tell it to display
image2.jpgon a Page with ID26and so on. - Last two lines (marked in blue) tell it to display random images everywhere else.
How to
- Upload your header images into the headers folder in your PrimePress directory.
- Open your
header-images.phpin your WordPress theme editor, delete the already existing code and paste the above code block in there. - Change the Page ID and the image file name according to your site. (parts marked in red)
Some Notes
Chances are, you want to do this on more than three pages. Just copy (duplicate) the lines marked in green, paste them right below (but above lines marked in blue) and change the ID and filename.
If you have permalinks turned on, you can also type in the post-slug in place of the Page IDs.
Hi Ravi, thanks for this informative post. I like this theme….very neat and your examples make modifications possible. I would like to try it on a new website…will let you know once its done.
Thanks a lot Shankar…
Hi Ravi, I’m brand new to all this, but thanks for a beautiful, clean design. I want to use two different pages for two different blogs, and I’d like to be able to have a separate set of blogrolls on each page (and, ideally, separate tag clouds and categories). Is this possible?
Hi Sujata,
While I can not say its not possible, it becomes rather convoluted. I’d say the ideal way to maintain two blogs is to install two blogs and link them together.
Hi Ravi,
That’s great! Thanks for telling us how to do it.
Hi Ravi,
I just started a little blog to keep family and friends posted and I wanted to tell you that I must have looked at nearly 100 themes and for whatever reason kept coming back to this one. It is nice and clean; easy on the eyes. I just need to get around to changing the pictures and it is good to go!
I also wanted to let you know that I found that article (I guess the only one up) on your TechTrot site useful for someone starting out. You should write a little more often over there.
Cheers,
Jose
[...] WordPress Page specific Header Images – PrimePress Theme for WordPress [...]
Ravi,
Very nice use of the switch. I think this is what I need, here is what I want to do. On my contact form page ( plugin used for form ) I want to add an image to the page. If i put the php for the image in my ( page.php ) file it shows up on all pages. I just want it on the contact page. ALSO, in Wordpress 2.7 page id’s are not listed in Admin Edit pages.
Thanks for any info that might help.
Jim
Very nice use of the switch. I think this is what I need, here is what I want to do. On my contact form page ( plugin used for form ) I want to add an image to the page. If i put the php for the image in my ( page.php ) file it shows up on all pages. I just want it on the contact page. ALSO, in Wordpress 2.7 page id’s are not listed in Admin Edit pages.
Sorry-forgot to say. As you mentioned above might be easier to use slug (contact) since page id’s are not displayed any longer. My image path is ( images/logo.png)
Thanks
JIM
This codes which i’ve been looking for, thanks Ravi