Documentation › Using Shared Layouts

Using Shared Layouts

also known as: a reusable layout

A shared layout is a layout outside the layout hierarchy that you can assign to any individual layouts. Unlike with cloning, once you assign a shared layout to a layout, that layout can’t be customized directly. Use a shared layout when you want to lock particular layouts down and not allow customizations to any one of them separately.

Changes to a shared layout apply to all layouts using that shared layout. Further, due to layout inheritance, any un-customized children of a layout that has a shared layout assigned will also inherit the shared layout.

In addition to being assigned to a layout in Grid Mode, shared layouts can also be assigned to individual posts and pages in the WordPress admin panel.

Once you have assigned a shared layout to a layout, to customize that layout without changing the shared layout, you will need to disconnect the shared layout from it. If you disconnect the shared layout, any prior customizations to the layout are restored.

Example: Imagine you want your Single and Archive layouts to look different from the Blog Index, and you want them to have the same design as each other. If you had no other options, you would have to customize each of these two layouts. But chances are, you may not get every detail the same between the two. Cloning could help—you could customize the Single layout and then clone it in the Archive layout.

But later, what if you decide to make a change to the layout? You will need to make the changes to the Single layout and clone them (or try to replicate them) in the Archive layout.

Shared layouts simplify this process by providing you one place to make changes and have them apply to multiple layouts across your site. In this example, you would create a shared layout (let’s call it Layout X) and apply it to both Single and Archive. You could assign Layout X to any other layout you wanted to use this same layout. Any changes you make to Layout X later will immediately appear in all of the layouts using it.

The following illustration shows how shared layouts work with layout inheritance:

Creating a Shared Layout

  1. In Grid Mode, click the layout selector, and then click Shared Layouts.
  2. Type a short but descriptive label for the new shared layout in the Shared Layout Name field.
  3. Click Add Shared Layout.
  4. Mouse over the new shared layout’s name, and then click Edit.
  5. Clone an existing layout using the Grid Wizard, or close the wizard and design a layout from scratch. In general, you customize a shared layout the same way you customize any layout.

Applying a Shared Layout

For a layout you haven’t previously customized:

  1. Click the layout selector.
  2. Mouse over the name of the layout, and then click Edit. The Grid Wizard opens.
  3. Click Use Shared Layout.
  4. Select the shared layout you want to apply, and then click Assign Layout →.

For a layout you have already customized:

  1. Click the layout selector, mouse over the layout, and then click Edit.
  2. Click Shared Layout at the top of the layout selector.
  3. Mouse over the shared layout’s name, and then click Use Layout.

Note: Assigning a shared layout to a customized layout does not delete your customizations. However, your customizations are ignored while the shared layout is assigned.

Shared layouts can also be applied directly to specific posts and pages from within WordPress. On the post or page editor screen, select a shared layout in the Shared Layout meta box (shown below).

Once you assign a shared layout to a layout, that layout can’t be customized. To customize the layout, you will need to disconnect the sharedlayout from it. If you disconnect the shared layout, your previous customizations to the layout are restored.

Disconnecting a Shared Layout from a Layout

In the layout selector, mouse over the layout’s name, and then click Remove Shared Layout.

Deleting a Shared Layout

  1. Click the layout selector.
  2. Click Shared Layouts at the top of the layout selector.
  3. Mouse over the name of the shared layout you want to delete, and then click the X next to the name.
  4. Click OK to confirm that you want to delete the shared layout.
  5. For each layout that used the shared layout, disconnect the shared layout or assign a new one.

Renaming a Shared Layout

  1. Click the layout selector.
  2. Click Shared Layouts at the top of the layout selector
  3. Mouse over the name of the layout, and then click Edit. The layout opens to edit.
  4. Go back up to the Layout Selector and the buttons to the right of the Shared Layout name become “Rename”.
  5. Click Rename and a pop-up appears letting you rename the Shared Layout

This article was last updated for Headway version 3.8.3.

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress