how to show a different image for each page, for instance in the header?
simple, all you have to do with this method is to create an image file with the page ID as part of the image name.
the code for this is really short:
<?php $page_id=get_the_ID();
if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='head-image.jpg'; }
echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>
this is all.
first step: create an image file name including the page ID (on pages only);
second step: check if a matching image file exists in the images folder of the theme;
third step: if yes, echo the image name; otherwise echo a default image name.
edited and extended:
if the header image is a css background image, this code can be easily adapted:
put it into an embedded style declaration into the <head> section of header.php:
<style type="text/css">
<?php $page_id=$post->ID;
if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='head-image.jpg'; }
echo '#header { background: url(' . get_bloginfo('stylesheet_directory') . '/images/'.$image.') center top no-repeat; }'; ?>
</style>
this can even be changed to be used to show different header images for each post …
How can I use two defferent images, one on home page and other on all other pages? I use Thesis 1.8 theme.
i don’t know about thesis, but generally, you could use a ‘if( is_home() ) …’ statement and use some code like this instead of the codes from the article:
<?php if(is_home()) { $image='head-image-home.jpg'; }else { $image='head-image-general.jpg'; }
echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>
if you have more questions concerning wordpress, consider joining the wordpress.org support forum.
Can you have several image headers rotating throughout the site 9which is the easy part with twenty eleven), but have only 1 particular one come up on the home page?
Thanks for the insights!
Twenty Eleven uses wordpress core functions to randomly rotate the header images; therefore to integrate your idea, one would either need to try and hook into these core functions, or add a conditional part to the build-in functionality in header.php.
A good place to ask these kind of questions about customizing wordpress themes is http://wordpress.org/support/
i was excited to find your simple code, but the images aren’t showing up on my page and i dunno why
here’s the code i’m using:
post_name;
if(is_page()) { $image=’side-image-’.$page_name.’.jpg’; };
if(!file_exists(TEMPLATEPATH.’/images/’.$image)) { $image=’side-image.jpg’; }
echo ”; ?>
This is the code that firefox generates:
Do you have any ideas why it is not showing on my page?
Here’s the css:
#sideimage {
border: 2px solid #122102;
position: absolute;
top: 210px;
left: 0;
height: 560px;
width: 370px;
}
Thanks!
i’ll try again, here’s the code that firefox generates:
hmm…guess the code doesn’t show if i copy and paste here…
<aside id="sideimage"> <?php $page_name=$post->post_name; if(is_page()) { $image='side-image-'.$page_name.'.jpg'; }; if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='side-image.jpg'; } echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?> </aside> generates this in firefox: <aside id="sideimage"> <img src="http://localhost/wp-content/themes/mantaruna/images/side-image-about.jpg" alt="" /> </aside>IT WORKS PERFECT NOW WITH CODE AS PASTED ABOVE!!!! YAY! I don’t know what happened but it just started working all of a sudden after reloading….THANK YOU!!!!!!
hi alchymyth,
I have added your code to my header:
1 ” post_name;
2 if(is_page()) {
3 $image=’head-image-’.$page_name.’.jpg’; };
4 if(!file_exists(TEMPLATEPATH.’../../uploads/’.$image))$image=’head-image.jpg’;{
5 echo ”;}
6 ?>”
I created a default image “head-image.jpg” and then created other images “about.jpg, contact.jpg…etc”
But the code only displays the default image on line 4: “$image=’head-image.jpg” if i remove this part then i get the different images but then no default image
I was hopeing you can help with this issue. As I would want the page to pick up the image of the page name if there is one and display a default image if no image with page name exists.
Is this something you could help me with please?
very likely, the image is not found at this location
TEMPLATEPATH.’../../uploads/’.$image.possibly, try to work with: http://codex.wordpress.org/Function_Reference/wp_upload_dir instead of TEMPLATEPATH etc.
for any help with wordpress, consider joining the wordpress.org support forum and ask your questions there.
I am experiencing the same problem…. my code is:
<?php $page_id=get_the_ID();
if(is_page($page_id)) { $image='head-image-'.$page_id.'.jpg'; }
else { $image='head-image.gif'; }
echo '’; ?>
@ugqueen:
what problem exactly? your code snippet is too short to see what you are doing with the $image variable; can you post the full section?
Hi there, I stumbled across your page while trying to get submenus featuring only the child pages for each parent page. I currently have this code:
<?php if (is_page('<!--:en-->Peninsular Malaysia<!--:--><!--:ms-->Semenanjung Malaysia<!--:-->')): ?>
<?php wp_nav_menu('menu=peninsular'); ?>
<?php endif; ?>
<?php if (is_page('<!--:en-->Sabah, Borneo<!--:--><!--:ms-->Sabah, Borneo<!--:-->')): ?>
<?php wp_nav_menu('menu=sabah'); ?>
<?php endif; ?>
<?php if (is_page('<!--:en-->Islands<!--:--><!--:ms-->Pulau-Pulau<!--:-->')): ?>
<?php wp_nav_menu('menu=islands'); ?>
<?php endif; ?>
<?php if (is_page('<!--:en-->Volunteering Opportunities<!--:--><!--:ms--> Peluang Kerja-kerja Kebajikan<!--:-->')): ?>
<?php wp_nav_menu('menu=volunteering'); ?>
<?php endif; ?>
Not very pretty or compact, I know, but I’m very new to all this. My question is, is there a way of adapting what you’ve done to achieve this result with menus? Also, I would like the menus to appear on every child page as well (much like metzondernaam wanted with the images above). I am struggling so thought I would ask in case you have any ideas.
Thanks,
Jemma
Hi Jemma,
please join the wordpress support forum and ask your question there.
alchymyth! thanks a lot!
it works perfect
thank you very much!
i have a question
if i have subpages, under the page_id=9 how can i inherit the header of page_id=9 ??
thanks for your time!
try:
$page_id=get_the_ID();if(is_page()) {
$page_id = (get_page($page_id)->post_parent) ? (array_pop(get_ancestors($page_id, 'page'))) : $page_id;
$image='head-image-'.$page_id.'.jpg'; }
the new line will always select the ID of the top page of any sub page levels.
hope this helps
I have been trying to use this piece of code with my custom theme, but am running into some problems. It is successfully using different images for different pages, however the homepage of the website now will not load any head-image.
For instance, the website is built like this: The homepage is like a blog, showing the latest posts. With your script, the head-image does not appear. All other parts of the website are actual static pages (for example page_id=16 etc…) and with your script activated a different head-image successfully appears for each one.
So basically me question is how can I edit your script so that the logo does not break on my homepage! Sorry for the long-winded explanation
hi kev,
the first snippet actually does not have an ‘else’ part to show a haeder if it is not a page (i must have missed that or it must have worked in earlier version of php or wp).
here is an adaptation (the third line is adapted):
<?php $page_id=get_the_ID();if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
if( !file_exists(TEMPLATEPATH.'/images/'.$image) || !is_page() ) { $image='head-image.jpg'; }
echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'" alt="" />'; ?>
the second snippet would actually work if, in style.css, there is a #header style defined with background image.
otherwise it will need the same adaptation as the first snippet.
if your home page is a static page using a page template to show the blog, you will also need to define a header image for it.
hope this helps, good luck with your site.
Thanks for this. Works like a charm.
However, I like using the page names like “http://mywebsite.com/about-us” instead of the “?page_id=16″ thing. Is it a simple change from ‘$page_id’ to ‘$page_name’ or is that something altogether different?
you are pretty much right -
if you look at the second code –
for instance, replace this part:
<?php $page_id=$post->ID;if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
with:
<?php $page_name=$post->post_name;if(is_page()) { $image='head-image-'.$page_name.'.jpg'; };
good luck
Again, works like a charm. Thanks for the clarification. And thanks again for this snippet.
Thanks Alchymyth !!!!!
Hi, how can you change this so If X page/category is open, it adds a certain stylesheet?
Hi Zenk,
you could simply use conditional tags (http://codex.wordpress.org/Conditional_Tags), such as
is_page('32')(http://codex.wordpress.org/Function_Reference/is_page) oris_category(21)(http://codex.wordpress.org/Function_Reference/is_category) and build something like this to add in header.php after the standard stylesheet:<?php if(is_page('32')) { ?><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style-page-33.css" type="text/css" media="screen" />
<?php } ?>
you can use ‘if – elseif – else’ statements to check for a whole list of pages and categories.
hope this helps,
if you need more suggestions, consider joining the wordpress support forum.
Hey, great job on the script!
I’m using this for a site and it works great, until I try to view a category list of posts then it doesn’t display the default. Any thoughts?
Hi Jon,
how would the default graphic look like? and what is showing as the haeader graphic of a category page?
i could not really see any changes of the haeder graphic with the different pages.
Which php file need to edit edit? Header?
hi somesz,
yes, these edits have to be done in header.php of your theme.
all the best …
OK, but where in the header.php – have tried several places, but can’t make it work.
Also – the filename of the image, should it be just the page-name, or does it need the whole URL of the given page?
I assume that I can simply upload a jpg to the theme-image folder, use the page-name.jpg and include your above code – without adjusting your code to my own filenames, correct?
Appreciate your reply.
Hi Peter,
if your question refers to the first bit of code, then you would add this where you want to show the image – definitively after the body tag.
the file name of the image is just the file name; the assumed location of the image is in the /images folder of the theme (change /images to whatever your theme uses as the folder for the theme images).
on a page with the page id 67, the image file name would be ‘head-image-67.jpg’
if you like, you can register with the wordpress support forum, and continue/extend the question there – makes it easier to show any code if neccessary – and there are many more helpers available.
good luck
I have been reading a few of your posts and have enjoyed it. Keep it up