[Support request] Custom Page Template

[Tobias]

Hello

I would like to create custom page templates for my website. I am in the process of moving my website from Avada to Generatepress.

So far, for custom templates, I did the following:

copy page.php into child theme
rename page.php.
customize page.php according to my wishes

My goal is the following:
I have a first draft of a page template here. I created this page in a normal way:

https://www.tradenundinvestieren.ch/aktien-usa-2021-template/

Now I want to copy the content of this page into a new template. (Later the template pulls data from a database and shows different numbers on each page.) So far (with Avada) I proceeded in such a way that I simply copied the page content from the source code into the template file in the Child Theme to the appropriate place.

I have also tried this with generatepress, but unfortunately I do not succeed that the page content is displayed exactly the same. In the forum I have also already read some posts on this subject, but unfortunately not yet found a solution. I have also tried the way to copy the content-page.php and paste the content here, as described here:
https://generatepress.com/forums/topic/gp-3-0-custom-page-template-how-to/

In both cases it does not work correctly and the result looks like this (done via content-page.php):

https://www.tradenundinvestieren.ch/aktien/usa/test-aktie/

Would be great if you can help me here. 🙂

Tobi

[David]

Hi there,

maybe this topic will help:

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

[Tobias]

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

[David]

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.

[Tobias]

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

[David]

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.

[Author]

Posts