如何允许用户更改窗口小部件标题颜色？

Question

So I'm building this theme where I want to allow users to change the color of the background of the title of widgets. Therefore in functions.php, where I register the sidebar, I've got:

      'before_widget' => '',
      'after_widget' => '',
      'before_title' => '<div class="widget-header"><p>',
      'after_title' => '</p></div>',

To allow people to change the color of backround of the title I added:

'before title' => '<div class="widget-header" style="background: #ccc;"><p>'

And that still works. I created a theme options page where people can choose the color, and I changet the code to:

'before title' => '<div class="widget-header" style="background: <?php echo get_option('shoboto_maincolor'); ?>;"><p>'

Now when I save, the page goes blank. I'm entirely positive the style="background: ;" is correct, since it changes the color in logo of the site, the code for which is located in header.php. So I think it has something to do with the order of loading wordpress elements. Am I right? I mean the header (I think) loads after my options page passes the value, but functions.php loads earlier. Am I right? And if so, how can I tackle this problem? Any other ways you know to allow users to change colors?

Answer 1

if you take a look at the line

   'before title' => '<div class="widget-header" style="background: <?php echo get_option('shoboto_maincolor'); ?>;"><p>'

you'll notice that you have a <?php ?> inside the rest of your php code

so the end result ends up looking something like

<?php .... <?php ... ?> ... ?>

this will output an error and since the debugging is turned of by default you'll get the white page as the document failed to parse...

so you need to change that line to

'before title' => '<div class="widget-header" style="background:' . get_option('shoboto_maincolor') . '"><p>',

in order to get rid of the parsing error