Is there a way to mix CSS and PHP?

Question

I'm working on a wordpress theme, and i want to have a custom header background. I used to use add_theme_support('custom-header); function that wordpress offers, it works but not the way i want it to. I want to have a background-image instead of an img. I made a function called header_background_callout() and i added a section, setting and control. the function works and outputs the background url that the user chooses through the customize section in wordpress. Is there a way that i can do something like this in css? : background-image: url(<?php echo wp_get_attachment_url(<?php get_theme_mod()); ?>);

Thanks in advance.

Possible duplicate of [How do i run PHP inside CSS](https://stackoverflow.com/questions/12367134/how-do-i-run-php-inside-css) — GrumpyCrouton, Sep 01 '17 at 13:50

score 1 · Answer 1 · answered Sep 01 '17 at 14:43

1

try this. echo " backgroud-img = 'url('get_theme_mod()')' ";

answered Sep 01 '17 at 14:43

Laeeq Khan Niazi

568
4
11

score 1 · Answer 2 · answered Sep 02 '17 at 19:16

1

You can add inline styles to your theme using wp_add_inline_style:

<?php wp_add_inline_style( $handle, $data ); ?>

where $data is the CSS you want to include in your theme. This way you can have your php variables loaded as CSS for your website.

answered Sep 02 '17 at 19:16

Łukasz Mazan

171
1
6

score 0 · Accepted Answer · answered Sep 01 '17 at 13:54

0

Yes kind off.
I made my css file a php file and because of that I can do as you say

background-image: url(<?php echo get_theme_mod(); ?>); // I suppose you need to echo the mod?

In the HTML you use it like;

<Link rel="stylesheet" type="text/css" href="style.php">

Edit you may need to change the header of the php file to a css file by:

<?php header("content-type: text/css; charset: UTF-8"); ?>

answered Sep 01 '17 at 13:54

Andreas

23,610
6
30
62

That worked! but is there a way that i can use wp_enqueue_style() instead of linking it in the html file? Thanks a lot. – LineCommander Official Sep 01 '17 at 13:59
Yea i forgot echo and the wp_get_attachment_url() before the function. – LineCommander Official Sep 01 '17 at 14:00
I don't know what that is. But generally I would say you can echo any text you want there. – Andreas Sep 01 '17 at 15:17

score 0 · Answer 4 · answered Sep 02 '17 at 21:33

I found this easy way and it works the best:

In your Index.php file add:

<?php 

       function bg_img_alt() {
         if(get_theme_mod('vibe_hero_background_setting') > 0) {
           return wp_get_attachment_url(get_theme_mod('vibe_hero_background_setting'));
         }else{
           return get_template_directory_uri() . '/img/bg.jpeg';
         }
       }
?>

        <style type="text/css">

       background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(<?php echo bg_img_alt(); ?>);
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
       background-attachment: fixed;
    </style>

Is there a way to mix CSS and PHP?

4 Answers4

Linked