Layouts and Views

From IThemes Codex
Revision as of 06:52, February 26, 2013 by Sridhar (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

My Theme -> Layouts and Views

Layout Manager

Go to My Theme -> Layouts and Views to access the Layout Manager.

Screenshot of default layouts in Builder:

Manage-layouts-and-views-default.png

A layout is an arrangement of modules. Think of modules as building blocks for the layout. Builder comes with 9 layouts by default. You can create any number of layouts from scratch or duplicate existing ones and apply layouts to individual pages, individual posts, front page, blog page, archives view, tag view etc.

You may want to follow these steps:

  1. Pick a layout that's closest to how you want your site to be and create its duplicate.
    • Right Sidebar is typically what you would want to start off with. Place the mouse cursor on Right Sidebar and the link to Duplicate it will be visible. Click on it, provide a new name (say, Main) and click Create Layout.
  2. Set your new layout as the default. Place the mouse cursor next to the new layout you just created under the Default Layout column and Set as default link will appear. Click on it.

Now your 'Main' layout is ready to be customized. Click on its name to edit the modules that make up this layout.

Modules-in-a-layout.png

Do not forget to save the layout when you are done editing it.

These are the different types of modules:

Header Module

To be added

Navigation Module

Screenshot of pages and categories navigation bar modules - Click to expand

A Navigation bar module can be one of these four types:

  • Builder Settings Pages
  • Builder Settings Categories
  • WordPress Pages
  • Custom Menu

Builder Settings Pages

This module shows the page titles as menu items. Only those page titles will be shown in the navigation bar that have been ticked in the Menu Builder section at My Theme -> Settings. Child pages are displayed as sub menus. The default menu item in this type of navigation module is Home that links to your site's front page.

The order of pages in the menu can be changed by setting page Order for the pages (either in the page editor screen or at Pages -> Edit -> Quick Edit). A page with lower order number will be shown first (left) compared to a page with higher order.

Builder Settings Categories

This module shows the category titles as menu items. Only those category titles will be shown in the navigation bar that have been ticked in the Menu Builder section at My Theme -> Settings. Child categories are displayed as sub menus.

The order of categories in the menu can be changed by using Category Order plugin.

WordPress Pages

This module uses the output of wp_list_pages function. Child pages are displayed as sub menus.

The order of pages in the menu can be changed by setting page Order for the pages (either in the page editor screen or at Pages -> Edit -> Quick Edit). A page with lower order number will be shown first (left) compared to a page with higher order.

Custom Menu

This module uses custom menu that is created at Appearance -> Menus.

Image Module

Image module is typically used to display header images.

In the module's settings, we can upload an image, let the height be automatic or set its height manually, specify Link URL and whether or not the linked URL should open in a new window (default is to open in the same window). We can also specify any of these for sidebars:

  • No Sidebars (default)
  • 1 Left
  • 2 Left
  • 1 Right
  • 2 Right
  • Split (1 Left & 1 Right)

Builder-image-module.png

Screenshot of an image uploaded via image module - Click to expand

Note:

  1. To avoid resizing of the image after upload, ensure that width of image is exactly equal to Layout width minus the total width of sidebar(s) (if any). Also ensure that the height of the image is the same as the height value specified in the module's setting.
  2. If the uploaded image is not appearing on the site, make sure that uploads folder is set to wp-content/uploads at Settings -> Miscellaneous. If the issue continues, ensure that GD image library is present in your hosting environment.

Tip: A HTML module or widget bar module will give you better control if you want to use a sidebar.

Widget Bar Module

HTML Module

Content Module

The actual Page/Post etc. content will be shown inside the content module. Therefore, ensure that default layout in your site has the content module. A layout can and will have only 1 content module.

Content-module.png

Content module can have

  • No Sidebars
  • 1 Left
  • 2 Left
  • 1 Right
  • 2 Right
  • Split (1 Left & 1 Right)

sidebar(s).

When entering custom width(s) for the sidebar(s) ensure that "px" is not present next to the value.

Footer Module

A layout can and will only have 1 footer module.

Footer-module.png

Like other modules, footer module can have

  • No Sidebars (default)
  • 1 Left
  • 2 Left
  • 1 Right
  • 2 Right
  • Split (1 Left & 1 Right)

sidebar(s).

To learn how to edit the content of footer, follow this.

Applying Layouts to Specific posts/Pages

A layout can be applied to any post or Page while that post or Page is being added/edited.

Selecting-a-layout.png

Note: When Front page is set to display a static Page at Settings -> Reading, a layout applied to Home will not get applied. Same is the case with Posts page. In this case, views must be used.

Views

The power of Builder (layouts) can selectively be applied to specific sections of your WordPress site called Views.

Apply Layouts to Specific Views

To apply layouts to specific views, go to Layout Editor (My Theme -> Layouts & Views) and click on Views tab. Then click Add View button.

AddViewDialog1.png

These are the available views:

  1. 404: This view represents (web)pages (controlled by 404.php) that come up when a non-existent (in your site) URL is accessed.
  2. Archives: This view represents pages (controlled by archive.php) that come up when a archive link is clicked. Examples of archive pages (these are listing pages, i.e., having multiple posts rather than a single entry) are: Category pages, Author pages, Tag pages, Date archive pages.
  3. Attachment: This view represents pages (controlled by attachment.php) that come up when any attachment (files like images that can be seen in WordPress Media Library ) is viewed.
  4. Author: This view represents pages that come up when link to a author is clicked.
  5. Blog: This option appears only when a Page has been set as Posts page at Settings -> Reading i.e., when a static page is set to appear on Front page. This view represents the Posts page (Example: /blog or /news) which uses index.php (unless an extension is used in which case, extension's functions.php will be used)
  6. Category: When this view is selected, another dropdown named "Category" appears from which a category can be selected to which the layout should be applied. This view represents any page that lists posts belonging to a particular category. Category-view-expanded.png
  7. Date Archive: This view represents the date-based archives list pages (controlled by date.php).
  8. Home: This view represents the front page.
  9. Page: This view represents a Page.
  10. Post: This view represents a Post.
  11. Post Type - Widget Content: This view represents a single entry of "Widget Content" custom post type. Widget Content comes by default in Builder. Each custom post type (Ex.: Projects in Covell child theme) will automatically appear in the View selection dropdown.
  12. Search: This view represents the search results page (controlled by search.php)
  13. Singular: This view represents Any post, page, or attachment. Post, Page, Attachment views if present will take precedence over this.
  14. Tag: This view represents that page that comes up when a tag is clicked.
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox