Blended Template

Blended Template is a templating language which is a blend of most widely used templating languages. Like, Jinja, Nunjucks, Twig and Django.

Blended Template For WordPress

In WordPress, we are using Twig as a templating language with the concept of a mixture of Blended templating language as well.

For more details, please go to Twig.

Base Template

It’s responsible for the styling components of the theme and defines contents_blocks under some design patterns. It's a blend of html and blended templating language.

It will be residing inside the html directory of the theme path. In my case the path is: C:/Ranjeet/Desktop/package/blended_tech/html.

Here, I am giving you an example of a base template that is home.html

Host Templates

It provides dynamic data to the base template by extending it. It will be residing inside the blended_templates directory in the root path of the theme. In my case the path is: C:\xampp\htdocs\Blended_WordPress\wp-content\themes\blended_fw\blended_templates\landing.twig.

Here, I am giving you an example of a host template that is landing.twig

How to Include the theme into your WordPress application?

Extending a predefined Blended template should allow you to add a new page in your WordPress application.

First, you have to choose a page layout based on available base templates inside the theme. A Blended theme can support various templates like, Default template, left, narrow, right wide and blog.

Default template: The WordPress default page template is mapped to page.twig.

Landing template: The WordPress front page is mapped to landing.twig.

If you are writing a host template then you have to extend the base template which you want to use as per your need. In this way, you can send the dynamic content to the base template by using its well defined blocks

Here, we are extending the wide template for an example.

• Go to WordPress Admin
• Click on Pages menu from WordPress sidebar
• Click on Add New
• Click on Template drop down menu
• Select wide option from the list
• After publishing, the WordPress page will be mapped to wide.twig, which is acting as a host template.

Blocks

We have predefined blocks named meta, title, css, body_class, top, navigation_header, banner_dynamic, navigation_footer, javascript_lib, javascript_local, content_header, content_hero, content_footer, content_1, content_2, content_3, content_4, content_5 and content_6.

You can see more details in the documentation of Blended Theme

Navigation Blocks

You can add a navigation block as below in the host template.

For Header

For Footer

Add css

We can add or change css by following ways:

Theme css

We are using a css_link host function inside the css block which compiles the entire css framework of the theme.

You can add or change the styling components in the file named /blended_tech/css/style.css.

Extra css

You can add extra css by adding a css file or can write inline css through css block.

The WordPress host template is using the wp_head hook. So we can include a stylesheet by following the WordPress function:

For more details, please See.

Inline css: You can write inline css directly inside the style tag.

Add js

Javascript is managed by two blocks named javascript_local, javascript_lib and css. We can add the javascript by using these blocks in the host template.

The WordPress host template is using the wp_footer and wp_head hooks. So we can include javascript by following the WordPress function:

For more details, please See

$in_footer = false; then It will use the css block.

Ex:

$in_footer = true; then It will use the javascript_lib block.

javascript_lib

Ex:

javascript_local

If you want to add inline javascript, then you can use the javascript_local block to define it.

Ex:

Add an Image

For an internal image file

If you want to use image files from the theme then you can do it by:

Ex:

Note: Here, the image file logo is available inside the media folder inside the theme.

For external image file

If you want to use external image files then you need to upload images in WordPress media and then use the image URL in the following code snippet as.

Ex: