Full width custom page templates

Sparkling
1

Hi, I need to customize the full width (no sidebar) template. However, the customized template will not display full width…even if I just save the template and rename it… it still won’t work. It will only work if it’s named page-fullwidth.php.

I think it might have something to do with a function called sparkling_child_content_width() and maybe another function, but I don’t know how to modify the function in the child theme functions file to make my custom template display full width without a sidebar.

Any help would be much appreciated. Thanks!

2

I’m still needing help with this issue. Anybody out there who knows how to modify full width template?

3

There is way too much that you could do wrong, so I can’t give you a proper answer without seeing your code.

Could you please post file name you are trying to use and code you have in that file.

Content width is defined via Parent theme functions.php but it is important for content that depends on it such as embeds, jetpack gallery and others. For regular content it won’t do anything.

4

This is the full width template saved as page-fullwidth-test1.php. I uploaded it and tried to use it (without making any customizations to the template) and it still won’t work unless it’s name page-fullwidth.php. Even when I make customizations, the original template works. However, I don’t want customizations on every full width page, only some pages. That’s why I tried to create a new full width template.

Because I’m on a tight deadline with this project, I did find a temporary workaround or hack solution. I created a custom header file. The last line of code in my custom header is<div id=“content” class=“main-content-inner col-sm-12 col-md-12”> instead of <div id=“content” class=“main-content-inner col-sm-12 col-md-8 <?php echo of_get_option( ‘site_layout’ ); ?>”>. This solved the problem.

I use this theme on multiple sites, so I would like to know how to properly do this.

Thanks for your help!

5

code from page-fullwidth-test1.php

<?php
/**
 * Template Name: Full-width(test 1)
 *
 * This is the template that displays full width page without sidebar
 *
 * @package sparkling
 */

get_header(); ?>
<div id="content" class="site-content">
	<div id="primary" class="content-area col-sm-12 col-md-12">
		<main id="main" class="site-main" role="main">

			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

				<?php
					// If comments are open or we have at least one comment, load up the comment template
					if ( comments_open() || '0' != get_comments_number() ) :
						comments_template();
					endif;
				?>

			<?php endwhile; // end of the loop. ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>
6

The latest theme version which is now only available on Github uses completely different approach for full-width template. You can see it here.

I strongly recommend to download and start using this version instead of trying to hack the old one. This version will be available via WordPress.org within few days.

7

Thanks!

8

Hi, I downloaded all of the files from github and updated my parent theme. I used the new page-fullwidth.php template to create a full width child theme template. All I did was rename the file page-fullwidth-test1.php, but it still didn’t work. I figured out that I had to edit the functions.php file by adding my template to two functions (see below). My question is how do I add this modification to the child theme functions.php file?

/**
 * Set the content width for full width pages with no sidebar.
 */
function sparkling_content_width() {
  if ( is_page_template( 'page-fullwidth.php' ) || is_page_template( 'front-page.php' ) || is_page_template( 'page-fullwidth-test1.php' ) ) {
    global $content_width;
    $content_width = 1008; /* pixels */
  }
}
add_action( 'template_redirect', 'sparkling_content_width' );

if ( ! function_exists( 'sparkling_main_content_bootstrap_classes' ) ) :
/**
 * Add Bootstrap classes to the main-content-area wrapper.
 */
function sparkling_main_content_bootstrap_classes() {
	if ( is_page_template( 'page-fullwidth.php' ) || is_page_template( 'page-fullwidth-test1.php' ) ) {
		return 'col-sm-12 col-md-12';
	}
	return 'col-sm-12 col-md-8';
}
endif; // sparkling_main_content_bootstrap_classes