DEV Community: Jérémy Levron

Register some custom settings in WordPress

Jérémy Levron — Wed, 15 May 2019 07:11:59 +0000

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:

add_settings_section, used to define new settings sections for an admin page ;
add_settings_field, used to define a settings field ;
register_setting, to register settings and data.

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;
    }
}

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',
        )
    );
}

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';
}

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 );
}

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' ) );
}

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

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
}

Array cardio

Jérémy Levron — Mon, 18 Sep 2017 07:28:26 +0000

Array cardio is an expression by Wes Bos, I learn a lot from him. âœŒï¸

In my opinion arrays in JavaScript are the key of the language. So I practice, again and again, to really understand it, and avoid ugly loops when I fetch arrays.

So let's go!

First I created a JSON file with dummy datas inside. We keep it simple, but we already have a lot to play.

[
    {
        "id": 1,
        "title": "Lorem",
        "categories": [ "Adipisicing", "Elit" ]
    },
    {
        "id": 2,    
        "title": "Ipsum",
        "categories": [ "Elit" ]
    },
    {
        "id": 3,
        "title": "Dolor",
        "categories": [ "Maxime", "Animi" ]
    },
    {
        "id": 4,
        "title": "Sit",
        "categories": [ "Minima" ]
    },
    {
        "id": 5,
        "title": "Amet",
        "categories": [ "Culpa" ]
    },
    {
        "id": 7,
        "title": "Architecto",
        "categories": [ "Culpa", "Maxime" ]
    },
    {
        "id": 8,
        "title": "Aliquam"
    },
    {
        "id": 9,
        "title": "Libero",
        "categories": [ "Maxime" , "Elit", "Neque" ]
    }
]

Next I require the file inside my index.js.

let datas = require('./datas.json')

Now, let's play!

`array.push`

First, let's adding a new object to the array with array.push

datas.push(
    { 
        id: 6, 
        title: "Consectetur", 
        categories: [ "Dignissimos" ] 
    }
)

`array.filter`

Now, we are going to filter datas by a given id integer and stock the result in a new array. This way, the original array doesn't change.

array.filter is perfect for this job.

const datasFilteredById = datas.filter((obj) => {
    return obj.id === 5
})

A console.log of datasFilteredById give us

[ { id: 5, title: 'Amet', categories: [ 'Culpa' ] } ]

`array.find`

We are gonna do the same thing but with categories: filter datas by a given category string.

But, where id property is only integer, categories are lists. And in addition categories property maybe doesn't exist.

Let's do this. We return^* if categories property is undefined, if not, we use array.find to return object with the matching category found in categories property.

const datasFilteredByCategory = datas.filter((obj) => {

    if (obj.categories === undefined) return

    return obj.categories.find((category) => {

        return category === 'Maxime';
    })
})

A console.log of datasFilteredByCategory give us

[ 
    { id: 3, title: 'Dolor', categories: [ 'Maxime', 'Animi' ] },
    { id: 7, title: 'Architecto', categories: [ 'Culpa', 'Maxime' ] },
    { id: 9, title: 'Libero', categories: [ 'Maxime', 'Elit', 'Neque' ] } 
]

`array.map`

array.map create a new array by calling a function on every item of a given array.

Here we just retrieve the title property of every objects and storing them into datasTitles.

const datasTitles = datas.map((data, index, array) => { return data.title })

A console.log of datasTitles give us

[ 
    'Lorem',
    'Ipsum', 
    'Dolor', 
    'Sit', 
    'Amet', 
    'Architecto', 
    'Aliquam', 
    'Libero', 
    'Consectetur' 
]

`array.sort`

Let's do the same thing again, but with ids sorted by increasing numbers. This is a job for array.sort. array.sort compares each item in array.

const datasIds = datas
    .map((data, index, array) => { return data.id })

    .sort((a, b) => { return a - b })

A console.log of datasIds give us:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Everything is fine for now.

`array.reduce` and Spread syntax

Finally, the more trickiest in my opinion. We are gonna create a list of each category used by datas.

First we have to check for categories property existence with array.filter.
Then we create an array with all existing categories properties with array.map.
We concat this new array, because it's an array of arrays, with array.reduce and spread syntax from ES6. (To be honest, I'm not sure I fully understand this feature.)
Then we remove duplicates categories with array.filter.

const datasCategories = datas

    .filter((obj) => { 

        return obj.categories !== undefined ? obj : '' 
    })

    .map((data, index, array) => { return data.categories })

    .reduce((a, b) => { return [...a, ...b] })

    .filter((category, index, array) => { 

        return array.indexOf(category) === index 
    })

Sure there is a much simpler way to do this, but it's working. A console.log of datasCategories to confirm it:

[
    'Adipisicing',
    'Elit',
    'Maxime',
    'Animi',
    'Minima',
    'Culpa',
    'Neque',
    'Dignissimos'
]

Maybe I'm doing it wrong, and I would love to have feedbacks, corrections or best practices.

What's your daily routine with arrays? ðŸƒðŸ»”â™€ï¸

^*I don't know how to say that: we return? We escape? We break?

Basic UNIX commands

Jérémy Levron — Tue, 12 Sep 2017 08:26:43 +0000

Lately, I started learning commands lines. I mean, I used npm install or gulp, but no more.

So I started using commands lines and I have to say that I like it. A lot.

I wanted to share with you what I learned.

`cd`

The cd command is used to change the current directory.

cd stand for change directory

cd path/of/directory

To move up by one directory you can hit cd .. Source

`ls`

The ls command list all files of a type other than directory, found in the current directory.

ls stand for list segments

ls

`man`

The man command display the online manual pages. We can specify a section as parameter. The section is normally the command, function or file name.

man stand for manual.

man name_of_command

To exit the manual you can hit q, :q, Q, :Q or ZZ.

`mkdir`

The mkdir command is used to create a new directory. The directory would be create in the current directory.

mkdir stand for make directories.

mkdir name_of_directory

`rmdir`

The rmdir command is used to remove an empty directory.

rmdir stand for remove directories.

rmdir name_of_directory

We can pass an -p option. In this case each directory argument will be treated as a single path and will be removed if they are empty.

rmdir -p name/of/directory

`mv`

The mv command is used to move a file into a given directory.

mv stand for move.

mv name_of_file name/of/directory/destination/

`open`

The open command is used to open a file or a directory

open name_of_file

I know, it's very basic, but you have to start somewhere. ðŸ˜…

I created a Gist where I add what I learn.

And you, what are your favorite commands?

Hi, I'm Jérémy Levron

Jérémy Levron — Fri, 01 Sep 2017 10:22:25 +0000

I code for 5 years now.

You can find me on GitHub as 19h47.

I live in Montpellier, France and work for Le Graphoir.

I mostly develop in HTML, CSS, JavaScript.

I'm currently learning more about Vue.js and HTML5 Canvas.

Nice to meet you.

1px solid black

Jérémy Levron — Fri, 01 Sep 2017 09:13:29 +0000

To remind me the shorthand syntax of the border property, my technique was to think about Metal Gear Solid.

Because, 1px solid black is like Metal Gear Solid, isn't it? ðŸ˜…