Skip Navigation

[Resolved] Wrapping the entire Toolset Layout in a custom HTML div

This thread is resolved. Here is a description of the problem and solution.

Problem:
When we use Toolset Layouts, can we add a HTML tag that wraps the entire Layout?
We can add them to single rows and cells, but I want to add them to the entire Layout.

Solution:
This is not possible out of the box.
It requires custom code.

Relevant Documentation:
https://toolset.com/forums/topic/add-a-div-around-entire-layout/

This support ticket is created 6 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 5 replies, has 2 voices.

Last updated by aranj 6 years, 8 months ago.

Assisted by: Beda.

Author
Posts
#634460
Sketch2.png
Sketch.png

Hello,

I am trying to wrap the whole content in a div.

I have tried to follow this thread - https://toolset.com/forums/topic/add-a-div-around-entire-layout/

When I look at the source it appears that closing divs are being inserted and parts of the theme are not loading. There is no closing body tag or scripts

Please find screenshots attached.

My page.php edits required something slightly more than that of the example above:

<?php
if ( defined( 'WPDDL_VERSION' ) ) :
get_header( 'layouts', 'page-default');
toolset_assigned_message('layout-page', 'page-default');
?>
<div class="wrapper"> <!-- Site wrapper -->
<div="sidebar"> <!-- sidebar -->
HTML Bits
</div> <!-- end sidebar -->
<div class="main-area"> <!-- content wrapper -->
<?php
the_ddlayout( 'page-default' );
?>
</div> <!-- end content wrapper -->
</div> <!-- end site wrapper -->
<?php
else:
get_header();
if ( have_posts() ) : while ( have_posts() ) : the_post();
toolset_assigned_message('content-template');
the_content();
endwhile; endif; // WP Loop
get_footer();
endif; // IF Layouts are enabled
?>

#634576

I updated that summary as it was missing some parts of the code, please re-try.

The structure you need to follow is this:

<div>
  <?php the_ddlayout( ); ?>
</div>

This works forcedly as it cannot be overthrown by Toolset.
The HTML is hardcoded in your theme, hence it will always output around the Layout.

Important is that every opening DIV must be closed and that you open/close PHP or HTML syntax properly.

What issue do you face if you retry with the updated solution and above general syntax example?

#634580

Hi Beda,

Thanks for your reply.

Is it possible to have something similar to this

<div>
  <div>
  </div>
  <div>
    <?php the_ddlayout( ); ?>
  </div>
</div>

As this is the structure I require to allow certain functions.

It still appears that closing divs are being inserted and the theme will not fully load

#634888

You can add whatever HTML you want before and after the call to the Layout.
Of course, if the HTML in the Layout itself screws up the outer Layout this will depend on your edits to the Layouts, but you can surely wrap a Layout in several DIV's as you show.

Exactly as you pasted it.

It will render a "wrapping div", and inside it an empty div, then the div with the layout.

Imagine "the_ddlayout()" similar to "the_content()" of WordPress.
Wherever you put it, it'll just spit out the stuff you add to the related Layout or the specific one passed to the function, wrapped by whatever HTML you add.

But your syntax obviously is wrong, it will not work, since you do not open nor close PHP tags.
But I think your snippet is just an example, you know that you will need to carefully open and close HTML/PHP, right?

Let me know if you have any other doubts

#635328

Hi Beda,

Let me try make a clearer illustration of my code

<?php
if ( defined( 'WPDDL_VERSION' ) ) :
    get_header( 'layouts', 'page-default');
        toolset_assigned_message('layout-page', 'page-default');
?>
<div class="site-wrapper">    
  <div class="item">
  </div>
  <div class="content-wrapper">    
    <?php
    the_ddlayout( 'page-default' ); // Loads 'page-default' layout by default
    ?>
  </div>
</div>
<?php
    else:
  get_header();
  if ( have_posts() ) : while ( have_posts() ) : the_post();
      toolset_assigned_message('content-template');
      the_content();
  endwhile; endif;  // WP Loop
  get_footer();
    endif; // IF Layouts are enabled
?>

Is this the correct syntax?

Note - The div with class=item is empty only for illustration

Thanks for your help

#638186

Fixed.

Mistake in my page.php file, resulting in theme error.

Solution below

<?php
if ( defined( 'WPDDL_VERSION' ) ) :
	get_header( 'layouts');
?>
     <div class="site-wrapper">
          <div class="item">            
          </div>
        <div class="content-wrapper">
		<?php
		the_ddlayout();
		?>
         </div>
      </div>
<?php
	get_footer( 'layouts' );
else:
	get_header();
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		toolset_assigned_message('content-template');
		the_content();
	endwhile; endif;  // WP Loop
	get_footer();
endif; // IF Layouts are enabled
?>