Template architecture

Before we get to the core structure of the WordPress page architecture, you need to understand that WordPress uses template files to generate the final page “look” and content. The core structure of a WordPress site represents the main containers which hold the page’s content.

The core structure of WordPress site features, at a minimum, are:

• Header
• Sidebar/Menu
• Content
• Footer

WordPress template hierarchy

WordPress Templates fit together like the pieces of a puzzle to generate the web pages on your WordPress site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific
conditions.

Read more about which template file(s) will WordPress use when it displays a certain type of page.

MotoPress template architecture

MotoPress plugin completely follows the concept of WordPress template hierarchy and brings new core elements to implement the drag and drop functionality.

New layout blocks were added to WordPress template architecture, they are:

• Wrapper is a container for other blocks
• Custom code is a holder of common elements of the design such as logo, website title, footer text etc. or any other design elements that can be common for several pages
• Content block is used to display posts, static page content or any other content on the page
• Sidebar block is a holder of WordPress sidebar

The diagram below shows the template’s architecture with new logical blocks.

MotoPress files hierarchy

The following diagram shows MotoPress files hierarchy.

To include files use WordPress get_template_part function, for example:

<?php get_template_part("loop/index"); ?>

This function loads a template’s part into a template. Makes it easy for a theme to reuse sections of the code and an easy way for child themes to replace sections of their parent theme.

Child theme compatibility

MotoPress plugin supports WordPress child themes functionality. If WordPress theme was built as a child theme and supports MotoPress plugin next files will be copied to child theme after the theme activation:

1. theme templates

2. wrappers

3. custom blocks

MotoPress core components

MotoPress core components were designed to bring the drag and drop feature to WordPress theme, simplify layout editing and expand theme functionality.

Wrapper

Wrappers is a container for other blocks. There are three basic wrappers: header, content and footer. Header and footer wrappers were included to a template as files while content wrapper is an internal pattern.

To include the wrapper to a template use WordPress function get_template_part. Parent HTML element should have the following attributes:

css class

according to the grid system span1..span12

data-motopress-wrapper-file

link to a wrapper file, the same as the parameter of get_template_part function
(for a content wrapper it is a template’s file name)

data-motopress-wrapper-type

with the value

• header for header wrappers
• content for the internal content wrapper
• footer for footer wrappers

Example:

<div class="span12" data-motopress-wrapper-file="wrapper/wrapper-header.php" data-motopress-wrapper-type="header">
	<?php get_template_part("wrapper/wrapper-header"); ?>
</div>

Wrapper file should contain a wrapper name. A wrapper name is used to be displayed in a plugin interface.

<?php
/**
* Wrapper Name: Content blog
*/
?>
<div>...</div>

Header and footer wrappers were designed as common blocks of pages, as in real design header and footer usually are the same on each page. MotoPress plugin supports the ability to have several headers and footers. To add a new header or footer to a template, create a new file with the name for example “wrapper-header-1.php” or “wrapper-header-white.php”.

Custom Code

Custom Code block is a holder of common design elements such as logo, website title, footer text etc. or other design elements that can be common for several pages. Custom Code block contains raw html or php code.
To include the Custom Code block in a wrapper use WordPress function get_template_part. Parent HTML element should have the following attributes:

css class

according to the grid the system span1..span12

data-motopress-static-file

link to a custom code file, the same as the parameter of get_template_part function

data-motopress-type

with the value static

Example:

<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
	<?php get_template_part("static/static-logo"); ?>
</div>

Custom Code block can contain WordPress shortcodes placed in WordPress function do_shortcode, for example:

[php] echo do_shortcode('[short_code_here]'); [/php]

Content block (loop file)

Content block is used to display posts, static page content or any other content on the page. Content block uses WordPress loop file.
Example of the basic loop file:

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
...
<?php endwhile; ?>
<?php endif; ?>

To include the loop file in a wrapper use WordPress function get_template_part. Parent HTML element should have the following attributes:

css class

according to the grid system span1..span12

data-motopress-loop-file

link to a loop file, the same as the parameter of get_template_part function

data-motopress-type

with the value loop

Example:

<div class="span12" data-motopress-type="loop" data-motopress-loop-file="loop/index.php">
	<?php get_template_part("loop/index"); ?>
</div>

Loop files are usually placed in the parent theme.

Sidebar block

Sidebar block is a holder of WordPress sidebars.

To include the sidebar in wrapper use WordPress function get_template_part. Parent HTML element should have the following attributes:

css class

according to the grid system span1..span12

data-motopress-sidebar-id

id of the registered dynamic sidebar

data-motopress-type

with the value

• dynamic-sidebar for dynamic sidebar
• static-sidebar for sidebar through get_sidebar()

data-motopress-sidebar-file

name of the file from get_sidebar() function; for sidebars only

Example of including the sidebar.php:

<div class="span4" id="sidebar" data-motopress-type="static-sidebar"  data-motopress-sidebar-file="sidebar.php">
	<?php get_sidebar(); ?>
</div>

Example of including the dynamic sidebar:

<div class="span4" id="sidebar" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="main-sidebar">
	<?php dynamic_sidebar("main-sidebar"); ?>
</div>

Responsive design

MotoPress plugin works with the responsive Bootstrap grid system. WordPress template should be based on the Bootstrap grid system to meet MotoPress plugin requirements.

Grid system

MotoPress plugin is based on the responsive Bootstrap grid system with 12 columns and 1170px wide.

Basic grid HTML

<div class="row">
	<div class="span4">...</div>
	<div class="span8">...</div>
</div>

Wrapper, sidebar, content and custom blocks should be placed in the HTML div element with the class span1 .. span12.

Download sample theme

Download MotoPress sample theme and try out how it works. It’s completely free to use on personal and commercial needs.