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

[Author]

Posts

[aranj]

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
?>

[Beda]

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?

[aranj]

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

[Beda]

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

[aranj]

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

[aranj]

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
?>