Modify CSS via Theme Control Panel

Question

Hi to all I'm trying to create an advanced control panel for my first Wordpress template but I'm not able to add a function that I will need. The function that I'm trying to add is the possibility to choose the position of a DIV (left and bottom) via Admin Panel. (Apologize me for my really bad english)

Here is the code I have in my functions.php

$shortname = appacqua
array( "name" => "Point on the map",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Have I to activate zona 1?",
        "desc" => "Select if you want to show the first zone",
        "id" => $shortname."_zona1c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 1",
    "desc" => "Choose the position",
    "id" => $shortname."_zona1x",
    "type" => "text",
    "std" => "Left:???"),
array( "type" => "close"),

I can see "box" in my Admin Panel and I have no problems with Checkbox, if I echo $shortname."_zona1x" It shows the number, the only problem I have is when I try to add this to my style.css:

.zona1{width:27px;height:27px;background:url(icone/1.png) no-repeat;position:absolute;bottom:0;left:<?php echo $appacqua_zona1x;?>px;}

It doesn't work... If I use Google Chrome to Ispect the element it gives me something like this:

width: 27px;
height: 27px;
background: url(icone/1.png) no-repeat;
position: absolute;
bottom: 0;
left: <?php echo $appacqua_zona1x;?>px;

What am I doing wrong? Thank you very much for you help.

Do you know if there is a way to create also a preview of this modification INSIDE the control panel (like inside an iFrame or stuff like this).

Let's say that I'm a "self-made programmer" :P so please write "slowly" (lol) and be kind with me, thank you a lot!

Answer 1

From the looks of it your adding php right in the css which will not work. You need to write to the css file itself or dump it right into the html as Jeremy said as I am writing this:)

Writing a new CSS file every time you make any changes can tax your system, but works well if your not making lots of dynamic changes to a live site, for instance the twentyten weaver theme does this.

An easy way to do this is to actually turn your .css file into a .php file with the following at the top, and your php/css after.

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

The alternative it to write it in the header of your html, lots of plugins do this, and it can be annoying to alter the markup since it is not semantically separate, but it's also very easy.

Typically this is done using the Options API : http://codex.wordpress.org/Options_API

Here is an example that has used add_option in the backend for the background color (this is put in the header.php for example).

body {
  background-color: <?php echo get_option('background_color'); ?>;

For previews you can hook into the default preview_post_link and use an iframe, here is an example.

 <iframe src="<?php echo clean_url(apply_filters('preview_post_link', add_query_arg('preview', 'true', get_permalink($post->ID)))); ?>" width="100%" height="600" ></iframe>

Please remember there are performance issues when writing dynamic styles and you should do more research into this topic depending on the context.

Answer 2

The style.css file is not a php file, thus it cannot execute php code. If you want to include those styles, you will need to either build a dynamic css generator, and include that on your theme's header, or include the styles in a style tag.

I have seen it done both ways, and I would consider either acceptable.

The css generator can be cached by the user, so it is better performance wise.