Dynamic Stylesheet

  • Doodlebee

    (@doodlebee)


    16 years, 11 months ago

    Hey all,

    I was helping out someone with their WordPress site – she’s setting it up for a friend of hers. There was a need to have a different background to be set for every Page you come to on the site. Now, I know you can accomplish this by creating a page template or by using a conditional, but the problem is that the lady who the site is for isn’t very computer literate (and thus would have no clue how to create a new page template and/or add in the necessary stuff for conditionals).

    Now, I know you can create a dynamic stylesheet (I’ve done it before), so the idea was to add a dynamic stylesheet to pull in the page slug of the current page you’re one, and use that as the image that would be set for the background. The odd thing is that the stylesheet.php file seems to be stripping out the ability to read what Page you’re on. *Outside* of “stylesheet.php” if I use this code:

    $dpname = $post->post_name;
echo $dpname;

    The the slug of the Page you’re on will display. We were going to use this to set the background image:

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

    As I said, the above works fine in any other file in the system. However, when I put it in an actual stylesheet.pph file, the $dpname is ignored, and never gets called in. I’m *suspecting* it’s because of this line in the stylesheet (which *must* appear at the top of the file for it to work as a stylesheet):

    header(‘Content-Type=text/css’);

    I don’t know enough about dynamic stylesheets to know if this truly is the cause. But I’m really suspecting that it is.

    Does anyone know if this *is* what’s stripping the PHP from the file? And if so, would anyone know what I need to do to keep it recognizable as a stylesheet, but still pull in the information that I need?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Doodlebee

    (@doodlebee)

    16 years, 11 months ago

    Got it!

    I was an idiot. I forgot to call in the header for WordPress, so it would recognize the variables. The below code works like a charm!

    filename: stylesheet.php (saved *within* the wp-content/themes/YOUR THEME NAME)

    <?php

    require('../../../wp-blog-header.php');
header('Content-type: text/css');
    global $post;
$dpname = $post->post_name;
 ?>

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

    Hope it helps someone else!

    kodiak3000

    (@kodiak3000)

    16 years, 11 months ago

    Hey doodlebee – I got this to work, but instead of calling a different image for each page, it’s calling the same image.

    There’s a default bg image set using the “normal” style.css. This stylesheet should override that, and it does, but it keeps calling the same image rather than a different one for each page.

    I’m the original “helpee” on this one. I’m posting here in case anyone else can help, cause doodlebee’s already gone well beyond the call of duty here.

    Thanks!

    Thread Starter Doodlebee

    (@doodlebee)

    16 years, 10 months ago

    I know it’s been a while, but I swear I got this thing working – except the woman I was helping out still says it doesn’t function right. Here’s what I have come up with – and I swear it was working for me – but if anyone else may have some light to shed as to why it’s not working for her, that’d be great. (Or maybe the “working for me” thing was a fluke…I haven’t tested it recently)

    So the first step was this (and it relates to Kodiak’s error)…if you put in this piece of code, all on it’s own:

    <?php
$dpname = $post->post_name;
echo $dpname;
?>

    Then the post name of the page you’re on (be it post or Page), the “$dpname” will echo the slug of that post/Page. However, when I tried to place it in the stylesheet link:

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

    …it would only echo a blank spot where the name should be. I *suspect* that it’s because the stylesheet call – to make it dynamic – uses this line:

    header('Content-type: text/css');

    …but I have no basis for that line of thought other then that I *think* that’s why it is.

    Anyway, I did come up with a workaround – and this is what was working for me, but not for the lady I was helping.

    <?php

function dynamic_stylesheet() {

global $post;
$dpname = $post->post_name;

if (is_page() || is_single()) { ?>

<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');

?>

    This code, if placed in the “functions.php” file and added to your theme, will do what it needs to do. At least for me. LOL ( just suddenly realized maybe she took the “wp_head” call out of her theme header – maybe that’s why it’s not working for her….hmmm…)

    Anyway, if anyone else wants to test that out and see if there’s any weirdness with it, please let me know!

    ProsperoDK

    (@prosperodk)

    16 years, 4 months ago

    I’ve been helping my father getting his new website up and running. We are using WordPress more as a CMS instead of a blog with pages in a hierarchical structure.

    He wanted to have a different header image for each page (so the image related to the text on the page.)

    This wasn’t easy to accomplish until I found this thread.

    So with a few minor alterations this worked for me.

    I’m using the page-ID to name the header-image since that is easy for my father to find in the admin pages.

    And I had to change
    body { background-image:
    to
    #header { background:

    This is what I ended up that worked for me.

    <?php

function dynamic_stylesheet() {

global $post;
$dpname = $post->ID;

if (is_page() || is_single()) { ?>

<style type="text/css">
#header { background:url("<?php bloginfo('template_directory') ?>/images/banner/panorama.<?php echo $dpname ?>.jpg"); }
</style>

<?php } }

add_action('wp_head','dynamic_stylesheet');

?>

    If there’s no specific header image for that page it just uses the default header image.

    So thank you doodlebee for your code 🙂 It worked like a charm.

    Pete

    (@perthmetro)

    16 years, 3 months ago

    can you explain exactly where i place this code?

    Tom Penney

    (@blots)

    15 years, 12 months ago

    Haven’t read this whole post but I have also found the custom fields feature useful for this kind of stuff. then you don’t have to use dynamic style sheet and the author can set styles in a custom field then those styles can be included in-line by your template. simple example would be a background color

    $bgstyle="";
<?php
  // get the background color specified in the page meta data
    if (get_post_meta($post->ID, "color", true)) {
      $bgcolor= get_post_meta($post->ID, "color", true);
      $bgstyle=' style="background-color: ' . $bgcolor . ';"';
    }
?>
<body <?php echo $bgstyle; ?> >

    then the author , while creating a page, can add a custom field with key = “color” and value set to a valid css color like “blue” or “#0000ff” and that color will be set as body background

    Same could be done with image background names or whatever. Id recommend adding a test to your code to ensure what is entered as a value is valid. the above could mess up the html if the author entered something like “greenish brown”

    I’ve also used this for adding text in the masthead and even defining special menus and such.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dynamic Stylesheet’ is closed to new replies.