0

I want to change the background-proberty value of an element (div id = Box2) what sits in a container div with red background.

Box2 should has a background attribute of the specified post-metakey/custom field value.

When I insert the normal php set of the customfield to show off to the footer.php it shows all the different used values of the specied article.

The stylesheet is a style.css.php file. I tried 4 Versions and all do not work.

The custom field is: custombg($key) yellow (value)

What do i do wrong? none of these versions are working.

Here is the Code:

V1 - (style1.css.php) - - - - - - - - - - - - - - - - - - - - - - - - - - -

<?php
  header('Content-type: text/css');
  $newBG = "darkviolet";
?>

#Box2 {
background: <?php echo $newBG ?> ;
}

#Box2 {
background:red
}

V2 - (style2.css.php) - - - - - - - - - - - - - - - - - - - - - - - - - - -

<?php
  header('Content-type: text/css');
  $newBG = get_post_meta($post->ID, 'custombg', true);
?>


#Box2 {
background: <?php echo $newBG ?> ;
}

#Box2 {
background:red
}

V3 - (style3.css.php) - - - - - - - - - - - - - - - - - - - - - - - - - - -

<?php
  header('Content-type: text/css');
?>

#Box2 {
background: <?php the_field('custombg') ?> ;
}

#Box2 {
background:red
}

V4 - (style4.css.php) - - - - - - - - - - - - - - - - - - - - - - - - - - -

<?php
  header('Content-type: text/css');
?>

#Box2 {
background: <?php echo the_field('custombg') ?> ;
}

#Box2 {
background:red
}

/* --WP Check (all works fine)- - - - - - - - - - - - - - */

<?php the_meta();?> /* gives out every post-meta-key + values */
<br><br>
<?php echo get_post_meta($post->ID, 'custombg', true); ?> /* gives out specified post-meta-key + values */
<br><br>
<?php the_field('custombg'); ?> /* gives out specified post-meta-key value */

/* --PHP/HTML values to inject- - - - - - - - - - - - - - */

<div id="Box1" style="background:red">
<div id="Box2">
</div>
</div>
2
  • 2
    you can't use WordPress functions in a standalone php file, there is no WordPress environment loaded in that context.
    – Milo
    Feb 1 '18 at 5:39
  • Is there another solution what you might suggest? I am also trying it with js at the moment but there i also have the problem that i need informations from outside the loop. There must be a way... I thought when i link it in the header its inside the loop but i guess its not right? Is there a way that i can load my style.css.php file into the loop?
    – pt666
    Feb 1 '18 at 14:00
0

In most themes anything added via the wp_head hook should appear after (and override) enqueued CSS.

So you could add an action to the themes functions.php and use get_queried_object_id() for the post ID.

function my_dynamic_css() {
  $custombg = get_post_meta( get_queried_object_id(), 'custombg', true );
  if (! empty($custombg)) {
   ?><style>#Box2 {background: <?php echo $custombg; ?> }</style>
  <?php
  }
}
add_action( 'wp_head', 'my_dynamic_css');

Presumably, rather than having the rest of your CSS in a PHP file you could enqueue it as a standard CSS file. If not you could "include" it by adding <link rel="stylesheet" href="/pathto/my/style1.css" /> to the above function or use heredoc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.