Adding a new widget to a UXi layout is quite simple.  However, there are a couple questions you should ask before getting started.

Q: What layout does this page or post use?

A: Find out by looking in any of these three places.

  1. On the Pages or Posts dashboard, the layout for each page or post is listed in the far right column
  2. On the Edit Page or Edit Post dashboard, the layout is displayed at the top right in the Layout Selection option.
  3. When viewing a page or post on the front-end editor, click the top icon in the list to view the layout, as well as edit it's rows or styles.


Q. What other pages / posts use the same layout?

A: The Pages and Posts lists mentioned above are the best tools for comparing page and post layouts.

This is important because when you edit a layout, all other pages or posts that use it will also be updated.

If changes are needed on a layout that's shared by other pages or posts. A new layout should be created.  For more on that, click here.

For this example, the layout used by all blog posts will be edited. As noted above, the changes made to this layout will affect all posts. 

Add a new row. Each widget added needs a row to be displayed in.  First, find the area that the new widget will be added to and add a new row, in many cases, this will be a nested row. Click the icon to add a new row and select how many columns the new row should contain.  In this case, we want the new widget to take up the entire sidebar, so 100% will be selected.

  1. Click the Add Nested Row icon
  2. Add child row to column
  3. Insert new row
  4. Select width
  5. Save

Add the new widget. In the top right corner of the new column, click the icon to add a new widget.  From that list, select the type of widget to add. In this case, a Recent Posts widget will be added form the 'blog' widget category.

  1. Click the + icon to add a new widget
  2. For this example, select the blog widgets
  3. Add Recent Posts widget

Once the widget is placed, click Widget Settings to add the required settings for the widget. Each widget has a different option set.