Skip to content
Noah Mason edited this page Nov 28, 2022 · 41 revisions

Create standardized and deployable WordPress objects like post types with meta boxes and custom fields, taxonomy terms with custom fields, options pages with custom fields and widgets with custom fields; and extend existing WordPress objects like pages, posts, attachments, categories, tags, users and nav menu items.

Installation

This plugin is not hosted on the WordPress plugin directory, so it will have to be installed as a zip file through the WordPress admin dashboard under the plugins tab.

Get the latest version of the zip file

  1. Visit the plugin's GitHub repository.
  2. Find the latest release.
  3. Download the artifact labeled wp-backstage.zip.

Install through the WordPress admin dashboard

  1. From the sidebar navigation, Visit Plugins → Add New.
  2. Click the Upload Plugin button to expose the file uploader.
  3. Click Choose File to open the operating system's file browser.
  4. Find and select the wp-backstage.zip file that was downloaded earlier.
  5. Click Install now
  6. The resulting page will behave differently depending on whether the plugin is being updated, or installed for the first time.
    • Install: Upon successful upload, click Activate Plugin to activate the plugin.
    • Update: Upon successful upload, click Replace current with updated. Then, upon successful update, click Activate Plugin if the plugin is not already active.

Getting Started

Setting up backstage is simple. This can be accomplished using a function, or a class. Using a function will offer the fastest set up. Using a class will offer more organization and robust code, but requires a building the class in a seperate file, and including/initializing it in the functions.php file. See examples of both below.

Initialize using a function

This is the fastest way set up WP Backstage ― Create a function in the functions.php file of the theme, and hook it to the after_setup_theme hook. It is best practice to check if the plugin is available before requiring and initializing. The simplest and most reliable way to do so is to check if the WP_Backstage class exists in scope.

📁 theme/functions.php

if ( class_exists( 'WP_Backstage' ) ) {

	function theme_wp_backstage_init() {
		// Place the configurations here.
	}

	add_action( 'after_setup_theme', 'theme_wp_backstage_init', 10 );
}

Initialize using a class

This is the recommended way to set up WP Backstage ― Create a file at theme/includes/class-theme-wp-backstage.php, Then require the file and initialize the class on the after_setup_theme hook in the functions.php file of the theme.

This method will produce more robust code, and offer better organization and compartmentalization. The nature of class structure also provides access to a constructor that can be used to set up variables that can be reused across configurations (like reading settings, or loading posts/taxonomies and preparing them as options for enumerable fields like selects and radios). This also gives a clean place to attach to the plugin's filters and hooks to do things like modifying the output of a field's column, or hooking the rendering code for a widget or nav menu item.

📁 theme/includes/class-theme-wp-backstage.php

class Theme_WP_Backstage {

	public function __construct() {
		// Construct reusable shared variables here.
	}

	public function init() {
		add_action( 'after_setup_theme', array( $this, 'init_options' ), 10 );
		add_action( 'after_setup_theme', array( $this, 'init_users' ), 10 );
		add_action( 'after_setup_theme', array( $this, 'init_post_types' ), 10 );
		add_action( 'after_setup_theme', array( $this, 'init_taxonomies' ), 10 );
		add_action( 'after_setup_theme', array( $this, 'init_nav_menu_items' ), 10 );
		add_action( 'after_setup_theme', array( $this, 'init_widgets' ), 10 );
	}

	public function init_options() {
		// Place the options configurations here.
	}

	public function init_users() {
		// Place the user configurations here.
	}

	public function init_post_types() {
		// Place the post type configurations here.
	}

	public function init_taxonomies() {
		// Place the taxonomy configurations here.
	}

	public function init_nav_menu_items() {
		// Place the nav menu item configurations here.
	}

	public function init_widgets() {
		// Place the widget configurations here.
	}
}

Require and initialize the class in the functions.php file. It is best practice to check if the plugin is available before requiring and initializing. The simplest and most reliable way to do so is to check if the WP_Backstage class exists in scope. Hook the initialization of the class to the after_setup_theme hook; but because the class will hook its methods to this hook as well (default is priority 10), it is also best practice to hook the initialization of the class at priority 0.

📁 theme/functions.php

if ( class_exists( 'WP_Backstage' ) ) {

	require get_template_directory() . '/includes/class-theme-wp-backstage.php';
	add_action( 'after_setup_theme', array( new Theme_WP_Backstage(), 'init' ), 0 );

}

Component Configurations

WP Backstage can add and modify several components in a WordPress site. Consult the following list for more information on each.

Field Configurations

WP Backstage can render several field types in a WP Backstage component. Consult the following list for more information on each.

  • Text ― Write single line text.
  • Text Area ― Write multi-line text.
  • URL ― Set a valid URL.
  • Email ― Set a valid email address.
  • Telephone ― Set a telephone number or other alpha-numeric value.
  • Number ― Set a numeric value with minimum, maxiumum and step constrictions.
  • Checkbox ― Set a boolean value.
  • Select ― Select a single value from a group of options.
  • Radio ― Select a single value from a group of options.
  • Checkbox Set ― Select multiple values from a group of options.
  • Media ― Select attachments from all uploaded media, and upload new ones.
  • Date ― Set a formatted date with a date picker.
  • Time ― Set a formatted time with a time picker.
  • Color ― Set a formatted color with a color picker.
  • Code ― Write code of multiple languages with syntax highlighting and linting.
  • Editor ― Write rich content with a WordPress TinyMCE WYSIWYG Editor.
  • Address ― Set a formatted address with address lines, city, region, zip, and country.
  • Select Posts ― Select a post of any post type.
  • Select Users ― Select a user.

Declare Theme Support

A theme can declare support for WP Backstage. This provides a place to enable feature flags for the plugin. The first parameter must be set to wp-backstage while the second parameter is an array of arguments.

add_theme_support( 'wp-backstage', array() );

Theme Support Arguments

  • tests-enabled bool ― Whether the bundled test configuration is enabled or not.

Plugin Dependencies

As of 3.7.0

As of 3.7.0, No plugin dependencies are required.

Prior to 3.7.0

Prior to 3.7.0, the plugin requires that the Gutenberg Editor be disabled. To accomplish this in the cleanest possible way, two plugins should be installed.