How to Add Design Options to a Thesis Skin

Design Options involve things like fonts, colors, and layout settings—stuff that affects the Skin CSS. They present infinite customization possibilities and can make a Skin far more useful and appealing to a broad range of users.

Like Display Options, Design Options must be added in 3 stages:

  1. Declare options
  2. Access user-selected options
  3. Implement selected options

The Thesis Skin API includes a Design Option component for each action listed above:

  1. design() — declare items in the Design Options <form> on the Skin Design page
  2. $design — access user-selected Design Options
  3. css_variables() — using $design settings, modify Skin CSS Variables to change the Skin CSS

Adding Custom CSS or JS to the Design Options Admin

In some cases, you may also need to supply your own CSS or JS to make your Design Options page function as desired. To do this, simply use the init_design_admin() method to enqueue your stylesheets or scripts at precisely the right time.

Overriding Default Design Options Functionality

Attention! Overriding default Design Options functionality is not recommended. The following instructions only exist to show how there are absolutely no limits to what you can create with Thesis.

If you want to add functionality to your Design Options that cannot be achieved through the normal means (maybe you have a crazy new interface idea that you’d like to try…), then you may wish to supply your own admin page.

There are two ways to achieve this:

  • Add the design_admin() method to your Skin and have it echo the output of your Design Options admin page.
  • Add a design_admin parameter to the Skin $functionality property and designate the name of the custom method you’d like to use to output your Design Options admin page.

For clarity, here’s how you can add a design_admin parameter to the $functionality property to output your Design Options admin page from a custom method:

$functionality['design_admin'] = 'my_custom_design_admin';

public function my_custom_design_admin() {
	echo "This is my custom Design Options admin page output.";
}

Important! If you supply your own Design Options admin page, you’ll also need to handle the saving of your design data.

You can also completely turn off automated Design Options functionality by supplying your own design options URL.

This is accomplished by adding a design_url parameter to the Skin $functionality property, but note that you should only do this if you want your Design Options admin page to live outside of Thesis!

$functionality['design_url'] = 'my_custom_design_admin_url';