I installed Woo360 Themer, now what?

Let's take a quick tour of Woo360 Themer. If you're still not clear on where it works, there are examples plus screenshots in this article.

What can I build with Woo360 Themer?

The Woo360 Themer plugin is an add-on to the Woo360 plugin. Woo360 Themer lets you use Woo360 to create layouts for the areas of a page or post that are normally controlled by the theme, plus a couple other layouts that you can't create directly in WordPress. This includes the following areas:

  • Headers and footers
  • Post title, post info, featured image, comments, sidebar (in other words, everything but post content) on single post pages.
  • Index and archive pages that display a list of blog posts or organize lists of posts by specific categories, tags, authors, etc.d
  • Inserts such as banners into specific parts of the page, such as before the header, after the header, before the content.
  • The page displayed after a 404 error.

For more information about theme-controlled areas, see the Primer on WordPress content and theme areas in the Related Articles. For some screenshots and descriptions of Themer layouts, see the Woo360 introductory article.

Which themes does Woo360 Themer support?

See the Related Article below for which themes are supported. If your theme isn't currently supported, see the Related Articles on how to add support to your theme for Header, Footer, and Part layouts in Woo360 Themer.

Where do I find Woo360 Themer after I install it?

Woo360 Themer has been integrated with the Woo360 plugin, and you'll see it mainly in two places in the UI, as described in the following sections.

1 Woo360 menu in the WordPress admin panel

There's a Woo360 admin panel nested in the WordPress admin panel, and when you install Woo360 Themer, a new submenu appears called Themer layouts, as shown in the following screenshot.

Tip: Can't see Woo360 in your WordPress admin panel? See the article about how to enable it.

2 Identify and edit Themer layouts from the WordPress admin bar

You'll also see Woo360 Themer options in the WordPress admin bar at the top of the screen when you're logged in:

2a New menu

The New menu has a Themer layout selection, as shown in this screenshot.

2b Edit Themer Layout /Woo360 in the admin bar

When you're viewing the front end of the site (with admin page spider installed and activated), you'll see options to edit the Themer layout's settings or to open Woo360 to modify the Themer layout itself.

If there's already a Woo360 layout on the page you're viewing, Woo360 will appear with a green dot next to it in the WordPress admin bar. If the dot is gray or white, it means there's currently no Woo360 layout.

If you're viewing a regular page and mouse over the Woo360 link, you'll see options to edit the page itself or any of the Themer layouts that apply to that page. ;For example, in the following screenshot you can choose to open either the page that you're viewing in Woo360, or the Header-type Themer layout called "Sneak Peek home page," which is controlling the header on that page.

3 Module field connections

When you open a module for editing in a Themer layout, you'll notice a plus sign next to some of the setting fields, as you can see in the following screenshot.

These plus signs indicate that you can set field connections to eligible data from another area of your site. If you click the plus icon, a list of eligible connections is displayed. For example, the Heading field in the Heading module has a number of eligible field connections. The following screenshot shows just a portion of the list.

When you mouse over a field connection, you'll see a choice of Connect or Insert

When you choose Connect, the field connection you choose becomes the field value for the item you're selecting it for ‚Äì in this case, the Heading field. 

If you choose Insert, the text value of the field connection is inserted as a shortcode, which means you can mix it with other text or shortcode you enter in the field. See the Related Articles for more information about field connections and field connection shortcodes.

Woo360 layouts in Woo360 Themer vs. Post content area

As mentioned, Woo360 Themer lets you create layouts that apply outside the content area of a page or post. In particular, Singular layouts apply to post titles, post info, the featured image, and so on, but not to the post content area.

It's important to note that if you apply Singular-type layouts for single posts, you can no longer use Woo360 to create layouts inside the post content area, and vice versa. For example, here's a single post as viewed outside of Woo360. In the WordPress admin bar you can see that the button following Woo360 is white, indicating that the post layout doesn't have a Woo360 layout. The submenu also indicates that there's a Header-type Themer layout and a Singular-type Themer layout applied to this page. If you click the Post to open this single post in Woo360, you'll get a warning that if you do choose to open Woo360 to create a layout in the post content area, the Themer layout will no longer apply to this post.

Got it. What's next?

Try out the quick tutorial in the Related Articles below on designing a header layout.

There are a number of Vimeo videos to show how powerful and easy Woo360 Themer is to use and give you some creative ideas.

If you're a developer, have a look at the articles on how to customize field connections and field settings forms and how to add headers, footers, and parts to other themes.