How To

Integrate Toolset Layouts in a WordPress Theme

Toolset Layouts, the Toolset plugin that lets you design Templates with a Bootstrap Drag’n’Drop builder, works with any theme out of the box, generally. But it will by default only allow you to edit the “post body” part, not the entire Template from header to footer.

To let Layouts control the entire Template, the first option we have is to add a tiny line of code to our Theme’s Templates, replacing the_content() part, which renders the “post body”. But again this won’t allow us to design the entire Template with the D’n’D Builder.

The second and more advanced but surely more powerful option is to create a very special template file structure and fill the templates with (very few) lines of code. The best way to do this is either in a Child Theme or creating a whole new Theme. No worries, it takes literally no more than 30 minutes to create a whole new Theme that integrates Toolset Layouts.

All you need to do is follow the below steps, or install and learn with the Minima X1 Theme.
See in the slideshow how you’ll design WordPress Theme Templates With Toolset Layouts.

  • Simple Drag And Drop Template Editing
    Simple Drag And Drop Template Editing
  • Design Complex Templates in Minutes
    Design Complex Templates in Minutes
  • Create Global Parent Layouts To Reuse Allover
    Create Global Parent Layouts To Reuse Allover
  • Control and Manage your Templates in a central place
    Control and Manage your Templates in a central place

Step #1: Create a Basic WordPress Theme

Create a minimal WordPress Theme. We will create a folder with a name (our Theme Name) and include only the following files:

  1. style.css
  2. index.php
  3. functions.php
  4. header.php
  5. footer.php
  6. 404.php
Toolset Layouts Integrated Theme Folder Structure
Toolset Layouts Integrated Theme Folder Structure

Step #2: Populate the Theme Files with Code

We will need to put some minimal code in each of the files

style.css

There’s nothing special to the style.css when we integrate Toolset Layouts. Of course you are free to add your own CSS in the file. Below the minimal necessary code in style.css 
/*
Theme Name: Your Theme Name
Theme URI: https://www.domain.tld/
Author: Your Name
Author URI: https://www.domain.tld/
Description: Your Theme Description
Version: 0.1
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: your-theme-text-domain
*/

index.php

The index.php is our only template file when we integrate Toolset Layouts, apart of the 404.php. It’s a special file structure that doubles as page template and theme template It holds the necessary calls to Toolset’s Layout functions, and this version also includes a logic allowing to create dedicated Mobile-only Layouts 
<?php

//Do not access directly
if (!defined('ABSPATH')) exit;

/**
 * The Main Template File.
 *
 * A WordPress Theme falls back to index.php if no other Template is available
 * MinimaX has no other template files. Everything is handled here.
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @since MinimaX1 1.0.0
 */

/** 
 * Integrate Toolset Layouts PLugin 
 *
 * Make this template a Page Template
 *
 * Toolset Layouts requires a PAGE Template to recognize the the_ddlayouts() call.
 * But WordPress does not like a Page Template Name in the index.php.
 * (other wise it will produce 2 Templates, one the native "Default" and the other the "Template Name")
 * Therefore we make the index.php a Page Template ONLY when Layouts is active.
 *
 * @link https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/
 * 
 * @since MinimaX1 1.0.0
 */

if ( defined( 'WPDDL_VERSION' ) && is_ddlayout_assigned()) { 
/* Template Name: Main Template */


	/** 
	 * Include Toolset Layouts the_ddlayout() call
	 *
	 * Toolset Layouts requires a PAGE Template to include the the_ddlayouts() call.
	 * We include it dynamically to not force the usage of Layouts even if active.
	 * We include the Layout Call only if a Layout is assigned to content.
	 * We also include the necessary header and footer.
	 * Those could be custom header-layouts and footer-layouts files.
	 *
	 * @link https://wp-types.com/documentation/user-guides/layouts-theme-integration/
	 * 
	 * @since MinimaX1 1.0.0
	 */

	get_header( ); //Call 'header-layouts' if you plan to style the header differntly
	/**
	 * Add logic for Mobile detection
	 *
	 * @since MinimaX1 2.0.0
	 * @link https://developer.wordpress.org/reference/functions/wp_is_mobile/
	 */
	if (!wp_is_mobile()){
		the_ddlayout( ); // Load a defualt 'default-layout-slug'. Layout must exist
	}
	else {
		/**
		 * It is an archive
		 * In this case build mobile archive layout slug {archive-name}-archive-mobile
		 * If such layout does not exist load the assigned one
		 * @link https://developer.wordpress.org/reference/functions/is_archive/
		 */
		if (is_archive()){
			$assigned_layout_slug = get_queried_object()->name.'-archive-mobile';
			if ( ddl_layout_slug_exists($assigned_layout_slug) == 1 ) {
				the_ddlayout($assigned_layout_slug, array('post-content-callback' => '', 'allow_overrides' => 'false') );
			}
			else {
				the_ddlayout();
			}
		}
		/**
		 * It is not an archive
		 * In this case build mobile single layout slug {assigned-layout-slug}-mobile
		 * If such layout does not exist load the assigned one
		 */
		else {
			$assigned_layout_slug = get_layout_for_post_object().'-mobile';
			if ( ddl_layout_slug_exists($assigned_layout_slug) == 1 ) {
				the_ddlayout($assigned_layout_slug, array('post-content-callback' => '', 'allow_overrides' => 'false') );
			}
			else {
				the_ddlayout();
			}
		}
	}
	get_footer( ); //Call 'footer-layouts' if you plan to style the footer differntly

}

/** 
 * If Layouts is not active load a minimal WordPress default Loop.
 * We call the header and footer as well
 * We need to include Toolset Views cases in this loop.
 * 
 * @link https://codex.wordpress.org/The_Loop
 *
 * @since MinimaX1 1.0.0
 */
else {
	get_header();?>
	<!-- open the main container-->
	<div class="container-fluid">
	    <div class="row">
			<div class="col-md-12"><?php
				if ( have_posts() ) { 
					while ( have_posts() ) {
						the_post();
						/** 
				 		 * If Toolset Views is active load only the_content().
				 		 * Views replaces the_content() with its Content Templates.
						 * Views stores the assigned Contnet Template in a hidden _views_template Field
			 			 * We do load only the above "MinimaX1 container".
				 		 * We use is_wpv_content_template_assigned() that is defined in Views
				 		 * But we could also simply get_post_meta _views_template > 0
				 		 * Views does NOT check if is_home or is_front_page() so we need still to 
				 		 * get_post_meta($post-ID, '_views_template', true) > 0
				 		 * Also output edit links. Views hooks in there too.
				 		 *
						 * @link https://developer.wordpress.org/reference/functions/the_content/
			 			 * @link https://wp-types.com/documentation/user-guides/theme-support-for-content-templates/
			 			 * @link https://developer.wordpress.org/reference/functions/edit_post_link/
						 * 
						 * @todo Juan should add check for is_home() and is_front_page to the Views API
						 *       then we can remove the redundant check below.
						 * 
						 * @since MinimaX1 1.0.0
						 */
						if (defined('WPV_VERSION') && ((is_wpv_content_template_assigned() == true) OR (get_post_meta($post->ID, '_views_template', true) > 0))) {
							the_content();
							edit_post_link('edit: "' . $post->post_title . '"');
						}
						/** 
				 		 * If Toolset Views is not active load the_title() and the_content().
						 * We load some more Bootsrap HTML to make things nice.
			 			 * 
			 			 * @link https://codex.wordpress.org/Function_Reference/the_title
				 		 *
				 		 * @since MinimaX1 1.0.0
						 */
						else {
							/** 
				 		 	 * Create default HTML.
						 	 */
						 	?>
							<div class="row">
							    <div class="col-md-12"><?php
							    	/**
							    	 * Check if it is an archive or search page
							    	 * If so output Archive title, Search Term and pagination
							    	 * 
							    	 * @link https://codex.wordpress.org/Function_Reference/is_archive
							    	 * @link https://codex.wordpress.org/Function_Reference/is_search
							    	 * @link https://developer.wordpress.org/reference/functions/the_archive_title/
							    	 * @link https://developer.wordpress.org/reference/functions/paginate_links/
							    	 * @link https://developer.wordpress.org/reference/functions/get_search_query/
							    	 */
							        if (is_archive() == true) {?>
							        	<h1><?php the_archive_title();?></h1>
							        	<?php echo paginate_links();
							        }
							        if (is_search() ) {?>
							        	<h1><?php _e('Search Results for: ', 'MinimaX1');echo get_search_query();?></h1>
							        	<?php echo paginate_links();
							        }?>
							    </div><!--#row-->
							</div><!--#col-md-12-->
							<?php
							/** 
							 * If it is_single() output Title, content and post edit links
							 *
							 * @link https://developer.wordpress.org/reference/functions/the_title/
							 */
							?>
							<div class="row">
								<div class="col-md-12">
									<h1><?php the_title();?></h1>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<p><?php the_content();?></p>
									<p><?php edit_post_link('Edit: "' . $post->post_title . '"');?></p>
								</div>
							</div><?php
						}
					}
				}
				/** 
			 	 * If no Posts are found output a default nothing found message
			 	 * Again we load complete Bootstrap HTML
			 	 *
			 	 * @since MiniMax 1.0.0
			 	 */
				else {
					/**
					 * We need to check if no results where found.
					 * Arhchive not found is handled by 404
					 */
					if (is_search() ) {?>
						<div class="row">
						    <div class="col-md-12">
						    	<h1><?php _e('Search Results for: ', 'MinimaX1');echo get_search_query();?></h1>
						    </div>
						</div><?php
					}?>
					<div class="row">
						<div class="col-md-12">
							<h2><?php _e('No Posts', 'MinimaX1');?></h2>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<p><?php _e('No Contents', 'MinimaX1');?></p>
						</div>
					</div><?php
				}?>
			</div>
		</div>
	</div><!-- #container -->
	<?php 
	/**
	 * Call the Footer
	 * 
	 * @link https://developer.wordpress.org/reference/functions/get_footer/
	 */ 
	get_footer();
}//if ( defined( 'WPDDL_VERSION' ) && is_ddlayout_assigned()) 
?>

functions.php

Minimally we need to declare Toolset Layouts support, but this version below also includes some minimally necessary code for default WordPress Themes so you can use a menu, and enqueue styles and scripts. 
<?php

//Do not access directly
if (!defined('ABSPATH')) exit;

/**
 * The functions and definitions
 *
 * @link https://codex.wordpress.org/Theme_Development
 * @link https://codex.wordpress.org/Functions_File_Explained
 *
 * @since MinimaX1 1.0.0
 */

/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 *
 * @link https://codex.wordpress.org/Plugin_API/Action_Reference/after_setup_theme
 *
 * @since MinimaX1 1.0.0
 */
if ( ! function_exists( 'MinimaX1_setup' ) ) {
	function MinimaX1_setup() {

		/**
		 * Let WordPress manage the document title.
		 * By adding theme support, we declare that this theme does not use a
		 * hard-coded <title> tag in the document head, and expect WordPress to
		 * provide it for us.
		 *
		 * @link https://developer.wordpress.org/reference/functions/add_theme_support/
		 * @link https://codex.wordpress.org/Title_Tag
		 *
		 * @since MinimaX1 1.0.0
		 */
		add_theme_support( 'title-tag' );

		/**
		 * Add one menu
		 *
		 * @link https://developer.wordpress.org/reference/functions/register_nav_menus/
		 *
		 * @since MinimaX1 2.0.0
		 */
		register_nav_menus(
    		array(
    			'primary-menu' => __( 'Primary Menu' ),
    		)
		);

		/**
		 * Enable support for Post Thumbnails on posts and pages.
		 *
		 * @link https://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
		 *
		 * @since MinimaX1 1.0.0
		 */
		add_theme_support( 'post-thumbnails' );
	}
}
add_action( 'after_setup_theme', 'MinimaX1_setup' );

/**
 * Callback function to integrate Toolset Layouts
 *
 * @link https://wp-types.com/documentation/user-guides/layouts-theme-integration/ > Telling Layouts your theme is integrated
 */
function MinimaX1_is_integrated_with_layouts() {
    return true;
}
add_filter('ddl-is_integrated_theme', 'MinimaX1_is_integrated_with_layouts');

/**
 * Enqueue CSS styles and Fonts
 *
 * @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
 *
 * @since MiniMax 1.0.0
 */
function MinimaX1_styles() {        

	//Here you can enqueue your own style, for example:
	//wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/fontaweseme.min.css', '5.13.1', 'all' );
    //wp_enqueue_style( 'font-awesome-font-face', get_template_directory_uri() . '/css/fontawesome-v4-font-face.min.css', '5.13.1', 'all' );
	//wp_enqueue_style( 'font-awesome-shim', get_template_directory_uri() . '/css/fonaweseme-v4-shims.min.css', '5.13.1', 'all' );

	//Enqueue the MinimaX1 Main Style Sheet. Leave this last in the cascade, so if you add CSS to the Theme it applies.
	wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'MinimaX1_styles' );

/** 
 * Enqueue JS Scripts
 *
 * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
 *
 * @since MinimaX1 1.0.0
 */
function MinimaX1_scripts() {

	//Here you can enqueue your won JS scripts, for example
	//wp_enqueue_script('minimax-script', get_template_directory_uri() . '/js/script.min.js', array('jquery'),'', true);

}
add_action( 'wp_enqueue_scripts', 'MinimaX1_scripts', 999 );

header.php

The header.php should be as minimal as possible, however requires no special integration. 
<?php
/**
 * The Header.
 *
 * Displays all of the <head> section and opens the <body> tag.
 * Includes the Menu container
 *
 * @link https://codex.wordpress.org/Designing_Headers
 *
 * @since MiniMax1 1.0.0
 */

//Do not access directly
if (!defined('ABSPATH')) exit;
?>
<!DOCTYPE html>
<?php
/**
 * Display the Language Attributes
 * 
 * @link https://codex.wordpress.org/Function_Reference/language_attributes
 *
 * @since MiniMax1 1.0.0
 */
?>
<html <?php language_attributes(); ?>>
<head>
	<?php
	 /**
	 * Display the “Encoding for pages and feeds” set in Settings > Reading.
	* 
	* @link https://developer.wordpress.org/reference/functions/bloginfo/
	*
	* @since MiniMax1 1.0.0
	*/
	?>
	<!-- The below 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta https-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
	<?php
	/**
	* Always have wp_head() just before the closing </head> tag of your theme, or you will break many plugins, which
	* generally use this hook to add elements to <head> such as styles, scripts, and meta tags.
	*
	* @link https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head
	*
	* @since MiniMax1 1.0.0
	*/
	wp_head();?>
</head>

<?php
/**
* Open the body and add dynamic body class
* 
* @link https://developer.wordpress.org/reference/functions/body_class/
*/
?> 
<body <?php body_class(); ?>>

footer.php

Nothing special in the footer.php either 
<?php

//Do not access directly
if (!defined('ABSPATH')) exit;

/**
 * The Footer.
 *
 * Closes the Body and HTML tag.
 * Calls wp_footer()
 *
 * @link https://codex.wordpress.org/Function_Reference/wp_footer
 *
 * @since MiniMax1 1.0.0
 */
?>
<?php wp_footer();?>
  	</body>
</html>

404.php

Finally in the 404.php we as well need to integrate Layouts like in the index.php 
<?php

//Do not access directly
if (!defined('ABSPATH')) exit;

/**
 * The template for displaying 404 pages (Not Found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @since MinimaX1 1.0.1
 */

if ( defined( 'WPDDL_VERSION' ) && is_ddlayout_assigned()) { 
	/** 
	 * Include Toolset Layouts the_ddlayout() call
	 *
	 * Toolset Layouts requires a PAGE Template to include the the_ddlayouts() call.
	 * We include it dynamically to not force the usage of Layouts even if active.
	 * We include the Layout Call only if a Layout is assigned to content.
	 * We also include the necessary header and footer.
	 * Those could be custom header-layouts and footer-layouts files.
	 *
	 * @link https://wp-types.com/documentation/user-guides/layouts-theme-integration/
	 * 
	 * @since MinimaX1 1.0.0
	 */

	get_header( ); //Call 'header-layouts' if you plan to style the header differntly
	/**
	 * Add logic for Mobile detection
	 *
	 * @since MinimaX1 2.0.0
	 * @link https://developer.wordpress.org/reference/functions/wp_is_mobile/
	 */
	if (!wp_is_mobile()){
		the_ddlayout( ); // Load a defualt 'default-layout-slug'. Layout must exist
	}
	else {
		/**
		 * Error 404 template can be styled for mobile 
		 */
		$assigned_layout_slug = '404-mobile';
		if ( ddl_layout_slug_exists($assigned_layout_slug) == 1 ) {
			the_ddlayout($assigned_layout_slug, array('post-content-callback' => '', 'allow_overrides' => 'false') );
		}
		else {
			the_ddlayout();
		}	
	}
	get_footer( ); //Call 'footer-layouts' if you plan to style the footer differntly
}

else {
get_header(); ?>
	<div class="container-fluid">		
		<div class="row">
			<div class="col-md-12">
				<h1 class="text-center"><?php _e( 'Error 404', 'MinimaX1' ); ?>

				</h1>
				<a href="<?php esc_url( home_url( '/' ) )?>">
					<h3 class="text-center"><?php _e('Go Home', 'MinimaX1');?></h3>
				</a>
			</div>
		</div>
	</div><!-- #container -->
<?php get_footer(); 
}

#Step 3: Upload the Theme

Upload and Install the Theme on your WordPress install

Then, activate it, and start building your templates with Toolset Layouts. That’s really all there was to it.

Concluding

We successfully created a basic WordPress Theme integrating Toolset Layouts (and Views) dynamically. Additionally, the Theme provides some basic functions for Menus, Thumbnails and assets handling.

With this Theme, you can now design a website from edge to edge, using nothing but a Drag and Drop editor and some custom CSS and HTML here and there to create your Templates – No more PHP will be required.

Legal

Privacy Policy Terms & Conditions Refund Policy
TukuToi Zero Tracking Policy Zero Tracking Policy

About Us

Who are we Members Partners
Rated Great on TrustpilotTrustScore 4 out of 5

Contact

Contact Review our Services
Rated Great on TrustpilotTrustScore 4 out of 5 Built with WordPress