PHPackages                             ouun/kirki-module-sync\_controls - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. ouun/kirki-module-sync\_controls

ActiveLibrary[Framework](/categories/framework)

ouun/kirki-module-sync\_controls
================================

Sync Module for the Kirki WordPress plugin.

v1.0.2(5y ago)01.1kMITJavaScriptPHP >=5.6

Since Jan 3Pushed 5y ago1 watchersCompare

[ Source](https://github.com/ouun/kirki-framework-sync_controls)[ Packagist](https://packagist.org/packages/ouun/kirki-module-sync_controls)[ RSS](/packages/ouun-kirki-module-sync-controls/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependencies (1)Versions (4)Used By (0)

Sync Kirki controls
===================

[](#sync-kirki-controls)

This module allows setting a master to a control. Let's say you add a color control which should have the same value as its master until the user decides to overwrite it. That is basically what this is all about.

Requirements
------------

[](#requirements)

- Kirki Framework >=4.0
- WordPress >= 4.6

Which controls are supported
----------------------------

[](#which-controls-are-supported)

So far this is tested with the following Kirki Controls and should work with others out of the box, too:

- Color:
- Multicolor:
- Typography:

How to set up Syncs
-------------------

[](#how-to-set-up-syncs)

In general multiple controls can have the same "master". Just define `sync-master` within the `input_attrs` argument for each of them:

```
'input_attrs' => [
  'sync-master' => 'primary_color'
 ]

```

For the example above `primary_color` is the masters setting ID.

Special Case: Multicolor Field
------------------------------

[](#special-case-multicolor-field)

Usage with:

The Kirki Multicolor Field internally sets up multiple controls. It is up to you to set up a master for all colors at once or individually.

### Set master for all color controls

[](#set-master-for-all-color-controls)

You can do the above example for a Multicolor Field as well. So each color control of that will be synced to the master `primary_color` until its value is overwritten.

```
'input_attrs' => [
  'sync-master' => 'primary_color'
 ]

```

### Set individual masters

[](#set-individual-masters)

Let's say you have set up the color controls like this:

```
'choices'   => [
  'color_1'   => esc_attr__( 'First Color', 'example' ),
  'color_2'   => esc_attr__( 'Second Color', 'example' ),
  'color_3'   => esc_attr__( 'Another Color', 'example' ),
],

```

So you can define for each `choices` individually which the sync master is.

```
'input_attrs' => [
  '{{ CHOICE ID }}' => [
    'sync-master' => '{{ MASTER ID }}',
  ],
  'color_2' => [
    'sync-master' => 'colors[primary]',
  ],
  'color_3' => [
    'sync-master' => 'colors[secondary]',
  ],
],

```

You could even define the master for all and make an exception for `color_2`.

```
'input_attrs' => [
  'sync-master' => 'colors[primary]',
  'color_2' => [
    'sync-master' => 'colors[secondary]',
  ],
],

```

`color_1` and `color_3` will have the same master `colors[primary]`. `color_2` will be synced with `colors[secondary]`.

Special Case: Typography Field
------------------------------

[](#special-case-typography-field)

Usage with:

The Typography Field is setting up multiple controls, too:

- 'font-family'
- 'font-weight'
- 'font-style'
- 'font-size'
- 'line-height'
- 'letter-spacing'
- 'word-spacing'
- 'text-transform'
- 'text-align'
- 'margin-top'
- 'margin-bottom'
- 'color'

Currently you need to define each control you want to sync individually:

```
'input_attrs' => [
  'font-family' => [
    'data-sync-master' => 'another_typo_control[font-family]',
  ],
  'font-weight' => [
    'data-sync-master' => 'another_typo_control[font-weight]',
  ],
],

```

Sync indicator
--------------

[](#sync-indicator)

Controls which have a master sync defined have an indicator appended to the label. It is linked to focus the master control on a click and either labels `AUTO` as long as it is in sync or 'CUSTOM' if the value is overwritten.

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity53

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 61.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~86 days

Total

3

Last Release

2146d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b1119667d96ab4063e83fd0cd4797ec2e010d86e24e1a4bec13ce9cc5f5b045f?d=identicon)[ouun](/maintainers/ouun)

---

Top Contributors

[![aristath](https://avatars.githubusercontent.com/u/588688?v=4)](https://github.com/aristath "aristath (16 commits)")[![ouun](https://avatars.githubusercontent.com/u/32090713?v=4)](https://github.com/ouun "ouun (10 commits)")

---

Tags

frameworkwordpresscustomizer

### Embed Badge

![Health badge](/badges/ouun-kirki-module-sync-controls/health.svg)

```
[![Health](https://phpackages.com/badges/ouun-kirki-module-sync-controls/health.svg)](https://phpackages.com/packages/ouun-kirki-module-sync-controls)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)