xScape Templates Layout, Part 1: Overview

For the most part, xScape templates are based on normal WordPress structure. But, to make customization and working with different blocks easier, page layout is broken into smaller elements that can be controlled through Layout Manager for each templates individually.

xScape Template Layout
xScape Template Layout

Image on the right shows blocks in the xScape template layout. Some blocks are required and are always present on the page, while others can be disabled on some templates or moved, like in case of the sidebars.

Basics

In the core of the template display is the CSS framework: Blueprint. All elements on the page are arranged using Blueprint, and changes in the layouts positions are recalculated to fit the Blueprint grid. Themes use different Blueprint grid layouts, with different number of columns, column widths and gutter space. Framework takes out the job of calculating sizes, and that’s why you can use layout manager to change width of sidebars for individual templates.

To make managing templates and content in them easier, xScape doesn’t have templates like normal WP themes have. Normal WP template has all code needed in every file: function to load header, sidebars, loops… Changing something in the theme design can be a problem when you need to change all templates. But, with xScape there is one main loader file that generates page layout depending on your layout settings. Still, xScape uses same template files (by name only) as normal WP theme. So, for archives WP needs archive.php template. In xScape that file is there, but its empty: there are only couple of lines to load xScape.

Main Blocks

As you can see on the image, theme can have minimum 3 blocks (Main Header, Content, Footer). Some themes have 9 or 10. All blocks behave the same, except for the content. So, each block has own file in the theme templates folder. For sidebars and footer widgets, theme has set of widgets prepared so that when the sidebar is active but has no widgets, xScape will display default ones.

Having independent templates allows you to set each block differently on each template, so you have have no sidebars on some pages, or you can have slider only on front (if theme has it), or you can display different widgets in sidebar area on different pages.

Content Area

Main element of each page is content. Content depends on the page: single post, archive, error page, search. They all have own templates, but the only different thing about them is actually content area. So, xScape uses blocks approach, and loads different content files for different templates. By default, each theme has standard content files for each template. For some there are 2 content files to choose from.But, if that is not enough, you can have own content files. Best thing is that you can choose templates files from layout manager, both standard or custom.

Dev4Press website uses lightScape theme, and has about 20 custom content area templates used for user pages, plugin and themes pages, and all is still controlled through the Layout Manager.

Benefits

Why this approach is better than normal template? Well, you need to take care only about the main page content. Sidebars, widgets, footer, header is handled by the framework. Working with content is easier and allows powerful customizations framework allow and still how any content you want.

Next tutorials

Next tutorial will be about using filters to modify templates loading. Filters are used for bbPress module integration to use templates for content that are not standard ones. After that, I will explain creation of custom content templates and few other things.

Comments

Leave a Reply