Creating & Managing Components

Components are their own kind of content in WordPress, with their own admin screen and their
own builder sessions. This article covers making one, editing it, and looking after the ones
you already have. For what a component is and where instances can go, see the
Components Overview.

Creating a component

There are two ways to make one: start from an empty component in the admin, or turn
something you have already built into a component from the builder.

From the WordPress admin

Go to Oxygen → Components and click Add Component. Give it a title and click
Add Component in the dialog.

The new component appears at the top of the list. Hover its row and click Edit in Oxygen
to build its layout.

From something you've already built

If the layout already exists on a page, you don't have to rebuild it. Select the element on
the canvas, right-click it, and choose Save as Component.

Name it and click Save.

The original element is replaced by an instance of the new component — the element chip now
reads (component) and the properties panel becomes the Component panel. The component is
available site-wide from this point on.

Editing a component

There are two ways in, and they put you in visibly different places.

Inline, right where it's used. Select an instance and click Edit Component, or
double-click the component on the canvas. The component's elements become editable in place,
the rest of the page dims, the toolbar's document chooser turns green and shows the component's
name, and Edit Component becomes Stop Editing.

Click Stop Editing or double-click outside the component to leave.

In its own builder session. Open it from Oxygen → Components, or click the

button to the right of Edit Component on any instance. The component opens on its own,
with no page around it.

Either way, saved changes apply to the component itself, so every instance everywhere
updates. Inline edits are written to the component the moment you stop editing — you do not
have to save the page you were on.

Inline editing works one level deep. To edit a component nested inside the one you're
editing, open that one in its own builder session.

The component editing canvas

While editing a component in its own session, the toolbar gains two component-specific
controls.

Constrain Preview Size sets the canvas Dimensions (width × height), a Background
Color, and Vertically Center, for a comfortable editing view of a component that will
never fill a full page. The toolbar button shows the current size once you set one. These
settings only affect the editing canvas, never the live site.

Preview page chooses which real content the canvas uses to resolve dynamic data while you
edit. Any page or post on the site can stand in.

See Dynamic Data & Loops for what
that content is used for.

Managing components

Oxygen → Components lists every component with its title and ID. Hover a row for its
actions:

• Edit in Oxygen — opens it in the builder.
• Settings — renames it.
• Duplicate — copies it, layout and all.
• Trash — moves it to the trash.

Settings opens a single Title field. It has a Save button and no cancel — press
Esc to close it without renaming.

A Trash view appears at the top right whenever the trash isn't empty. Each row there has
Restore and Delete permanently, and the view has an Empty Trash button.

Using a component outside Oxygen

Each row on the admin screen also shows a shortcode — — that
renders the component anywhere shortcodes work, such as content built outside Oxygen.

Tips