2

I am developing a WordPress theme that uses a color picker in the admin panel in which users can pick a custom link color. I want the link hover color to be the same as the normal link color, but darkened 10%. In LESS I can use the link color as a variable and use @link-hover: darken(@link-color, 10%); but then that doesn't connect with the PHP color picker. Is there a way to get PHP to refer to a LESS or SASS mixin variable? Or maybe some other solution that gets the result I'm looking for?

Using: PHP 5.4.4 / WordPress 3.5 / LESS 2.7.1

My function for the WordPress "Theme Customizer" (from hal gatewood):

function stillcalm_customize_register( $wp_customize )
{
$colors = array();
  $colors[] = array( 'slug'=>'content_bg_color', 'default' => '#ffffff', 'label' => __( 'Background Color', 'stillcalm' ) );
  $colors[] = array( 'slug'=>'content_text_color', 'default' => '#000000', 'label' => __( 'Text Color', 'stillcalm' ) );

  foreach($colors as $color)
  {
    // SETTINGS
    $wp_customize->add_setting( $color['slug'], array( 'default' => $color['default'], 'type' => 'option', 'capability' => 'edit_theme_options' ));

    // CONTROLS
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $color['slug'], array( 'label' => $color['label'], 'section' => 'colors', 'settings' => $color['slug'] )));
  }

}

and then this in the header:

<?php 
        $text_color = get_option('text_color'); 
        $background_color = get_option('background_color');
    ?>
    <style> 
        body { 
            color:  <?php echo $text_color; ?>; 
            background-color:  <?php echo $background_color; ?>;
        } 
    </style>
kanga
  • 371
  • 6
  • 17
  • Just to make sure. LESS and SASS are two different things. They generally do the same but they're different projects with different syntaxes and different parsers. – markus Jan 05 '13 at 23:00
  • I use LESS but was open to switching to SASS if it would work better. But really all I want is to use variables, so the PHP-only solution suggested by Calle works just fine. – kanga Jan 06 '13 at 19:38

1 Answers1

1

If you use Javascript to parse LESS or SASS you could do it that way. Here's a thread describing how that works: Parse LESS client side. You would write PHP code that generated LESS and then use javascript to parse it on the client side.

Here's a thread on how to do it with PHP: How to generate lighter/darker color with PHP?

Community
  • 1
  • 1
C. E.
  • 10,297
  • 10
  • 53
  • 77
  • Using PHP sounds simpler so I think I'll go with that. I'm not sure how to incorporate the color picker's number into that, and also how to get that to create a new variable and not just change the current one..? I've pasted some more code above for reference. – kanga Jan 05 '13 at 22:20
  • For example, $background_color is a hex value so if you want to darken it ten "steps" you just write adjustBrightness($background_color, -10) instead of $background_color. After having included adjustBrightness of course! (Read the second answer in the link I gave you) – C. E. Jan 06 '13 at 00:13
  • (There is also a solution using percentages on that page, however I think the one using steps is more elegantly written up. And as he says, it has other advantages too.) – C. E. Jan 06 '13 at 00:16
  • Thanks so much, it works perfectly. I went with the PHP solution using steps because I agree that it was much cleaner code. Just to clarify for others out there: This is not using LESS at all, just PHP instead. – kanga Jan 06 '13 at 19:36