Wordpress customizer -> set property style by checkbox

Pinegrow Theme Converter
1

Hi guys,

I have a issue that i can’t seem to fix.
In the wordpress customizer, i want to add 3 checkboxes ; one for text-align left, one for center and one for right.
When i add a customizer control and set it to text, it works fine. if i type left, it aligns left, if if type center it centers, and if i type right it goes right.
However, when i change the control type to checkbox ,nothing happens.
I tried changing theme_mod style property to text-align: center; but it doesn’t work.
If i add a default value, this will show up the first time, but after clicking one of the other options, nothing happens.

I have added a screenshot below, please let me know if i am missing something.
Thanks for the help!

ScreenShot_04_04_2022_17_39_51
ScreenShot_04_04_2022_17_39_51452×852 7.91 KB

2

Hi @dawidofski,
So a checkbox will return a value of 1 or null (basically). So, when you check the box your element will get style="text-align: 1;" added. Without it checked your element gets style="text-align:;" added. I’m having a little trouble with envisioning how this control will work. Checkboxes are usually binary and allow multiple choices. What will be the output if the user selects left AND right?
Having said that, I think each checkbox would set a theme mod. You can then add a custom block of PHP to retrieve those mods and then set some styling on the page with a selector that matches the text you want aligned. Maybe somebody else will have a better answer.
Cheers,
Bob

3

Hi Rob,
Thanks for your input! The idea was that the user can select only one of the three checkboxes (left,middle or right). Maybe it is better to put it in a dropdown indeed.
Issue is i am having a hard time finding a good example with custom php code that i can use as an example.
Do you by change any advice on where to start?

Thanks again :slight_smile:

4

@RobM ,forgot to tag you!

5

Hi @dawidofski,
Here is an example link: Add a dropdown to theme customizer - WordPress Development Stack Exchange
You can add a custom control for type, and then add the select control into the ‘inc/custom.php’ file.

image
image988×948 55.9 KB

Then you can access and set the style using the Theme Mod to Style action.
image
image948×428 27.9 KB

Hope this helps,
Bob

6

Hi @RobM ,
I understand everything you say but somehow it doesn’t click.
I set up the add customizer control and the theme mod to style, but no matter what i put in my custom.php file it always gives me php erros.

Could you please show me what part i need to add to my custom.php to get it to work ?

Thank you so much!

7

Hi @dawidofski,
So, you want to set your actions up on the text block to be altered as above, with one change. Don’t add a custom control, leave the box blank.
Next, open up the ‘inc/custom.php’ file.
Add in the following:

function my_theme_register_custom_controls($wp_customize)
{
  $wp_customize->add_control(
    new WP_Customize_Control(
      $wp_customize,
      'text_align', //This is the id for your control
      array(
        'label'       => __('Select text alignment'),
        'description' => __('Select the desired text alignment'),
        'section'     => 'pg_conversion_default_cs', //This targets the default section created by Pinegrow - change it to your section name if you have created one
        'type'        => 'select',
        'choices'     => array(
          'left'    => __('left'), //The first part is the value returned, the second is the label
          'center'  => __('center'),
          'right'   => __('right')
        )
      )
    )
  );
};
add_action('customize_register', 'my_theme_register_custom_controls');

I didn’t add much in the way of text sanitization or translation. My PHP is a little rusty so there may be an extra semi-colon or two, but it works!
Let me know,
Bob

8

Hi Bob,
Works like a charm! Thank you so much for your help, time to make the perfect theme :smiley:
Best regards,
Dawid

1 Like