Conditional header-objects per page/category WordPress
- SOLVED
I'm trying to add conditional php for changing a header-object based on the page and category. I get a parse error unexpected T.ELSE There are over 25 pages, I've included a few as a sample to check code. There is no div ID for headerobject, I inserted under the dive class as follows:
<div class="art-headerobject">
<?php
if(is_page('BASEBALL')||(is_category('14')){
echo 'img src="images/header-object-baseball.png" />';
} ?>
<?php
else if(is_page('BASKETBALL')||(is_category('8')){
echo 'image src="images/header-object-basketball.png" />';
} ?>
<?php
else if(is_page('HOCKEY')||(is_category('26')){
echo 'image src="images/header-object-hockey.png" />';
} ?>
else(is_page('HOME')){
echo 'image src="images/header-object-general.png" />';
} ?>
</div>
Answers (7)
Pixel Coder answers:
Add this to functions.php in your theme directory.
add_theme_support('post-thumbnails', array('page'));
// Change 960 to the width of your header image in pixels.
// Change 200 to the height of your header image in pixels.
add_image_size('header', 960, 200);
Then place this in the file you would like the image to appear.
<div class="art-headerobject">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php the_post_thumbnail('header'); ?>
<?php endwhile; else : ?>
<img src="http://lorempixum.com/960/200/sports/" alt="Default image" />
<?php endif; ?>
</div>
Now you can add a custom header image to each page in the WordPress admin.
To do this look for the "Featured image" option to the lower right when editing a page.
Click "Set featured image", upload the image and make sure to chose the option to "Set as featured" once uploaded.
Hope that helps.
Kathy Goss comments:
Alistair,
Thank you for the response. I'll try it out tomorrow. Interesting approach. My previous designer created the header with multiple items. The header oject is only part of the header. She defined the header-object in CSS as:
/* begin HeaderObject */
div.art-headerobject
{
display: block;
left: 0;
position: absolute;
top: 0;
width: 481px;
height: 522px;
background-image: url('images/header-object.png');
background-repeat: no-repeat;
}
Would this added information change the approach?
Pixel Coder comments:
Hi Kathy,
Not at all, the CSS styles only that area of the site.
div.art-headerobject is saying div with a class of art-headerobject.
Without looking at your site the div.art-headerobject might be contained within another element which has a CSS attribute of
.art-container {
position: relative;
padding: 1px;
background: #FFF;
}
<em>Above is only an example.</em>
All the code I posted does is allow you to create images as you wish instead of diving into code each time you desire a new header image.
Best
Kathy Goss comments:
Hi Alistair,
I really like this approach, but I'm not certain which file you are referring to:
"Then place this in the file you would like the image to appear." - Would this still go into header.php?
Sergio V. de la Garza answers:
Hi Kathy, here is the code you should use to get the image that belongs to each page or category.
the code you give us sometimes you need to use the exact path to your files on the server that's why i added <?php bloginfo('template_directory'); ?>
cheers!
<div class="art-headerobject">
<?php
if (is_page('baseball') || is_category('14')) { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/header-object-baseball.png" />
<?php } elseif (is_page('basketball') || is_category('8')) { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/header-object-basketball.png" />
<?php } elseif (is_page('hockey') || is_category('26')) { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/header-object-hockey.png" />
<?php } elseif (is_page('home')) { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/header-object-general.png" />
<?php } else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/header-object-general.png" />
<?php } ?>
</div>
=============================
i updated the code to show header-object-general.png on non specified categories
cheers!
Kathy Goss comments:
Sergio,
Your code works and adding <?php bloginfo('template_directory'); ?>
was required to bring up the pictures.
How would I add the else default for all other pages not specified?
Kathy Goss comments:
This solution worked perfectly. Thanks.
Svilen Popov answers:
There is a missing <strong>)</strong> in your code
<blockquote><?php
if(is_page('BASEBALL')||(is_category('14'))<strong>)</strong>{
echo 'img src="images/header-object-baseball.png" />';
}
else if(is_page('BASKETBALL')||(is_category('8'))<strong>)</strong>{
echo 'image src="images/header-object-basketball.png" />';
}
else if(is_page('HOCKEY')||(is_category('26'))<strong>)</strong>{
echo 'image src="images/header-object-hockey.png" />';
}
else(is_page('HOME')<strong>)</strong>{
echo 'image src="images/header-object-general.png" />';
}
?></blockquote>
John Cotton answers:
<div class="art-headerobject">
<?php
if( is_page('BASEBALL') || is_category('14') ) {
echo 'img src="images/header-object-baseball.png" />';
} else if( is_page('BASKETBALL') || is_category('8') ) {
echo 'image src="images/header-object-basketball.png" />';
} else if( is_page('HOCKEY') || is_category('26') ) {
echo 'image src="images/header-object-hockey.png" />';
} else if( is_page('HOME') ) {
echo 'image src="images/header-object-general.png" />';
}
?>
</div>
Kathy Goss comments:
Hi thanks for the reply. I am not getting the parsing error with your code change but I am not getting the images at all.
Kathy Goss comments:
Hi John,
My major problem is that my original web designer is no longer available. Originally, we were going to have a separate site for each sport category so she just defined a single header object in the CSS style as:
/* begin HeaderObject */
div.art-headerobject
{
display: block;
left: 0;
position: absolute;
top: 0;
width: 481px;
height: 522px;
background-image: url('images/header-object.png');
background-repeat: no-repeat;
}
We since decided it made more sense to just add category pages for alternative sports and I was told to accomplish this was to put the conditional statements in the header.php. Your code accomplished removing the parsing error, however, the images do not change. Do we need to define anything more in the CSS as well?
John Cotton comments:
Hi Kathy
For a moment, modify the code as below. At least then you'll see if it's just the tests that are failing.
<div class="art-headerobject">
<?php
if( is_page('BASEBALL') || is_category('14') ) {
echo '<img src="images/header-object-baseball.png" />';
} else if( is_page('BASKETBALL') || is_category('8') ) {
echo '<image src="images/header-object-basketball.png" />';
} else if( is_page('HOCKEY') || is_category('26') ) {
echo '<image src="images/header-object-hockey.png" />';
} else if( is_page('HOME') ) {
echo '<image src="images/header-object-general.png" />';
} else {
echo 'Nothing to show!';
}
?>
</div>
John
John Cotton comments:
Hi Kathy
For a moment, modify the code as below. At least then you'll see if it's just the tests that are failing.
<div class="art-headerobject">
<?php
if( is_page('BASEBALL') || is_category('14') ) {
echo '<img src="images/header-object-baseball.png" />';
} else if( is_page('BASKETBALL') || is_category('8') ) {
echo '<img src="images/header-object-basketball.png" />';
} else if( is_page('HOCKEY') || is_category('26') ) {
echo '<img src="images/header-object-hockey.png" />';
} else if( is_page('HOME') ) {
echo '<img src="images/header-object-general.png" />';
} else {
echo 'Nothing to show!';
}
?>
</div>
John
Utkarsh Kukreti answers:
You're missing ( and ) on all your if statements.
if(is_page('BASEBALL')||(is_category('14')){
should be
if((is_page('BASEBALL')||(is_category('14'))){
Joshua Nelson answers:
You're missing some callouts and else ifs are acutally elseif. I'd change it to ditch the echos while you're at it - like this:
<div class="art-headerobject">
<?php if(is_page('BASEBALL')||(is_category('14')){?>
<img src="images/header-object-baseball.png" />
<?php } elseif(is_page('BASKETBALL')||(is_category('8')){ ?>
<image src="images/header-object-basketball.png" />
<?php } elseif(is_page('HOCKEY')||(is_category('26')){ ?>
<image src="images/header-object-hockey.png" />
<?php } else(is_page('HOME')){ ?>
<image src="images/header-object-general.png" />
<?php } ?>
Kathy Goss comments:
I still get this with your code:
Parse error: syntax error, unexpected '{' in /home/content/31/7500231/html/sportslife/wp-content/themes/Basketball/header.php on line 54
Joshua Nelson comments:
You can't have a else with a condition, I missed that. Did you want the last one to be a sort of default? then it would just be } else { on the final one, and that will result if none of the other if states are satisfied.
Try this:
<?php if(is_page('BASEBALL')||(is_category('14')) {?>
<img src="images/header-object-baseball.png" />
<?php } elseif(is_page('BASKETBALL')||(is_category('8')) { ?>
<image src="images/header-object-basketball.png" />
<?php } elseif(is_page('HOCKEY')||(is_category('26')) { ?>
<image src="images/header-object-hockey.png" />
<?php } elseif(is_page('HOME')) { ?>
<image src="images/header-object-general.png" />
<?php } ?>
or this if you want the default for the last line
<?php if(is_page('BASEBALL')||(is_category('14')) {?>
<img src="images/header-object-baseball.png" />
<?php } elseif(is_page('BASKETBALL')||(is_category('8')) { ?>
<image src="images/header-object-basketball.png" />
<?php } elseif(is_page('HOCKEY')||(is_category('26')) { ?>
<image src="images/header-object-hockey.png" />
<?php } else { ?>
<image src="images/header-object-general.png" />
<?php } ?>
Kathy Goss comments:
Joshua, I do want the last one to be a default. I tried your second option and still got:
Parse error: syntax error, unexpected '{' in /home/content/31/7500231/html/sportslife/wp-content/themes/Basketball/header.php on line 54
Joshua Nelson comments:
Kathy,
Try this:
<?php if(is_page('BASEBALL')|| is_category('14')) {?>
<img src="images/header-object-baseball.png" />
<?php } elseif(is_page('BASKETBALL')|| is_category('8')) { ?>
<image src="images/header-object-basketball.png" />
<?php } elseif(is_page('HOCKEY')|| is_category('26')) { ?>
<image src="images/header-object-hockey.png" />
<?php } else { ?>
<image src="images/header-object-general.png" />
<?php } ?>
You don't need additional () around statements like is_category or is_page so we were missing some closing ). That should work now. Sorry for the runaround, doing a few things at once... Seems this site was down for a bit, too.
alchemist alchemist answers:
Hi ,
You were missing some parenthesis ')' at the end of your if statements and also the correct fomat for iamge tag is :
<img src='source/path/here' />
I have corrected the code as shown below, have a try :
<div class="art-headerobject">
<?php
if( (is_page('BASEBALL')) || (is_category('14')) ){
echo "<img src='images/header-object-baseball.png' />";
}
?>
<?php
else if( (is_page('BASKETBALL')) || (is_category('8')) ){
echo "<img src='images/header-object-basketball.png' />";
} ?>
<?php
else if( (is_page('HOCKEY')) || (is_category('26')) ){
echo "<img src='images/header-object-hockey.png' />";
} ?>
<?php
else if( is_page('HOME') ){
echo "<img src='images/header-object-general.png' />";
} ?>
</div>