Wanted to offer some props…

Well, I haven’t caught his name yet, but I found a fellow “give something back” person who has provided me with some great information. Because of his assistance, I wanted to offer up a small amount to him via a link. So if you’re looking for more WordPress and ZenCart stuff, and can’t find it here (which is very possible, as I’m pretty small right now!), then feel free to look at the goodies “andrabr” has to serve up. There’s a lot of goodness over there, and I’m getting ready to dive in. I found him via this conversation on integrating WordPress with ZenCart. Very nice.

I also wanted to share a nice little plugin I wrote tonight. It’s probably my first “official” one, and I’m sure it needs to be cleaned up. I’ll probably play with it more.

Anyway, someone on one of the lists I’m on is trying to get a dynamic stylesheet to work with WordPress. She has a client who needs a different background image to show up depending on what page you’re on. Normally, you’d simply accomplish something like this just by using typical WP stuff:

1
2
3
4
<?php 
	if(is_page('1')) { ?>
		do stuff for page ID #1
<?php } ?>

However, the client needs to maintain themselves, and if they ever add or delete a page in the future, they would have no idea how to edit the code to get the new background to show up. (Or, if they did, they’d probably screw it up – or many other things could happen.) So she needed it to be as dynamic as possible. In a perfect world, the client would create a page, add in content, and upload an image (with the same name as the page), and it would be done.

Happily enough, I figured it out!

The original idea was to simply create a dynamic stylesheet. However, I discovered that the “regular” method for doing so would require you to go into the stylesheet and add in a new variable and more code any time you created a page. The “dynamic” part was working – the styles were served up based on whatever page you were on. However, for some reason, the dynamic variables served from within the stylesheet from WordPress were getting stripped.

To explain better – if I entered the following code into any theme file, then the page name would show (as it was supposed to):

1
2
3
4
<?php
	$dpname = $post->post_name;
	echo $dpname;
?>

In any file, it would echo out the name of whatever page you were on – which was wonderful. That meant all I needed to do was add this code to the dynamic_stylesheet.php file, and the name should show up where I wanted it to:

1
body {background-image:url("../images/<?php echo $dpname; ?>_bg.jpg");}

Makes complete sense, right? But the weird thing was, if I placed that code within the dynamic_stylesheet.php file, the $dpname would be stripped. It wouldn’t recognize it at all.

I tried all kinds of variations in trying to figure out why this was, and I still haven’t found a definitive answer. I suspect it’s the “header('Content-type: text/css');” line in the PHP file, but I can only speculate on that. I have nothing to back up that claim – it’s only a hunch I have.

However, I did find a workaround, and I think it’s pretty viable, since it’s such a small bit of code. For a large stylesheet, this would be very cumbersome, but since it’s only for a background image, it works rather well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
	function dynamic_stylesheet() {
		global $post;
		$dpname = $post->post_name;

		if (is_page()) { ?>

	<style type="text/css">
		body { background-image:url("<?php bloginfo('template_directory'); ?>/images/<?php echo $dpname; ?>_bg.jpg"); }
	</style>

<?php 		} 
	}

add_action('wp_head','dynamic_stylesheet');
?>

Copy that, paste it into a text editor, save the file as “functions.php” and place it in your “wordpress/wp-content/themes/YOUR THEME/” directory. (If you already have a functions.php file, then just open that sucker up in a text editor, and stick in the above code at the end of the file.)

I’d love to figure out why I can’t just place the code in the dynamic_stylesheet.php file though. That’s a mystery that I hope to solve…but we’ll see! (It’s because the stylesheet isn’t natively included with the theme files, so the $post variable isn’t globalized. That’s why you need ot add “global $post;“. You can also add “include(TEMPLATEPATH . '/path/to/stylesheet');” and it’ll work too – you may or may not need the globalization.) But I would imagine you could use this nice piece of code for anything – like if you wanted posts in a certain category to have this capability, or your archived posts – the possibilities are as endless as the pages WordPress will serve up.

Pretty cool. (I love it when people give me ideas!) Hope it helps someone out :)

Have your say: