themeum / kirki Goto Github PK

Hi Aristeides,

First of all, thank you very very much for this, I really enjoy it!

I have a question about the custom styling. Somehow, I can't seem to be able to remove this action to I can keep the default WordPress styling.

add_action( 'customize_controls_print_styles', array( $this, 'custom_css' ), 999 );

I have tried a bunch, like a lot, of combinations starting from this:
remove_action( 'customize_controls_print_styles', array('Kirki', 'custom_css'), 1000 );

I even editied the plugin creating the Kriki on wp_admin and stuff like that. Maybe it's because it's Fridayafternoon and it's beer o'clock. But I can't get it to work.

Hope you can help me with this little issue.

Ciao!

Now that customizer controls are placed into the DOM with JavaScript – rather than being output directly in PHP – the tooltipsy plugin ceased to work.

More about this: https://core.trac.wordpress.org/ticket/29572

I tried to use the output method but it seems there is no result. I added this line of code in the config.php file that i use to configure kirki:

wp_enqueue_style( 'style_name', get_template_directory_uri().'/css/style_name.css' );

I have the above css file in css/style_name.css.
After this i set the stylesheet_id => 'style_name' and set the output of a select element like so:

...
'output' => array(
   'element' => '#page',
   'property' => 'max-width',
   'units' => 'px'
)

Nothing happens the iframe refreshes but there is nothing happening. Also even if i save nothing happen.

Should i expect something?

When I use it with _s theme's Site Title & Tagline, such as this code in /inc/customizer.php ,

$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';

I think it conflicts with Kirki. It's not live update as other inputs.

Is this a bug, or do you recommend me to NOT using _s's customizer code and use just Kirki instead?

PS. I put it to my GPL theme - Blogberry.

Thank you so much

Perhaps something like this would be preferable: https://github.com/WordPress/WordPress/blob/3.9.1/wp-admin/js/customize-controls.js#L1149-L1153

Notice: Undefined variable: output_element in E:\Web\wp-content\plugins\kirki\includes\class-kirki-style.php on line 104

I read in the Customizer API that in order for the JS Handler script for asynchronously reloading to work, the argument:

     'transport' => 'postMessage'

needs to be passed when registering a setting. However, since kirki plugin got rid of the need to register settings, how can I add postMessage reloading so I can get realtime editing to work. Than you

Kirki looks really easy to use. However, does it supports creation of "Panels"?

Sometimes it's required for one control (i.e. color) to produce output for many properties (i.e. color and border-color).

To not break the existing API my proposition is to declare this as following:

$controls[] = array(
    'type'     => 'color',
    'setting'  => 'color_accents',
    'label'    => __( 'Accents Color', 'goodyear' ),
    'section'  => 'colors',
    'default'  => '#3498db',
    'priority' => 2,
    'output' => array(
        array(
            'element'  => '.btn',
            'property' => 'color'
        ),
        array(
            'element'  => '.btn-primary',
            'property' => 'border-color'
        )
    )
);

What do you think?

To make them work again, it's necessary to trigger each control manually.

After that, the controls work correctly in subsequent theme activations.

Tested with a clean WordPress 4.1 instalation, without aditional plugins.

Required field target shown when clicking on true value but it don't hide when click on false value.

You should consider to use jQuery Attribute Equals Selector for your ID selectors in the custom controls jQuery calls for UI elements (slider, image radios etc). A problem occurs when using ID's like my_options[my_setting] for a setting to save the theme_mod options in just one database entry as a serialized array.

http://api.jquery.com/attribute-equals-selector/

With the current selector syntax, the jQuery UI elements are not rendered because the brackets in the ID selector are not escaped. You could escape those brackets in the with double backslashes or simple use the Attribute Equals Selector for the ID.

Instead of:

$( '#input_id; ?>' ).buttonset();

you should consider to change it to:

$( '[id="input_id; ?>"]' ).buttonset(); for example.

doitmax

Hi,
how can I add a new control? I need a H2 tag with label between tags.
Regards

Probably a CSS issue...

I've just updated to the latest version of the plugin and I've noticed that there's an issue with the slider control.

I have a slider control to control the alpha channel of a RGBa value. See below.
In the latest version the slider now only goes up to 0.9 instead of 1 and the value is always saved as 0.

If I change the max setting to a value above 1.0 then when the slider is on anything 1 and above it saves as that value but anything below 1 is treated as 0.

$controls[] = array(
            'type'     => 'slider',
            'setting'  => 'banner_main_heading_alpha',
            'label'    => __( 'Main heading background opacity.', 'HN' ),
            'section'  => 'banner_homepage_section',
            'default'  => 0.5,
            'priority' => 4,
            'choices'  => array(
                'min'  => 0,
                'max'  => 1,
                'step' => 0.1,
            ),
            'subtitle' => __( 'Set the opacity of the main heading background colour.', 'HN' ),
        );

Hi,
great framework!! I thinking about to integrate "kirik" with wp-less plugin. So I need to remove "inline style" after "save" and add configuration for wp-less plugin but I don't know which method should I change? Can you help me?

Regards

There is a problem with a required setting with the WordPress theme check plugin, this is the error that i get:

REQUIRED: Found a Customizer setting that did not have a sanitization callback function. Every call to the add_setting() method needs to have a sanitization callback function passed.

Hi,
I try to create dependency field so I try to use required setting for field but fields doesn't show when switch is turn on. This is my controls array:

[20] => Array
        (
            [type] => checkbox
            [setting] => topbar_visible
            [mode] => switch
            [label] => Turn on top bar
            [default] => on
            [section] => topbar
        )

    [21] => Array
        (
            [type] => text
            [setting] => topbar_welcome_text
            [label] => Welcome text
            [default] => 
            [required] => Array
                (
                    [topbar_visible] => on
                )

            [section] => topbar
        )

    [22] => Array
        (
            [type] => checkbox
            [setting] => topbar_show_address
            [mode] => switch
            [label] => Show company address
            [default] => off
            [required] => Array
                (
                    [topbar_visible] => on
                )

            [section] => topbar
        )

I copy pasted the following code directly from kirki.org, and using Kirki as a plugin. Once the required control is visible, it will only close by clicking option 1. You can see in the attached image I have 2 selected. 3 is the required option.

• Create the section
  */
  function my_custom_section( $wp_customize ) {

  // Create the "My Section" section
  $wp_customize->add_section( 'my_section', array(
  'title' => __( 'My Section', 'translation_domain' ),
  'priority' => 12
  ) );

}
add_action( 'customize_register', 'my_custom_section' );

/**

• Create the setting
  */
  function my_custom_setting( $controls ) {

$controls[] = array(
'type' => 'radio',
'mode' => 'buttonset',
'setting' => 'parent_setting',
'label' => __( 'My Setting', 'textdomain' ),
'section' => 'my_section',
'default' => 'option_1',
'priority' => 1,
'choices' => array(
'option_1' => __( 'Option 1', 'textdomain' ),
'option_2' => __( 'Option 2', 'textdomain' ),
'option_3' => __( 'Option 3', 'textdomain' ),
'option_4' => __( 'Option 4', 'textdomain' ),
),
);

$controls[] = array(
'type' => 'textarea',
'setting' => 'child_setting',
'label' => __( 'My Setting', 'textdomain' ),
'section' => 'my_section',
'default' => __( 'Default text', 'textdomain' ),
'priority' => 1,
'required' => array( 'parent_setting' => 'option_3' )
);
return $controls;
}
add_filter( 'kirki/controls', 'my_custom_setting' );

Hi
i see there Class(class Kirki_Fonts) created for Google font but define any way how to use it.i am using this plguin in theme , if you provide any way or idea how to add Google fonts it would be grate .

Thanks

Hi,

I only coud find on how to make sections or controls,
but what about making the live_preview work or where to i assing controls on a element?

Are there plans to add a feature for the import/export of Kirki theme customizer options?

Hi,
today I upgrade kirki framework from github repository and after that I got fatal error below:
Fatal error: Class 'Kirki_Customize_Radio_Control' not found in ..\kirki\includes\class-kirki-controls.php on line 19

Hey

What about adding some of the features to a core plugin?
https://make.wordpress.org/core/2015/01/13/feature-plugins-in-4-2-and-beyond/

Or adding some of the code/take part in the Customizer project going on for core right now.

Have a great day!

Warning: Illegal string offset 'body' in E:\Web\wp-content\plugins\kirki\includes\class-kirki-style.php on line 140

Fatal error: Cannot use string offset as an array in E:\Web\wp-content\plugins\kirki\includes\class-kirki-style.php on line 140

Hi,
I found this solution for google fonts #32 but when I choise a font from drop-down list the subset parametr isn't genereted for select font (is always the same chackbox list). I think this should be added because different fonts have different subset and not all fonts have all charset encoding.

Regards
Michal

So how does one go about creating tooltips or helper text for each option? Didn't see anything in the docs.

Thanks

@aristath i'm having the following control and i was wondering why the postMessage doesn't seem to do anything.

$controls[] = array(
           'type'     => 'color',
           'setting'  => 'header_background',
           'label'    => __( 'Header Background Color', 'bargain' ),
           'section'  => 'colors',
           'default'  => '#1abc9c',
           'priority' => 1,
           'transport'=> 'postMessage',
           'js_vars' => array(
                 'element'  => '#masthead',
                 'type'     => 'css',
                 'property' => 'backround-color'    
                 )     
         );

I tried to modify the code in class-kirki-scripts.php and i was able to see that the to parameter is valid so a color and if i stop the execution with debugger i'm able to set the color. I also tried to change the method for selecting to this:

$script .= '$("#customize-preview iframe").contents().find("' . $control['js_vars']['element'] . '").css("' . $control['js_vars']['property'] . '", to ? to : "" );';
$script .= '});';

I'm running wp 4.1.1 and using the already present $("'.$control['js_vars']['element'].'") does not seem to select it as it's in an iframe.

Is this something you guys are aware of?? If it is i might try to make a pull request if not maybe someone can guide me in the right direction.

Thanks for the awesome plugin!!

Hi,
just like in topic when I don't add a default value for control I got this notice message:

 Notice: Undefined index: default in ..\kirki\includes\class-kirki-style-fonts.php on line 63

I'm wondering if there's a way to use use the background control options manually instead of having them automatically generated and output as an inline style? I'm already generating an inline style and would like to just combine everything in one so there aren't two separate inline styles in the head.

For example, using like this results in nothing -

$sfpbg = get_theme_mod( 'sfp_bg' );
$cssoutput = '';
if ( $sfpbg ) {
$cssoutput .=
".page-template-front-page-php .site-header { " . $sfpbg . " } \n";
}
if ( $cssoutput ) {
echo
"<style type="text/css">" . $cssoutput . "</style>";
}

However, I'm able to make other controls output properly with this method, just not the Background Control.

Not sure how to fix the appearance of the quot areas above, but those are style tags.

Hi there,

Please add me as collaborator so I can merge some commits, as well as make some updates to the Kirki project.

• Ciaran

I just discovered that once a color is selected it does not clear or revert to the default color. When clicking the "Clear" button it does clear the color from the control, temporarily, but it does not clear the setting -- the theme still has the color applied and, when opening the customizer again, the color is still selected.

I tried with a set default and an empty default, the clear button just doesn't work. Sorry for not providing any technical details as I'm just the end user, not a coder. Let me know if you need a var_dump or debug info.

When there is no value to controller it should select default value but it doesn't!

array(
'type' => 'select',
'setting' => 'font_to_lowercase',
'label' => __( 'Text Transform', 'font_to_lowercase' ),
'section' => 'typography',
'default' => 'upper_case',
'priority' => 2,
'choices' => array("upper_case"=>"Upper Case", "default_case"=>"Default Case"),
),

Hey there,
Line 35 of your example-config seems to be missing a comma.

When redux is detected, add an admin panel with Kirki's options

Hey there!
Great project! I'm looking to embed this into my theme and I'm getting this error:
Parse error: syntax error, unexpected '&&' (T_BOOLEAN_AND), expecting ')' in /Users/Alex/Documents/Websites/somelikeitneat.dev/wp-content/themes/some-like-it-neat/library/inc/kirki/includes/functions/background-css.php on line 17

I was able to resolve this by using the code from the WP Repo plugin, the Github version is different/behind apparently.

Cheers!

Would be a nice addition that now we have sortable fields

This looks awesome, thank you for sharing this hard work.

The output option requiring a stylesheet id, does this mean the CSS will be output to a file instead of inline in the head?

You could just directly use wp_enqueue_style instead of using wp_register_style first.

wp_enqueue_style( 'kirki-customizer-css', $kirki_url . 'assets/css/customizer.css', NULL, NULL, 'all' );
wp_enqueue_style( 'kirki-customizer-ui',  $kirki_url . 'assets/css/jquery-ui-1.10.0.custom.css', NULL, NULL, 'all' );

https://github.com/aristath/kirki/blob/master/kirki.php#L61

Why are you not adding a version when enqueue it? I know by not changing the version when you update the css then depending on the hosting caching it will not update.

I try to add group-title but after update I got error below:

Warning: include_once(../kirki/includes/controls/class-kirki-customize-group_title-control.php): failed to open stream: No such file or directory in ..\kirki\kirki.php on line 62

Please don't close tickets before I say "thanks" or mark the problem is resolved!

See http://codepen.io/ZoFish/pen/CLxmq for an implementation

The URL in the googlefonts() function in kirki.php on line 81 is hard coded to http so it produces warnings in the WordPress admin when define('FORCE_SSL_ADMIN', true); is set in wp-config.php.

I changed the URL from http://... to //... to fix this on my install.

Hi, I've upgraded to the new version and encountered an issue that required fields display all the time no matter what is selected in the parent setting. This worked beautifully in the old version. This is a sample code I use:

function swibu_layout_setting( $controls ) {
$controls[] = array(
'type' => 'radio',
'mode' => 'image',
'setting' => 'layout_option',
'label' => __( 'Layout', 'swibu' ),
'section' => 'layout',
'default' => 0,
'priority' => 3,
'choices' => array(
0 => get_template_directory_uri() . '/lib/plugins/kirki/assets/images/1c.png',
1 => get_template_directory_uri() . '/lib/plugins/kirki/assets/images/2cl.png',
2 => get_template_directory_uri() . '/lib/plugins/kirki/assets/images/2cr.png',
3 => get_template_directory_uri() . '/lib/plugins/kirki/assets/images/3cm.png',
),
);
return $controls;
}
add_filter( 'kirki/controls', 'swibu_layout_setting' );

function swibu_nav1_setting( $controls ) {
$controls[] = array(
'type' => 'radio',
'mode' => 'buttonset',
'setting' => 'navigation1',
'label' => __( 'Navigation', 'swibu' ),
'section' => 'layout',
'default' => 'option_1',
'priority' => 5,
'required' => array( 'layout_option' => 1 ),
'choices' => array(
'option_1' => __( 'Header', 'swibu' ),
'option_2' => __( 'Left Sidebar', 'swibu' ),
),
);
return $controls;
}
add_filter( 'kirki/controls', 'swibu_nav1_setting' );

Hi, I found this library is very interesting and awesome. Can't wait to try it on my upcoming theme. However, when I succeed to install it, I notice that you change the default WP customizer style with your own (dark colored). I prefer to use WP default style, can you show me how can I do it?

Thanks!

Hi,
when I'm in customizer page in firebug console I see a lot of errors:

ReferenceError: jQuery is not defined
jQuery(document).ready(function($) {"use strict";  

When take a look on the source You will see that the kirki JS is before doctype.

Hi,
just like in topic I need to add control with wp text editor.
Regards

Hello,

firstly thanks for your fantastic work, really enjoying the Kirki ;-)

I found an error with an "Upload Control" (type => 'upload'). I get this error message:

Uncaught TypeError: Cannot read property 'frame_button' of undefined

This happens on WordPress 4.1.

Please can you help me with that?

Thanks

Pavel

We should parse all auto-generated CSS, combine all styles by property and then enqueue then in bulk instead of adding each one separately.