0

I am super new to working with the customizer built into WordPress. I have been reading articles all day and picking up things. I see with the customizer that we can create various types when it comes to creating add_control components. For example, I see the following makes a date input field...

$wp_customize->add_control( 'custom_theme_css', array(
  'type' => 'date',
  'priority' => 10, // Within the section.
  'section' => 'colors', // Required, core or custom.
  'label' => __( 'Date' ),
  'description' => __( 'This is a date control with a red border.' ),
  'input_attrs' => array(
    'class' => 'my-custom-class-for-js',
    'style' => 'border: 1px solid #900',
    'placeholder' => __( 'mm/dd/yyyy' ),
  ),
  'active_callback' => 'is_front_page',
  'section' => 'custom_css',
));

I also see the following makes a textarea component...

  $wp_customize->add_control( 'custom_theme_css', array(
  'label' => __( 'Custom Theme CSS' ),
  'type' => 'textarea',
  'section' => 'custom_css',
  ));

...but how do we make one relating to a css opacity value? I want to do something like this within the color section of the customizer, that allows the background of the page to have an opacity adjustment.

  $wp_customize->add_control( 'custom_theme_css', array(
  'label' => __( 'Change Opacity' ),
  'type' => 'css',
  'opacity' => ''//some variable that gets user input for opacity value
  'section' => 'color',
   ));

What must I do to learn how to build this correctly?

Update

Below is a final result of my demo in adjusting a background opacity:

add_action( 'customize_register' , 'lesson01b_options' );

function lesson01b_options( $wp_customize ) {

    $wp_customize->add_section( 'lesson01b_msection', array(
    'title' => __( 'Opacity Adjustments' ),
    'description' => __( 'Adjust the opacity this way background images show through' ),
    'panel' => '',
    'priority' => 39, //160 by default
    'capability' => 'edit_theme_options',
    'theme_supports' => '',
    ));

    $wp_customize->add_setting( 'lesson01b_msetting', array(
    'type' => 'theme_mod', // or 'option'
    'capability' => 'edit_theme_options',
    'theme_supports' => '',
    'default' => '',
    'transport' => 'refresh', // or postMessage
    'sanitize_callback' => '',
    'sanitize_js_callback' => '',
    ));

    $wp_customize->add_control( 'lesson01b_mcontrol', array(
    'label' => __( 'Opacity Control', 'lesson1b' ),
    'type' => 'text',
    'section' => 'lesson01b_msection',
    'settings' => 'lesson01b_msetting',
    ));
}

add_action( 'wp_head' , 'lesson01b_get_setting' );

function lesson01b_get_setting() {
    ?>
    <style type='text/css'>
    #page {
        opacity:<?php echo get_theme_mod('lesson01b_msetting') ?> ;
    }
    </style>
    <?php
}
Improve this question

1 Answer 1

Reset to default
2

There is no such value of 'type' parameter in add_control() function. See the documentation.

What you can do is create a control e.x.:

$wp_customize->add_control(
   'my_control', 
    array(
        'label'    => __( 'Opacity Control', 'mytheme' ),
        'section'  => 'my_section',
        'settings' => 'my_setting',
        'type'     => 'text',
    )
);

And then in file which you have <head> tag in (I suppose it's header.php file) add following code:

<head>
  <style>
    *{
      opacity: <?php echo get_theme_mod( 'my_control', '0' ); ?>
    }
  </style>
</head>

Now when you change value of the control, your opacity will change too and you should see the result. Note that value of your theme option must be in range from 0 to 1 so you have keep it in mind. I hope that's what you are looking for.

Improve this answer
4
  • Sebastian you rock. I will reproduce this on Monday to confirm. Have a great weekend!
    – klewis
    Oct 28, 2016 at 21:41
  • 1
    Great answer! I'd like to add onto this with some documentation from the Developers Handbook. There are HTML5 number and range types which allow you to define a min and max number along with step incrementation which you could set at 0.1. Using something like this will make it easier to sanitize and process.
    – Howdy_McGee ♦
    Oct 28, 2016 at 22:19
  • Sebastian thanks again, but I am still having an issue. no matter what I do, the get_theme_mod resorts to its default value of 0.9 only. It never changes. any advice based on my updated code above? thanks
    – klewis
    Oct 31, 2016 at 18:05
  • Found mistakes on my end. I was referencing the control, when I suppose to reference the settings to display my opacity adjustments. Thanks again for sparking the fire and helping me think through this.
    – klewis
    Nov 1, 2016 at 18:51

Your Answer

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

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