How picu settings work

I was asked by Marc about how our settings work. Well, his original question was if we use React, but since we don’t and since I have this new blog here, I thought I just might try to give a very basic overview of how we implemented it. Maybe this is helpful to someone.

We define all of our settings using one big $settings array.

We can add new settings pages like this:

$settings['general'] = [
    'title' => __( 'General', 'picu' ),
    'description' => __( 'General picu settings.', 'picu' ),
    'icon' => '<svg>…</svg>',
    'priority' => 1

We can add individual settings like this:

$settings['general']['settings'] => [
    'random_slugs' => [
    'type' => 'checkbox',
    'label' => __( 'Use random URLs for picu collections', 'picu' ),
    'description' => __( 'Disable, to use the WordPress default, generating the slug from the title.', 'picu' ),
    'default' => 'on'

This is what it looks like in the WordPress Admin:

There is a filter in place, which we use add settings from our Pro plugin. (Other developers could easily add their own settings as well, btw.)

We iterate through this array to register all of the submenu pages and individual settings.

We also have a couple of helper functions in place, which render basic setting types, such as checkboxes and text fields.

But it is also possible to use a custom function for more complex settings by using the type of html and then adding the callback function via output:

$settings['design-appearance']['settings'] => [
    'theme' => [
        'type' => 'html',
        'output' => 'picu_settings_theme',
        'label' => __( 'Theme', 'picu' ),
        'default' => 'dark'

This is what the theme settings looks like:

What I love most about this system is how easy it is to add new settings.