[SOLVED] Admin theme customizer

Continuing the discussion from Admin theme customizer:


I know this is an old post but I’m ran into the same issue and figured this may help someone else.

ERROR MESSAGE:
Class 'Roots\Sage\Customizer\WP_Customize_Color_Control' not found in

The class WP_Customize_Color_Control needs to be instantiated as a global class and not within the Roots\Sage\Customizer namespace.

Solved by adding backslash wherever a WordPress class is declared, like so:

\WP_Customize_Color_Control

Adding the backslash before the WP_Customize_Color_Control class will declare it a global class, as opposed to a class within the Roots\Sage\Customizer namespace.




1 Like

Only because sometimes it takes a little more explanation for me, this was very helpful but wasn’t QUITE sure if I was doing it right.

When you are instantiating a new class for the customizer be it color or image or any of the others you need to create a new class for a sample of the code would be like so using @deschet’s solution:

$wp_customize->add_control( new \WP_Customize_Image_Control($wp_customize, 'image_control', array(
      'label'    => __('Upload Your Main Logo', 'code_label'),
      'section'  => 'logo',
      'mime_type' => 'image',
  )));

This was an example from me creating a spot to upload a logo but should hopefully clear up any other questions in regards to $wp_customize and creating new control classes within Sage. Or when using namespaces in general, I suppose.

1 Like

In the same vein, this is how I added an option for a logo and a maximum width for it:

// lib/customizer.php
$wp_customize->add_setting('upload_logo');

  $wp_customize->add_control(
    new \WP_Customize_Image_Control(
      $wp_customize,
      'upload_logo',
      array(
        'label' => 'Logo',
        'section' => 'title_tagline',
        'settings' => 'upload_logo',
        'transport' => 'postMessage'
      )
    )
  );

  $wp_customize->add_setting(
    'upload_logo_width',
    array(
      'default' => '',
      'sanitize_callback' => 'sanitize_text_field'
    )
  );

  $wp_customize->add_control(
    'upload_logo_width',
    array(
      'label' => 'Logo Max Width',
      'section' => 'title_tagline',
      'settings' => 'upload_logo_width',
      'transport' => 'postMessage'
    )
  );

which appears in the Site identity panel:

I’ve uploaded a gist with the full code I used, including the JavaScript for live-updating the preview and some code that prints these options as <style> tags into the head.

Please note that it’s a very basic way of doing things (it was the first time I’d used the customizer) and is just meant to serve as a simple example for piecing all the bits together.

It should probably:

a) be refactored
b) not be shared, but I’ve had a few beers now and I’m enjoying feeling like I’m being helpful :watermelon:

1 Like

In the same vein of the same vein… :slight_smile:

I’ve been using the newish Theme Logo feature that was added in as of 4.5.

Add theme support in setup.php


  add_theme_support('custom-logo', [
    // whatever settings
    'height' => 150,
    'width' => 150,
    'flex-width' => true,
  ]);

Then, I found the default function wraps the logo in its own markup that I don’t really want. It has a hook to filter the output, but I just ended up doing this -

In extras.php:

function site_brand() {

  // default to the blog name, in case no logo is set
  $output = get_bloginfo( 'name' );

  if ( has_custom_logo() ) {

    // get the url for the image
    $logo_url = wp_get_attachment_url(get_theme_mod( 'custom_logo' ));

    // wrap in image tag, save as string
    $logo   = '<img src="' . $logo_url . '">';

    // optional, hide the site name, screen reader friendly
    $output = '<span class="sr-only">' . get_bloginfo( 'name' ) . '</span>';

    // stick them together
    $output .= $logo;

  }

  return $output;

}

Then I call it in header.php (or wherever) like this -

<?php use Roots\Sage\Extras; ?>

  // stuff

  <a class="navbar-brand" href="<?= esc_url(home_url('/')); ?>">
    <?= Extras\site_brand(); ?>
  </a>


Also probably needs refactoring. :slight_smile:

5 Likes