This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Builder, columns within columns – Jump Start 2.0-beta, Layout Builder 2.0

  • Creator
    Topic
  • #19580
    askwpgirl
    Participant

    Hi Jason,

    I’m having fun with the Template Builder but have run into a problem I can’t seem to resolve.

    For many layouts, I need to put columns within a column, for example, if there is main (primary area) and a sidebar, I’d like to put columns in the primary area and still have a right sidebar. With the new template builder, you can’t put columns in columns or columns in content (unless you use shortcodes which is not very user friendly).

    In the old Layout Builder, we could put columns in the primary content area and still have a right sidebar. Now, we can’t do that. There is no way to have a sidebar without having columns in the Template Builder and no way to have columns inside of columns, so it’s a bit of a catch.

    Here are some layout examples of when columns within columns is helpful:

    http://postimg.org/image/ajvnug6jh/
    http://postimg.org/image/5z9hfimu5/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Author
    Replies
  • #19594
    Jason Bobich
    Keymaster

    Hi Angela,

    This isn’t the first time this has come up. It’s been brought up by a couple of others asking about the new Builder. So, I’ll explain some new concepts and reasoning for all of this, if you or anyone cares to read. And then, after, I’ll post some potential ways of tackling your desired layouts, while maybe not in the ways you were hoping. 😉

    ============

    When I originally got into updating the layout builder, I was hitting a bit of a wall, and so I made a list of problems that I felt were limiting what I could do with everything. This was all based on what I saw people doing with the Builder (things I personally thought looked not great), and things users were requesting that are very common out there. And ultimately, these things are what drove me go from the v1.3 I had been working on, and bumping it all up to total revamp that I was going to bump up as 2.0.

    Here are some of those issues:

    #1: Full-width elements:

    Problem: Originally, the fact that elements in the “Primary Layout” were bound with a sidebar layout, meant I could never have any element added within that could then stretch full width of the page. This means no full width sliders, google maps, etc. Basically, the fact that the sidebar layout of the page and the elements being added were not connected was a big issue.

    Solution: Basically “forcing” all sections of elements to be consistently not bound by a sidebar layout made it so that a section can have any element placed into it, full width or not. Also, it allowed for a feature that can be designated for various elements internally known as the “popout”. For example, add a Google Maps element, click the Display options, and there’s a “Popout” box you can check so it sticks out full width.

    #2: Limited columns element:

    Problem: With the last solution, this now meant you were completely limited with elements that maybe aren’t mean to be displayed full width of the page, like a Blog maybe.

    Solution: This brought me to being able to add elements within columns. Also, in doing this, I created a system that when an element is registered, I can designate whether or not it’s available within a column. For example a “Full Width Slider” and a “Columns” element are not allowed within a Columns element, and so they don’t show up to the user in that dropdown box.

    #3: Elements being mashed:

    Problem: I had no way of “limiting” the user from taking an element that was meant to be displayed in a large space, and scrunching into narrow content area. For example, the users adds a giant slider to the layout, then selects the “Double Sidebar” sidebar layout for the page.

    Solution: The solution to item #2, also solves this, allowing me a system to designate a separation between what elements can be allowed in a full-width environment vs in a narrower column.

    ============

    One thing you have to also think about, is that there are certain limitations that have to be in place for the user, and this is why many of the other Builder-type of interfaces from others out there are just so convoluted and confusing. This is why, with this iteration of the Builder, I can’t see ever adding the ability of configuring a column element within another column element. It was just be too much.

    And it’s not just a matter of a convoluted user-interface, but also the complication this adds to what users could then theoretical create on the fronted. Odds are if you could have columns within columns, 90% of what people would slap together with various elements in narrow spaces is going to end up not looking good, and this is frustrating for the user. “What do I have to do for it to look good???”

    While maybe this isn’t exactly the case, but in my dream of idealism, anything I “allow” you to do in the Builder should produce an acceptable looking result on the frontend. That’s always my goal.

    #19595
    Jason Bobich
    Keymaster

    Ok, so what if we need columns within columns? — In the Builder you’ve now got access to both the Visual editor and the our Shortcode Generator. So, anything you can do in a normal page’s content, in theory, you can do in, say, a “Content” element in one of your columns. So, this means you can utilize the [column] shortcode.

    ============

    This layout could be fairly easily produced. You’d add a “Columns” element, and set it to two columns. In the second column, you’d have your widget area (sidebar). And in your first column, you’d add your elements maybe something like this:

    1. Image
    2. Promo Box
    3. Content
    4. Content

    And in that element #3, the Content element, you’d just use your column shortcodes.

    [raw]
    [column size="1/3"]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/column]
    
    [column size="1/3"]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/column]
    
    [column size="1/3"]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/column]
    
    [column size="1/3"]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/column]
    
    [column size="1/3"]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/column]
    
    [column size="1/3"]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/column]
    [/raw]

    ============

    With the intial setup, we can essentially do the same thing. At the top level, we’ve got:

    1. Content
    2. Columns

    Then within the #2 Columns element, you’ve got two columns, a widget area element in the first column, and in the second column:

    1. Image
    2. Content

    Now, this one’s a little more tricky because we have no way to display a widget area within this “Content” element. But as with anything, a little customization can help.

    What about a shortcode that displays a widget area? There’s probably actually a plugin out there that I’m sure already does this, but let’s just create one from our child theme.

    /**
     * Shortcode to display widget area.
     * Usage: [sidebar id="my-sidebar"]
     */
    function my_sidebar_shortcode( $atts ) {
    	return themeblvd_get_widgets( $atts['id'], 'block' );
    }
    add_shortcode( 'sidebar', 'my_sidebar_shortcode' );

    Now in this last Content element, you could do something like this:

    [raw]
    [column size="2/3"]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/column]
    
    [column size="1/3"]
    [sidebar id="my-sidebar"]
    [/column]
    [/raw]
    #19615
    askwpgirl
    Participant

    Yes, I thought about the column shortcode in a content area but wasn’t sure if it still removed all paragraph breaks which would make it not a great option. I’ll test again. The whole reason I would use the Layout Builder for columns was because the columns worked with line breaks, as simple as having an address on the left and a map on the right. I have mostly ended up coding html divs into the Text tab to avoid using the shortcodes due to how much they mess up the content in the columns.

    Brilliant idea for the shortcode for the Widget Area! I use shortcodes a lot for this type of thing and it didn’t occur to me yet. Love it! I’ll think more creatively about that.

    I like to keep things simple for the client, so for the second layout, I created a custom page template. The text at the top was the same across multiple pages in a section. I used a widget area for that, so they could change it easily in one place and have it change across the whole section; and I wanted to use a Featured Image for the image across the content/right-sidebar to keep things simple and formatted precisely.

    As a result, the generated classes for the column spans on the page didn’t work, so I fudged it with CSS redefining the widths. I’m going to try with a sidebar layout filter to set the spans and see if that works better. These are all quite frequent requests, so I’m trying to establish for myself and my students some “best practices” when it comes to developing page templates — either creative use of the Template Builder or best ways to create custom page templates that don’t break the lovely Bootstrap columns.

    #19616
    askwpgirl
    Participant

    I also totally hear you about the builder themes/plugins that let you do too many crazy things and end up with bad layouts. That all makes sense. Now, I just have to figure out how to create the layouts I receive from the designer in the best possible way.

    I do often push back on layouts I think make no sense or are too cluttered. But, if it is a layout that is clean, and I see a precedence for the layout on contemporary sites, then I really do try to find a solution that is both easy for the client to maintain and not convoluted to set up.

    I did an update for a site recently that used the most crazy configuration of the Advanced Custom Fields plugin I’d ever seen — using it as a layout builder. This very large U.S. organization paid tens of thousands of dollars to a NY design firm to create this monstrosity for them. It was a nightmare. They had to hire me just to explain to them how it went together and how to update the content properly. The design wasn’t “bad” per se at all. It was just ridiculous to keep up and impossible for someone who didn’t have pretty high-level technical skill to even begin to change content on. So, good design does not necessarily equal best practice.

    #19620
    askwpgirl
    Participant

    I’ll write more later but the sidebar shortcode function doesn’t work and breaks the site. And once I fixed it, the sidebar won’t load within a column but loads at the top of the page. Being able to load a widget area inside a column is rather critical but I don’t think it’s going to work with this iteration of JS. I’ll send more details about what I see tonight.

    #19622
    Jason Bobich
    Keymaster

    Shortcode function worked great on my end. Here’s what I did in the builder:

    #19638
    kennethfeldman
    Participant

    I have a site where I wanted columns inside of columns too.

    I even asked Jason the same question; but you can’t use column SHORTCODE inside of shortcode- or builder-induced columns.

    But the column shortcodes are just shorthand for a regular HTML divs with classes.

    So to make sub-columns inside of my shortcode colums, I just used the “HTML output” instead of the shortcode for the inner columns.

    (I know there are some issues with using HTML divs in the editor, but… oh well.)

    In the example below, I wanted my 2/3 column to have two equal columns in it.

    So I just used the column class of grid_6 twice to make 2 50% width columns in the editor.

    Now my page has the column layout I wanted.

    [column size="1/3"]
    content...
    [/column]

    [column size="2/3" last]

    <div class="column grid_6">
    content...
    </div>

    <div class="column grid_6 last">
    content...
    </div>

    [/column]

    #19645
    Jason Bobich
    Keymaster

    @kennethfeldman Hi, Kenneth. In this topic, we’re talking about using Jump Start 2.0 (beta) with Layout Builder 2.0. So, there are several new topics we’re discussing in relation with this, and how to provide the best setup for a client who requires a layout such as this.

    It sounds like maybe you’re talking about the current v1 of Jump Start.

    I even asked Jason the same question; but you can’t use column SHORTCODE inside of shortcode- or builder-induced columns.

    It’s probably worth mentioning, though, that you’ve always been able to use column shortcodes within the columns element of the builder. So, I’m not entirely sure what you mean.

    Also, be careful with the HTML you’re using. These classes — .column, grid_*, etc. — no longer exist in Jump Start 2.0. Everything is done with Bootstrap classes and the extended version of Bootstrap classes I’ve created.

    http://dev.themeblvd.com/tutorial/grid-system/

    <div class="row">
    	<div class="col-sm-6">
    		Column #1
    	</div>
    	<div class="col-sm-6">
    		Column #2
    	</div>
    </div>
    #19839
    askwpgirl
    Participant

    Thanks for the thoughts on this, Jason. These are great workarounds!

    The shortcode for the sidebar didn’t work on JS 1.2.5 but does work on JS 2.x, so that’s great!

    I used to avoid using shortcodes for columns because line breaks would be removed. Glad that’s no longer the case.

    I try to create custom PHP templates to avoid using the Template Builder when possible if it makes instruction easier for the client. For example, the second layout above can be done with your technique but creates an unnecessarily cluttered interface for the client when what they need simply is:

    the main content area
    the featured image

    In this case, I created a page template that looked like this:

    <div id="sidebar_layout" class="clearfix">
    		<div class="sidebar_layout-inner">
    			<div class="row grid-protection">
    				<?php get_sidebar( 'left' ); ?>
    
    				<!-- CONTENT (start) -->
    				<div class="content-container col-md-9">		
    
    					<div class="featured-page-image">
    						<?php					
    						if ( has_post_thumbnail() ) {
    							the_post_thumbnail('large-featured');
    						}
    						else {
    						//echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/assets/images/feature-sample.png" />';
    						}
    						?>
    					</div>
    				<div id="content" class="col-md-9 clearfix" role="main">
    					<div class="inner">
    						<?php themeblvd_content_top(); ?>
    
    						<?php while ( have_posts() ) : the_post(); ?>
    
    							<?php get_template_part( 'content', themeblvd_get_part( 'page' ) ); ?>
    
    							<?php themeblvd_page_footer(); ?>
    
    							<?php if ( themeblvd_supports( 'comments', 'pages' ) ) : ?>
    								<?php comments_template( '', true ); ?>
    							<?php endif; ?>
    
    						<?php endwhile; ?>
    
    						<?php themeblvd_content_bottom(); ?>
    					</div><!-- .inner (end) -->
    				</div><!-- #content (end) -->
    
    				<!-- CONTENT (end) -->
    				
    				<?php get_sidebar( 'right' ); ?>
    				
    				</div> <!-- CONTENT container (end) -->
    
    			</div><!-- .grid-protection (end) -->
    		</div><!-- .sidebar_layout-inner (end) -->
    	</div><!-- .#sidebar_layout (end) -->

    But, I’m still working out how to use the columns classes and not create a mess. It gets a bit funky right away because the sidebars are dynamically getting columns widths, so then I mucked about in the CSS because of the “pull” CSS from Bootstrap creating some interesting results (ie a mess). Needless to say, I need to work this out my custom page template CSS column classes more thoughtfully.

    #19849
    Jason Bobich
    Keymaster

    The shortcode for the sidebar didn’t work on JS 1.2.5 but does work on JS 2.x, so that’s great!

    Just for your info, the function themeblvd_get_widgets() didn’t exist before Jump Start 2.0, and this is why you would have been getting a fatal error, which should have told you that the function didn’t exist.

    So, you’d just use dynamic_sidebar(), which is the default WP function. I didn’t use this in the previous example, because this WP function only outputs, and does not return, which my themeblvd_get_widgets() function takes care of, and is thus more ideal for a shortcode, which requires the output to be returned. And I didn’t know we were talking about Jump Start v1.

    This just makes your PHP slightly more complex, is all:

    /**
     * Shortcode to display widget area.
     * Usage: [sidebar id="my-sidebar"]
     */
    function my_sidebar_shortcode( $atts ) {
    
    	ob_start();
    	dynamic_sidebar( $atts['id'] );
    	$widgets = ob_get_clean();
    
    	return sprintf( '<div class=widget-area fixed-sidebar">%s</div><!-- .widget-area (end) -->', $widgets );
    }
    add_shortcode( 'sidebar', 'my_sidebar_shortcode' );

    But, I’m still working out how to use the columns classes and not create a mess. It gets a bit funky right away because the sidebars are dynamically getting columns widths, so then I mucked about in the CSS because of the “pull” CSS from Bootstrap creating some interesting results (ie a mess). Needless to say, I need to work this out my custom page template CSS column classes more thoughtfully.

    I think the confusion is that your page template file looks to be originally derived from the general setup of a v1 template file, and now you’re using it in v2.

    If you look at (for example) page.php of v2, notice how both sidebars come after the content of the page? This is new in v2 and is for a better SEO experience, making it so that the order of the content of the page doesn’t start content being indexed by google on layouts with a left sidebar. Also, it means on mobile you naturally get that left sidebar always coming after the content. (In v1, I was using some really hacky CSS to display that left sidebar beneath the content on mobile)

    Allowing this to be possible is where we start throwing in the *-pull classes. It makes it so that the left sidebar can come after the main content, but still be displayed before it when you’re viewing your site at the standard viewports.

    #19925
    askwpgirl
    Participant

    I’m sorry to have confused the issue:

    1 – I understand that the shortcode for the sidebar display is 2.0 and not 1.0, so that was my bad trying to use it in 1.0. And, it’s so cool that we can do that in 2.0 easier!!!

    2 – The page template PHP I sent was for and from 2.0. What this PHP is doing is creating this layout:

    http://www.uploadblvd.com/uploads/image_5488e712007fe.png

    While this layout could be created in JS 2.0 template builder per your instructions above, the interface for the end user is inefficient.

    What the user needs is:

    content area
    featured image

    Creating the layout in the Template Builder creates an interface for the end-user (aka client) that is unnecessarily complicated.

    What I am trying to work on for my students is:

    “When do you want to use the Template Builder versus create Custom Page Templates?”

    I will create a custom page template when the content needs are simple but the layout is not traditional as with the image above.

    The custom php page template creates an easier interface for the client to work with because they don’t have to get into the Template Builder sections/layout elements. It’s hard enough to train a client how to use bullets much less how not to screw up a Template Builder layout.

    One of my students coded this site, but I advised her on the page template for the pages that look like this:

    http://www.ormeschool.org/admissions/welcome-your-journey/
    (this is the image above made into the real site)

    The code on the custom page template for this page is:

    <div id="sidebar_layout" class="clearfix">
    		<div class="sidebar_layout-inner">
    			<div class="row grid-protection">
    				<?php get_sidebar( 'left' ); ?>
    
    				<!-- CONTENT (start) -->
    				<div class="content-container col-md-9">		
    
    					<div class="featured-page-image">
    						<?php					
    						if ( has_post_thumbnail() ) {
    							the_post_thumbnail('large-featured');
    						}
    						else {
    						//echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/assets/images/feature-sample.png" />';
    						}
    						?>
    					</div>
    				<div id="content" class="col-md-9 clearfix" role="main">
    					<div class="inner">
    						<?php themeblvd_content_top(); ?>
    
    						<?php while ( have_posts() ) : the_post(); ?>
    
    							<?php get_template_part( 'content', themeblvd_get_part( 'page' ) ); ?>
    
    							<?php themeblvd_page_footer(); ?>
    
    							<?php if ( themeblvd_supports( 'comments', 'pages' ) ) : ?>
    								<?php comments_template( '', true ); ?>
    							<?php endif; ?>
    
    						<?php endwhile; ?>
    
    						<?php themeblvd_content_bottom(); ?>
    					</div><!-- .inner (end) -->
    				</div><!-- #content (end) -->
    
    				<!-- CONTENT (end) -->
    				
    				<?php get_sidebar( 'right' ); ?>
    				
    				</div> <!-- CONTENT container (end) -->
    
    			</div><!-- .grid-protection (end) -->
    		</div><!-- .sidebar_layout-inner (end) -->
    	</div><!-- .#sidebar_layout (end) -->

    I’m glad to know about the sidebar shortcode for cases where we might want to create a layout like this in the Template Builder. It’s an excellent workaround for the columns within columns issue. But, in the case above, the custom php page template seemed like a better idea for the end user.

    However, I need to figure out how to best work with the div classes for columns within columns with custom page templates. I’ll let you know if I get stuck or need some ideas.

    #19928
    Jason Bobich
    Keymaster

    2 – The page template PHP I sent was for and from 2.0.
    … I need to figure out how to best work with the div classes for columns within columns with custom page templates

    What I was trying to explain above is that, both sidebars need to come AFTER the content of the page. For clarity, here’s a picture of page.php of Jump Start v2:

    … Now notice how the call to get_sidebar('left'), in the template file you’re pasting, is in the wrong place?

    This is why you guys are having problems with the column classes. The push/pull is how Bootstrap reorders the display, to allow the left sidebar to sit AFTER the content, but still appear on the left of the screen. But you don’t have to worry anything about push/pull, this is all done for you. All you need to do is worry about structuring your custom file correctly so it matches the image above.

    #19959
    askwpgirl
    Participant

    Yeah, I totally get that. I did it all on purpose. I started with the default page.php template and I MOVED the sidebars AND changed the column classes – And, now you are wondering why the heck did she do that? Well, it seemed to be the only way to create this layout in a custom php page template:

    http://postimg.org/image/itw2k4vpz/

    So, my question is:

    How would you code a custom php page template for this layout that is different from how I coded it?

    Getting the featured image above everything is cake without messing stuff up. Getting the featured image to be only above the content and right sidebar is the trick! 🙂

    —————————————————
    Aside: My layout worked with some screwing around with the CSS, but I don’t want to teach anyone else to do this without checking with you. This layout came to me from a student who got it from a designer. I just don’t want to pass along bad practices. Moving around the sidebars and removing the dynamic classes didn’t seem like a good practice to teach, but I really didn’t know what else to do to get it to work.

    #19961
    Jason Bobich
    Keymaster

    Ok, I think we’re getting somewhere now, and more on the same page.

    Conceptually think about this a little different: The layout you’re drawing out would still be a “Sidebar Left” layout, in the sense we’re talking about the top-level, main layout. What you’re labeling as the “Right Sidebar” in your wireframe is in a different, nested set of columns, and not part of the main layout of the page (if that makes sense).

    Now, keeping this in mind, my questions to you: Does the user need to be able to change between sidebar layouts when using your template? Meaning that “Left Sidebar” (per your wireframe) could be toggled to the left or right of everything? And do you want this top-level sidebar layout to match column widths with the rest of the site?

    #19963
    Jason Bobich
    Keymaster

    I have to get back to working, but for the sake of time, let’s just assume, you want everything to always stay as you’ve drawn it. Top-level layout is always “Sidebar Left”, and that inner “Right Sidebar” can thus display what is configured as the right sidebar for the page.

    Here’s your template file setup for template_example.php —

    https://gist.github.com/themeblvd/95ea037720d257a506f2

    Note: In the template, for the inner columns, I’m using themeblvd_display_sidebar(). If you use the normal get_sidebar(), it’ll mess everything up because this will then factor in column classes cooresponding to the top-level layout. Then, I removed get_sidebar('right') from the bottom because we don’t need it, and get_sidebar('left') still comes at the bottom.

    Note: The class “fixed-sidebar” I added to the inner right sidebar, is what allows the widgets to be styled in a white box, similar to top-level layout’s widgets.

    And here’s some extra stuff for your child theme’s functions.php to get it to be to your specs —

    /**
     * When our template files runs, template_example.php,
     * let's force a sidebar left layout.
     */
    function my_template_sidebar_layout( $layout ) {
    
    	if ( is_page_template( 'template_example.php' ) ) {
    		$layout = 'sidebar_left';
    	}
    
    	return $layout;
    }
    add_filter('themeblvd_sidebar_layout', 'my_template_sidebar_layout');
    
    /**
     * When our template file runs, template_example.php,
     * let's make sure our sidebar layout has the right
     * column widths for the template. 2|10
     */
    function my_template_col_widths( $layouts, $stack ) {
    
    	if ( is_page_template( 'template_example.php' ) ) {
    		$layouts['sidebar_left']['columns'] = array(
    			'content' 	=> "col-{$stack}-10",
    			'left' 		=> "col-{$stack}-2",
    			'right' 	=> ''
    		);
    	}
    
    	return $layouts;
    }
    add_filter('themeblvd_sidebar_layouts', 'my_template_col_widths', 10, 2);
Viewing 15 replies - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.