Don’t put your switch in a javascript. PHP does it for you.
If you want to do it that way, you can:
<?php if(is_category('movies') || ('television')) { ?>
<img src="movieheader.jpg" />
<?php } else { ?>
<img src="header.jpg" />
<?php } ?>
Alternatively, you can just do PHP theme files for each category and forget the conditionals. If the “movies” category is ID#2, then cat-2.php is the theme file you need.
doodlebee, thank you for taking the time to reply. Going through the learning curve and the kindness of people helping on these forums is a big help.
I’ve played around with your suggestion but there is a lightbulb that is not going on for me.
You said don’t put the switch in a javascript, that php does it for you. I don’t understand what you mean.
The onclick javascript language in the original is there to make the header image link back to home page. My goal is to have that functionality remain but at the same time, let the headerimage itself switch depending on the category being viewed.
I read up on your alternative idea of using category templates in the codex during my first pass at this. I also spent hours searching and studying the forums.
the illustration code i put above has only one elseif statement but my site will have lots of parent and child categories planned so conditional structure seems better than writing cat-2.php to cat-19.php files. As for location, adding the call for different files to my headerimage call in my header.php file seemed like the right place to put the magic …
….but maybe the throbbing headache i’m getting from fixating on this, and the desperation for help, should tell me I’m over my head with this approach.
I have a bad feeling I’m making something easy unnecessarily complex.
Could you kindly clarify a bit more on what you meant, or what I’m misunderstanding? thanks again.
Well, the above conditional code I supplied basically says “If the category is either “movies” or “television”, then display “movieheader.jpg” – if not, then display the regular “header.jpg” on everything else.”
If you use the ID numbers for categories, (personally) I think it’s better than using the slug.
There’s also alternate ways of making your header link to the home page. I don’t know what theme you’re using – hopefully your own – but you can just surround the image itself with <a> links. So it’d look like so:
<a href="yoururl.com"><img src="<?php if(is_category('movies') || ('television')) { ?>
movieheader.jpg
<?php } else { ?>
header.jpg
<?php } ?>" alt="header image here" /></a>
That’ll surround the header image – no matter what it is, with a link to your home page.
The reason I said “PHP handles it” is because putting PHP inside Javascript is like…I don’t know…trying to create a new webpage within a webpage, rather than just putting the content in a section. (I don’t know – I’m not good with metaphors!) Both a scripting languages – you use one or the other. You can use Javascript for javascript functions (like mouseover s and such), but it’s kind of pointless to use javascript with PHP inserted into it. Especially when the PHP code is already written to handle what you want, and you don’t have to rewrite the javascript to do what the PHP already does. (I hope that all made sense.) You’re making more work for yourself that way.
If you search for “making header image clickable” or something similar in the forums, you can see lots of solutions to this. The one I posed above would be the simplest method.
But to replace just the header image? You just need that conditional stuff above – really that’s all there is to it.
Doodlebee – thanks for the follow up. Your comments about mixing the javascript and php make sense. There was a reason I went with that approach (think it’s called desperation 😉 )
I took your advice . …and even better, thanks no small part to you, think I figured out the problem. It’s simple (i think) but it wasn’t obvious or related to the conditionals approach.
The short answer is the function array I mentioned in my original post (and then wrote off and forgot about) was causing problems. The slightly long winded explanation, for you if you’re curious, or anyone else who comes along with similar struggles is:
My theme originally had css entries in my style.php file for #headerimage that set a background image as header.jpg. I changed that CSS early on but didn’t think about the array in function.php which worked with those terms. If I had simply created a new ID like #headpicture and worked off that aka <div id="headpicture"> all would have been fine, I think. Instead, I kept using the same naming conventions (<div id="headerimage">) without a clue they were otherwise engaged.
I tried all kinds of things from the javascript mess to different conditionals because I assumed it was my coding at fault. Each failure led to a new method to try. Being inexperienced it was easy to doubt my coding (not an area of confidence) or the strategy I was trying. I figured I was an idiot beginner 😉
I trusted your approach but when that didn’t work either it lit the lightbulb that is my pea sized intellect and made me realize it was something else.
I started searching for possiblities and breaking things to see what would happen until I found that array again. I commented it out as an experiment and it looks for certain like the issue was there. I’m too tired to put together a solution but I’m pretty confident it won’t be a big deal tomorrow.
I don’t want to celebrate before I cross the finish line but I’m relieved to have an explanation other than me not being able to add 2+2. That was a frustrating tiresome educational exercise!
thanks again, so much, for your input.
cheers.
