DEV Community

Cover image for Register some custom settings in WordPress
Jérémy Levron
Jérémy Levron

Posted on • Updated on

Register some custom settings in WordPress

Lately I played a lot with WPGraphQL a plugin that enables a GraphQL API for WordPress.
And I needed to retrieve links to social networks in my app.

Historically I would have done that with the Customizer API, but WPGraphQL doesn't expose for the moment this data.

So, thanks to the WPGraphQL doc, an another idea came to me: used the Settings API. WPGraphQL exposes all core settings in the WPGraphQL Schema.

So I thought that documented could be useful to anyone, even outside WPGraphQL ecosystem.

Settings API

Three functions are essential to accomplish what you want:

Settings class

We are going to write a PHP class named Settings:

class Settings {
    /**
     * The theme name
     */
    protected $theme_name;

    /**
     * The theme version
     */
    protected $theme_version;

    /**
     * The constructor
     */
    public function __construct( $theme_name, $theme_version ) {
        $this->theme_name    = $theme_name;
        $this->theme_version = $theme_version;
    }
}
Enter fullscreen mode Exit fullscreen mode

This class will be instantiated in the functions.php of our theme (or plugin).

Settings API init method

So we are going to write a method for our Settings class to add settings:

public function settings_api_init() {
    add_settings_section(
        'socials',
        'Socials',
        // In class context pass an array with $this and the method name
        // to retrieve callback function.
        array( $this, 'socials_callback_function' ),
        // Our Socials setting will be set under the General tab.
        'general'
    );

    add_settings_field(
        'twitter',
        'Twitter',
        array( $this, 'setting_callback_function' ),
        'general',
        // Display this setting under our newly declared section right
        // above.
        'socials',
        // Extra arguments used in callback function.
        array(
            'name'  => 'twitter',
            'label' => 'Twitter',
        )
    );
}

Enter fullscreen mode Exit fullscreen mode

Callback method

add_settings_section and add_settings_field take a callback function, socials_callback_function and setting_callback_function respectively, add them to our class:

public function socials_callback_function() {
    echo '<p>Socials urls</p>';
}

public function setting_callback_function( $args ) {
    // Ugly, I know 😔.
    echo '<input name="' . esc_attr( $args['name'] ) . '" type="text" value="' . esc_attr( get_option( $args['name'] ) ) . '" class="regular-text code" placeholder="' . esc_attr( $args['label'] ) . ' URL" />'; 
    echo ' ' . esc_attr( $args['label'] ) . ' URL';
}

Enter fullscreen mode Exit fullscreen mode

Register settings method

Next, we are going to register this settings, so WordPress can handle this:

public function register_settings() {
    $args = array(
        'type'              => 'string',
        'sanitize_callback' => 'sanitize_text_field',
        'default'           => null,
        // Extra argument for WPGraphQL.
        'show_in_graphql'   => true,
        'show_in_rest'      => true,
     );

     register_setting( 'general', 'twitter', $args );
}
Enter fullscreen mode Exit fullscreen mode

Constructor

Finally in our constructor, we can attach this methods to the class in appropriate hook:


public function __construct( $theme_name, $theme_version ) {
    $this->theme_name    = $theme_name;
    $this->theme_version = $theme_version;

    add_action( 'admin_init', array( $this, 'settings_api_init' ) );
    // We hook into init and not admin_init to make front aware of this
    // settings.
    add_action( 'init', array( $this, 'register_settings' ) );
}

Enter fullscreen mode Exit fullscreen mode

Now, we can instantiate our Settings class in functions.php and retrieve our settings in the general setting page.

WordPress custom settings

Cool right? And without any plugin. 😎

Conclusion

Of course, we can go further, used other type of input, display a selection of pages, display some checkboxes. We can do whatever we want!

Feel free to correct me if you see any typo or ask if you have any questions.


To retrieve the entire class, follow this link

Bonus WPGraphQL

Now that our settings are register, under the generalSettings entry, we will find our parameters:


generalSettings {
    twitter
}

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
jasonbahl profile image
Jason Bahl

Good write up!

Would love to see an example of querying the setting with GraphQL now that it's been registered.

Collapse
 
19h47 profile image
Jérémy Levron

I just add a bonus to show where we can found our settings (and thank you for WPGrapQL, it's a piece of cake) 🙏🏼