Dynamic Layouts

Evenflow is packed with numerous layout possibilities allowing you to create multi-column layouts for categories, pages, single entries, and archives.

By editing a single snippet, you can change the sidebar position (left, right) or display a wide page with no sidebars. You can also define the width of each column without editing any HTML or CSS! No matter which layout you choose, all content is source ordered for maximum SEO:.

  1. Navigation
  2. Content
  3. Sidebar
  4. Footer

Layout Presets

Create Your Own Layouts

You probably already know this, but simply copying a template file allows you to completely customize your layouts specific to category, post, and page, etc. Evenflow makes it very simple to create a complete custom layout in just seconds. At the very top of each template file there’s a snippet that looks like this:

get_header();
// DEFINE PAGE LAYOUT STYLE
// OPTIONS: "l" = left sidebar | "r" = right sidebar | "w"" = wide (no sidebar)
$colstyle = l;

// Column Grid Width
$contentgrid = 17; // Main Content Grid Width
$sidebargrid = 7; //  Sidebar Grid Width
// Total must be 24 (24 col. 960 Grid)

// Override Theme Image settings. Leave empty for no change
$imgheight = 150;
$imgwidth = 150;

Explanation of the code above

  • Line #1 – getheader();
    • loads header.php
  • Line #4 – $colstyle
    • specifies where to show the sidebar – to the left (l) or right (r). You can also set the parameter to (w) for a wide page with no sidebars.
  • Line #7 – $contentgrid
    • specifies the grid width of the main content area (contentgrid + sidebargrid must = 24)
  • Line #8 – $sidebargrid
    • specifies the grid width of the sidebar (contentgrid + sidebargrid must = 24)
  • Line #12 – $imgheight
    • overrides the global settings for the post image height. Defaults can be set in the theme options panel.
  • Line #13 – $imgwidth
    • overrides the global settings for the post image width. Defaults can be set in the theme options panel.

Creating Custom Category Templates

The settings above explain how you can completely customize the layout of a specific template. To do this for a specific category, you only need to duplicate the (category.php) file and rename it using one of the conventions listed below.

  • By Category Slug: category-slug.php
  • By Category ID: category-ID.php

Creating Custom Single Post Templates

Suppose you wanted to do the same for single page entries of a particular category. You can achieve this the same way:

  • By Category Slug: single-slug.php
  • By Category ID: single-ID.php
If you want to create a reusable template, or if you run into issues with posts that live in multiple categories, we recommend the Single Post Template Plugin. This plugin adds a nice drop-down template chooser to the WP admin interface much like the Page Templates selector.

Creating Custom Page Templates

Page templates can be set within the WordPress write panel. For example, to create a right-column layout template you would duplicate the default page.php and name it with something easy to recognize e.g. page-right.php. At the very top of the page-right.php add a reference name like so:

/*
Template Name: Right Column Page
*/

As mentioned above, to change to the right sidebar, just edit the params.

// DEFINE PAGE LAYOUT STYLE
// OPTIONS: "l" = left sidebar | "r" = right sidebar | "w"" = wide (no sidebar)
$colstyle = r;

Now when you go to Pages > Add New, you will see a Template drop down with the option of “Right Column Page” in the drop-down selector. Assign the right column page template to any article to inherit the layout of this file.

ad