add support (store) for getting wordPress settings by default

[syntaxlexx]

It would be really nice if the theme shipped with a store for storing WordPress settings out-of-the-box (plus the preferred logo set in the customizer).

ref: developer.wordpress.org/rest-api/reference/settings

[Tes3awy]

To add a logo to the customize > Site Identity, you should place this snippet in your functions.php file or install Code Snippets plugin and create a new snippet for it.

add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
    'header-text' => array( 'site-title', 'site-description' ),
) );

Regarding you mentioning store, I am afriad I don't understand very well. Can you please elaborate? Thank you.

[EvanAgee]

@lexxyungcarter I've considered adding support for a few of the WordPress settings via vuex but I've not had the time. If you're interested in opening a PR I would absolutely welcome it!

[patgas]

Correct me if I'm wrong but it seems impossible to fetch the logo with REST API, because of authorization. You want to serve the logo even to unauthorized users so Vue can't access the /settings endpoint. My workaround was to create a normal admin-ajax hook using the functions.php and accessing it via axios POST call.

It's certainly not the best of coding, but it works :)

To get it working properly I recommend watching Evan's Menu video to get a better understanding of how to hook this up to your header :)

Function:

function fetchlogo() {
    if ( function_exists( 'get_custom_logo' ) ) {
        $logo = get_theme_mod( 'custom_logo' );
        $image = wp_get_attachment_image_src( $logo , 'full' );
        $image_url = $image[0];     
        $data = array(
            'url' => $image_url
        );
        echo json_encode($data);
        wp_die();
     }
}

add_action('wp_ajax_fetchlogo', 'fetchlogo');

Vue:

fetchLogo() {
      var params = new URLSearchParams();
      params.append('action', 'fetchlogo');
      axios
        .post("/wp-admin/admin-ajax.php", params)
        .then(response => {
          this.logo = response.data.url;
        })
        .catch(error => console.log("not working"));
    }