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!


2 Answers 2


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.

  • The function that I'm trying to add is needed only in one page so for that page I can also use 2 stylesheets: 1 for body etc and 1 for the div that I would like to move. I try to explain something more about my project, I'm creating a template for an Italian Real Estate agency that don't want to use google maps [ :-( ], they gave me their map and want to be able to move this divs that will be pointers on the map as soon as an apartment becomes free so the function will be used only in a page named mappa.php. Now I'm trying to add the things you told me, I'll write back very soon, thank you! Mar 21, 2011 at 19:31
  • Now it is working :-) These are inside my header.php = <style type="text/css"> <?php include('stylemappa.php');?> </style> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/stylemappa.css" /> Inside stylemappa.php there is: <?php define('WP_USE_THEMES', true); require('./wp-blog-header.php');?> .zona1{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appacqua_zona1x');?>px;left:<?php echo get_option('appacqua_zona1x');?>px;} Thank you very much to all! Mar 22, 2011 at 0:23

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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