Page Templates

  • TraderHowell

    (@spiffysax)


    7 years, 3 months ago

    Greetings,

    I am attempting to make changes to the “Grid Page” template through use of a child theme. I have copied the code exactly from the existing “grid-page.php” to my own “sample-page.php” with the exception of changing:
    Template Name: Grid Page
    to
    Template Name: Sample Page
    While I would expect the front-end output to look the same, they did not. There is now a large white space on the left of the grid, and the grid is overflowing off the right side of the screen, as seen here. After troubleshooting by eliminating the use of the child theme and making direct edits, it seems that the problem occurs from changing “grid-page.php” to “sample-page.php”, which leads me to believe that there is some specific css targeting going on.

    That being said, I can only seem to find two relevant lines of css:

    body[class*="grid-page"] .content-area,
.front-page-block:nth-of-type(2n+1),
.post-type-archive-jetpack-testimonial .content-area,
.widget-area,
.widget-area:before {
	background: #f7f7f7;
}

body[class*="grid-page"] .grid-area .wrapper,
	body.post-type-archive-jetpack-testimonial .grid-area .wrapper,
	.archive .hentry:before,
	.blog .hentry:before,
	.comment-list .comment:before,
	.comment-list .pingback:before,
	.footer-widget-area .wrapper,
	.jp-relatedposts-items-visual .jp-relatedposts-post:before,
	.page-header,
	.search .hentry:before,
	.site-main .comment-navigation,
	.site-main .paging-navigation,
	.site-main .post-navigation,
	.widget-area .widget {
		padding-right: 36px;
		padding-left: 36px;
	}

    Replacing “grid-page” with “sample-page” within these lines doesn’t seem to solve the problem. My guess is that there is css syntax being used that I don’t understand. If anyone can point me in the right direction for solving this issue, it would be greatly appreciated.

    Thanks in advance,

    Brendan

Viewing 3 replies - 1 through 3 (of 3 total)
  • Chad Chadbourne

    (@shireling)

    7 years, 3 months ago

    Hi Brendan!

    You were definitely on the right track, those two styles are part of the problem 🙂

    The other part is the way the some classes are being added to the body tag of the page, depending on the template.

    In Sequential’s /inc/extras.php file, there’s a function that adds a full-width-content class, and an extra-spacing class – those trigger some additional CSS.

    To create a similar effect for your new template in your child theme, add this to the child theme’s functions.php file:

    /**
 * Adds additional custom classes to the array of body classes.
 *
 * @param array $classes Classes for the body element.
 * @return array
 */
function additional_sequential_body_classes( $classes ) {
	// Adds a class of full-width-layout to blogs depending on the page template.
	if ( is_page_template( 'page-templates/sample-page.php' ) ) {
		$classes[] = 'full-width-layout';
	}

	// Adds a class of extra-spacing to blogs depending on the page template.
	if ( is_page_template( 'page-templates/sample-page.php' ) ) {
		$classes[] = 'extra-spacing';
	}

	return $classes;
}
add_filter( 'body_class', 'additional_sequential_body_classes' );

    That will add the missing CSS classes on your page template. Then, to make the CSS you mentioned above also apply to your template, add the following two CSS styles:

    
/*Styles to make the new custom page template's color and spacing match the original Grid Template*/
body[class*="sample-page"] .content-area {
    background: #f7f7f7;
}

body[class*="sample-page"] .grid-area .wrapper {
    padding-right: 36px;
    padding-left: 36px;
}

    You can add this CSS in your child theme’s style.css file, or you can use the Additional CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module.

    You’ll notice that both bits of code use the name of your template specifically – so if you change it to something other than “sample” down the road, you’ll want to update your child theme code accordingly.

    Thread Starter TraderHowell

    (@spiffysax)

    7 years, 3 months ago

    Chad,

    Thank you! That did the trick!

    Thanks,

    Brendan

    Chad Chadbourne

    (@shireling)

    7 years, 3 months ago

    You’re welcome!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Page Templates’ is closed to new replies.