Custom Page Template

Hi there,

maybe this topic will help:

https://generatepress.com/forums/topic/creating-a-custom-page-template/#post-1875566

Hello David

Thank you very much for your help.

I proceeded exactly as described in the post you linked. This is also how I proceeded before and it basically works.

The problem I have:

I can now write my own content in the content-test.php. However, certain functions and shortcodes and so on of the theme and plugins do not work.

For example, if I want to use a simple 4 column layout, like here:
https://www.tradenundinvestieren.ch/test-template/

If I switch to the code editor in this page and then copy the page content and paste it into content-test.php, the columns do not work.

<!-- wp:generateblocks/grid {"uniqueId":"fc5a5cc0","columns":4,"isDynamic":true} -->
<!-- wp:generateblocks/container {"uniqueId":"64124365","isGrid":true,"gridId":"fc5a5cc0","width":25,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true} -->
<!-- wp:paragraph -->
<p>111</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"d5a5fe9f","isGrid":true,"gridId":"fc5a5cc0","width":25,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true} -->
<!-- wp:paragraph -->
<p>222</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"add1fde6","isGrid":true,"gridId":"fc5a5cc0","width":25,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true} -->
<!-- wp:paragraph -->
<p>333</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"6af2c9f3","isGrid":true,"gridId":"fc5a5cc0","width":25,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true} -->
<!-- wp:paragraph -->
<p>444</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

I guess this is not enough and I would need to copy the rendered html from the source code. So I copied the following code from the source code of this page:

<div class="gb-grid-wrapper gb-grid-wrapper-fc5a5cc0"><div class="gb-grid-column gb-grid-column-64124365"><div class="gb-container gb-container-64124365"><div class="gb-inside-container"><p>111</p></div></div></div><div class="gb-grid-column gb-grid-column-d5a5fe9f"><div class="gb-container gb-container-d5a5fe9f"><div class="gb-inside-container"><p>222</p></div></div></div><div class="gb-grid-column gb-grid-column-add1fde6"><div class="gb-container gb-container-add1fde6"><div class="gb-inside-container"><p>333</p></div></div></div><div class="gb-grid-column gb-grid-column-6af2c9f3"><div class="gb-container gb-container-6af2c9f3"><div class="gb-inside-container"><p>444</p></div></div></div></div>

This also does not work correctly and now looks like this:
https://www.tradenundinvestieren.ch/aktien/usa/test-aktie-2/

I just want to create a page as a template and then copy the content of this page as html 1 to 1 into the template. Does this work?

Best regards
Tobi

There are two things required:

1. the source code HTML - which you have.
2. the CSS that would have been generated for that layout.

For the CSS, if you build the layout you require on a standard page, and view on the front end.
Check the Network requests you will see a dynamically generated styles-###.css file which is for the GenerateBlocks content. You would need to make a copy of the CSS, save it to a static CSS file and enqueue it for those templates.

Hello David

Thanks for your information... this has already helped me a lot.

Three more questions about this:

1.

I have included the Generate Blocks CSS file via functions.php, with the following function.

// function to enqueue custom css file
function enqueue_my_custom_styles() {
    wp_enqueue_style( 'test-template-style-css', '[CSS URL]', false ); 
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_styles' );

Is this the right way to enqueue a CSS File? Right now the file is enqueued on all pages, right? Is there a way to include this file only in the corresponding template?

2. The way you described worked perfectly. However, since I use other plugins, such as the chart plugin titled "WP Charts and Graphs", I would have to include the CSS file of the plugin as well, correct? However, that did not work. The chart is not displayed.

3. I actually use autoptimize to optimize the CSS files. For the experiments above, I disabled autoptimize. When I enable autoptimize, all CSS files are combined into one autoptimize stylesheet. I have now enqueued the autoptimize stylesheet instead of the GenerateBlocks Stylesheet. The blocks/columns work here, too. But the charts do not work.

Do you have a an idea how to integrate the charts into the template?

I have created the following static page for testing:
https://www.tradenundinvestieren.ch/test-template/

... and then copied the content into the template, here:
https://www.tradenundinvestieren.ch/aktien/usa/test-aktie-2/

You can see, that the chart is not displayed...

Thanks a lot...
Tobi

1. Thats correct, and you can use conditional tags to load it only on that specific page template like so:

function enqueue_my_custom_styles() {
    if ( is_page_template( 'your-page-template-slug' ) ) {
        wp_enqueue_style( 'test-template-style-css', '[CSS URL]', false );
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_styles' );

2. and 3. Hmmm.... if i use the developers tools to compare the output, both are rendering the <div id="pwp-charts-xxxxxx"> element - so the shortcode ( i assume the plugin uses ? ) is working, but on the template page there is no iframe and the canvas element it generates is empty. I think you would need to check with the plugin developer as to whats going on there. Theres probably a JS file that needs enqueuing also.