Skip Navigation

[Resolved] Using a view in a content template like a page builder – no posts

This thread is resolved. Here is a description of the problem and solution.

Problem:

Display a content template with PHP codes.

Solution:

Create a content template(ID: 123), design it with blocks editor, setup the static contents.

<?php echo render_view_template( 123); ?>

Relevant Documentation:

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 36 replies, has 3 voices.

Last updated by martinE-4 8 months, 2 weeks ago.

Assigned support staff: Luo Yang.

Author
Posts
#1517191

I have successfully created a 'view', "footer-widgets" using the Views plugin and the Blocks editor to create the loop item which is my footer. I use it to provide a nice 3 column grid which I find easy to control the responsiveness using a combination of the container and grid blocks. I like the column display controls on mobile and the easy font size changes as well as the nice background image I can put in the container block. There is no dynamic data, just static text data in my footer.

I then created a simple content template which simply shows the view: [wpv-view name="footer-widgets"]

My question is if I am doing this the best way (ie. a view with static text only, like a page builder, no dynamic fields). I then have to put this view in a content template with the shortcode [wpv-view name="footer-widgets" limit="1"].
Then I use the php line below to display my content template in the appropriate place.

My View is on 'Posts' with a limit of 1 (otherwise it displays my nice footer as many times as there are posts). I am using GeneratePress Premium and I create an element to hook my view to appear on every page just before the footer.

I tried using the shortcode [wpv-view name="footer-widgets"] alone to display the view directly without going through the content template step, but although that almost worked (on some pages, the html in my view was ignored and there were no columns or other formatting or responsiveness etc). Curiously it worked on some pages.

What seems to work on 100% of my pages and different post types and archives etc is the php code embedded in my GeneratePress hook element:

<?php echo render_view_template( 2990, $mypost ); ?>

What do you think? Am I doing the right thing to display my static 3 column footer view? Is this the best way to use Toolset like a page builder? And why didn't the shortcode alone work in my GP Hook?

#1517951

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Hello,

Yes, you are right, Views is for querying posts and displaying dynamic fields/taxonomies.
In you case, you just need to display the static content, you can use just one content template.

For example:
1) Create a content template(ID: 123), design it with blocks editor, setup the static contents.
2) Then use GeneratePress hook element to display above content template directly, for example:

<?php echo render_view_template( 123); ?>
#1519159

Excellent, this simplifies what I'm doing and makes Toolset a powerful page builder (when combined with the GeneratePress Premium theme which is only $39 for unlimited websites)! I am very impressed.

My issue is resolved now. Thank you!

#1519549

Unfortunately I am still having the problem on some pages with the styling being lost in my nice 3 column footer.

On the pages where it is broken, I am seeing just the content of my content template without any of the formatting I added with the grid block and other blocks. So it is just a linear listing with line breaks of my textual content.

This happens on my 'Template for Pages' which also has a view called 'Related Pages'. When the view is empty, that seems to be when the footer content template fails. Curiously, if I remove the view from the Content Template for Pages, every page fails. So the view when included and when it has items to show, 'fixes' the problem and my footer shows with no error. How weird is this? ( I will try and think of a fake 'blank' view with some items that are there but don't show up which I can include to see if I can work around my bug)

The browser inspect on a typical 'fail' page throws an error - unexpected EOF (line 11 below):

<div class="wp-block-toolset-blocks-container tb-container" data-toolset-blocks-container="c5dd468167e9a2552c9350797fcd8237">
<h2 class="tb-heading has-text-color has-background" data-toolset-blocks-heading="bcceea98b1cbd0debdad2dac4c625d39">ICASC/JMP Strategic Plan</h2>
</div>

<div class="wp-block-toolset-blocks-container tb-container" data-toolset-blocks-container="734feb0efec6987233525d232d11e77e"><div><img src="<em><u>hidden link</u></em>" style="padding-top:0px;padding-bottom:0px;"></div>
<p><div class="toolset-blocks-styling-tmp" style="display:none;">QG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3ODJweCkgeyAudGItY29udGFpbmVyW2RhdGEtdG9vbHNldC1ibG9ja3MtY29udGFpbmVyPSJjNWRkNDY4MTY3ZTlhMjU1MmM5MzUwNzk3ZmNkODIzNyJdIHsgZGlzcGxheTogbm9uZTsgfSB9IC53cHYtdmlldy1vdXRwdXRbZGF0YS10b29sc2V0LXZpZXdzLXZpZXctZWRpdG9yPSJjZjJmZWNmODY2N2U2ODJmNTQwMTgwYzhlMjRjZjc2ZiJdIC5qcy13cHYtbG9vcC13cmFwcGVyID4gLnRiLWdyaWQgeyBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IG1pbm1heCgwLCAwLjMzMzNmcikgbWlubWF4KDAsIDAuMzMzM2ZyKSBtaW5tYXgoMCwgMC4zMzMzZnIpO2dyaWQtYXV0by1mbG93OiByb3cgfSAudGItY29udGFpbmVyW2RhdGEtdG9vbHNldC1ibG9ja3MtY29udGFpbmVyPSIxOWM0NDZmMzNiMjg3OWYyMWQ0NTQ2NGVhOGMyYTc5ZCJdIHsgcGFkZGluZzogMDttYXJnaW46IDAgMjBweCAwIDIwcHg7IH0gLnRiLWNvbnRhaW5lcltkYXRhLXRvb2xzZXQtYmxvY2tzLWNvbnRhaW5lcj0iNzM0ZmViMGVmZWM2OTg3MjMzNTI1ZDIzMmQxMWU3N2UiXSB7IHBhZGRpbmc6IDA7bWFyZ2luLXRvcDogMTVweDsgfSAudGItY29udGFpbmVyW2RhdGEtdG9vbHNldC1ibG9ja3MtY29udGFpbmVyPSJjNWRkNDY4MTY3ZTlhMjU1MmM5MzUwNzk3ZmNkODIzNyJdIHsgcGFkZGluZzogMDsgfSBoMi50Yi1oZWFkaW5nW2RhdGEtdG9vbHNldC1ibG9ja3MtaGVhZGluZz0iYmNjZWVhOThiMWNiZDBkZWJkYWQyZGFjNGM2MjVkMzkiXSAgeyBjb2xvcjogcmdiYSggMjU1LCAyNTUsIDI1NSwgMSApO2JhY2tncm91bmQtY29sb3I6IHJnYmEoIDIxOCwgNTMsIDE5LCAxICk7cGFkZGluZzogMTVweDttYXJnaW46IDA7IH0gaDIudGItaGVhZGluZ1tkYXRhLXRvb2xzZXQtYmxvY2tzLWhlYWRpbmc9ImJjY2VlYTk4YjFjYmQwZGViZGFkMmRhYzRjNjI1ZDM5Il0gYSAgeyBjb2xvcjogcmdiYSggMjU1LCAyNTUsIDI1NSwgMSApOyB9IEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNjAwcHgpIGFuZCAobWF4LXdpZHRoOiA3ODFweCkgeyAudGItY29udGFpbmVyW2RhdGEtdG9vbHNldC1ibG9ja3MtY29udGFpbmVyPSJjNWRkNDY4MTY3ZTlhMjU1MmM5MzUwNzk3ZmNkODIzNyJdIHsgZGlzcGxheTogbm9uZTsgfSB9IEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzgxcHgpIHsgLndwdi12aWV3LW91dHB1dFtkYXRhLXRvb2xzZXQtdmlld3Mtdmlldy1lZGl0b3I9ImNmMmZlY2Y4NjY3ZTY4MmY1NDAxODBjOGUyNGNmNzZmIl0gPiAudGItZ3JpZC1jb2x1bW46bnRoLW9mLXR5cGUoM24gKyAxKSB7IGdyaWQtY29sdW1uOiAxIH0gLndwdi12aWV3LW91dHB1dFtkYXRhLXRvb2xzZXQtdmlld3Mtdmlldy1lZGl0b3I9ImNmMmZlY2Y4NjY3ZTY4MmY1NDAxODBjOGUyNGNmNzZmIl0gPiAudGItZ3JpZC1jb2x1bW46bnRoLW9mLXR5cGUoM24gKyAyKSB7IGdyaWQtY29sdW1uOiAyIH0gLndwdi12aWV3LW91dHB1dFtkYXRhLXRvb2xzZXQtdmlld3Mtdmlldy1lZGl0b3I9ImNmMmZlY2Y4NjY3ZTY4MmY1NDAxODBjOGUyNGNmNzZmIl0gPiAudGItZ3JpZC1jb2x1bW46bnRoLW9mLXR5cGUoM24gKyAzKSB7IGdyaWQtY29sdW1uOiAzIH0gLndwdi12aWV3LW91dHB1dFtkYXRhLXRvb2xzZXQtdmlld3Mtdmlldy1lZGl0b3I9ImNmMmZlY2Y4NjY3ZTY4MmY1NDAxODBjOGUyNGNmNzZmIl0gLmpzLXdwdi1sb29wLXdyYXBwZXIgPiAudGItZ3JpZCB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogbWlubWF4KDAsIDAuMzMzM2ZyKSBtaW5tYXgoMCwgMC4zMzMzZnIpIG1pbm1heCgwLCAwLjMzMzNmcik7Z3JpZC1hdXRvLWZsb3c6IHJvdyB9IC50Yi1jb250YWluZXJbZGF0YS10b29sc2V0LWJsb2Nrcy1jb250YWluZXI9ImM1ZGQ0NjgxNjdlOWEyNTUyYzkzNTA3OTdmY2Q4MjM3Il0geyAgfSBoMi50Yi1oZWFkaW5nW2RhdGEtdG9vbHNldC1ibG9ja3MtaGVhZGluZz0iYmNjZWVhOThiMWNiZDBkZWJkYWQyZGFjNGM2MjVkMzkiXSAgeyBwYWRkaW5nOiAxMHB4IDVweCAxMHB4IDVweDttYXJnaW46IDA7IH0gIH0gQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1OTlweCkgeyAud3B2LXZpZXctb3V0cHV0W2RhdGEtdG9vbHNldC12aWV3cy12aWV3LWVkaXRvcj0iY2YyZmVjZjg2NjdlNjgyZjU0MDE4MGM4ZTI0Y2Y3NmYiXSAgPiAudGItZ3JpZC1jb2x1bW4geyBncmlkLWNvbHVtbjogMSAhaW1wb3J0YW50IH0gLndwdi12aWV3LW91dHB1dFtkYXRhLXRvb2xzZXQtdmlld3Mtdmlldy1lZGl0b3I9ImNmMmZlY2Y4NjY3ZTY4MmY1NDAxODBjOGUyNGNmNzZmIl0gLmpzLXdwdi1sb29wLXdyYXBwZXIgPiAudGItZ3JpZCB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogbWlubWF4KDAsIDFmcik7Z3JpZC1hdXRvLWZsb3c6IHJvdyB9IC50Yi1jb250YWluZXJbZGF0YS10b29sc2V0LWJsb2Nrcy1jb250YWluZXI9IjczNGZlYjBlZmVjNjk4NzIzMzUyNWQyMzJkMTFlNzdlIl0gcCB7IGZvbnQtc2l6ZTogMTNweDsgfSAudGItY29udGFpbmVyW2RhdGEtdG9vbHNldC1ibG9ja3MtY29udGFpbmVyPSJjNWRkNDY4MTY3ZTlhMjU1MmM5MzUwNzk3ZmNkODIzNyJdIHsgZGlzcGxheTogbm9uZTsgfSBoMi50Yi1oZWFkaW5nW2RhdGEtdG9vbHNldC1ibG9ja3MtaGVhZGluZz0iYmNjZWVhOThiMWNiZDBkZWJkYWQyZGFjNGM2MjVkMzkiXSAgeyBwYWRkaW5nOiA1cHg7IH0gIH0g</div>
<p><script class='toolset-blocks-script-tmp' type='text/javascript'>
if ( ! document.getElementById( 'toolset-blocks-styling' ) ) {
		document.head.insertAdjacentHTML(
			'beforeend',
			'</p>
<style id="' + 'toolset-blocks-styling' + '"></style>
<p>' );
}
		var style = document.getElementById( 'toolset-blocks-styling' );
		var styleTmp = document.querySelector( '.toolset-blocks-styling-tmp' );</p>
<p>		if( style && styleTmp ) {
			var currentStyle = style.innerHTML;
			var newStyle = window.atob( styleTmp.innerHTML );</p>
<p>			if( currentStyle.indexOf( newStyle ) !== -1 ) {
				// newStyle is already part of currentStyle.
				// Do Nothing.

There is also another page type which fails consistently (100% of cases) and is using a different content template (see browser code error in line 8 - same '</p> ) This custom post (directory item) template has no other views in it (but does have a map block which makes it different from other pages on my site which work) and consistently fails for each post :

<div class="wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top" data-toolset-blocks-grid-column="d751713988987e9331980363e24189ce">
<div class="tb-field tb-field--left" data-toolset-blocks-field="a126f9e73072c83255356553ba239279"><img width="150" height="150" src="<em><u>hidden link</u></em>" class="attachment-medium_large" alt="africacentre" title="africacentre" style="" srcset="<em><u>hidden link</u></em> 150w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 1536w, <em><u>hidden link</u></em> 2048w" sizes="(max-width: 150px) 100vw, 150px" /></div>
<p><div class="toolset-blocks-styling-tmp" style="display:none;">LnRiLWNvbnRhaW5lcltkYXRhLXRvb2xzZXQtYmxvY2tzLWNvbnRhaW5lcj0iZWMwMWU3YTRlMTM1Y2Q4ZGM4MzlmN2JiMmIyMGU5MzEiXSB7IHBhZGRpbmc6IDAgMjBweCAwIDIwcHg7bWFyZ2luOiAxMHB4IDAgMCAwOyB9IC50Yi1ncmlkW2RhdGEtdG9vbHNldC1ibG9ja3MtZ3JpZD0iNjZiMTM1Mzg4NWE3YzJmYWU4MTNlMmRiM2ZlNzQ1ZjQiXSB7IGdyaWQtdGVtcGxhdGUtY29sdW1uczogbWlubWF4KDAsIDAuNWZyKSBtaW5tYXgoMCwgMC41ZnIpO2dyaWQtY29sdW1uLWdhcDogMjBweDtncmlkLWF1dG8tZmxvdzogcm93IH0gLnRiLWZpZWxkW2RhdGEtdG9vbHNldC1ibG9ja3MtZmllbGQ9ImExMjZmOWU3MzA3MmM4MzI1NTM1NjU1M2JhMjM5Mjc5Il0geyBtYXJnaW46IDA7IH0gLnRiLWdyaWQtY29sdW1uW2RhdGEtdG9vbHNldC1ibG9ja3MtZ3JpZC1jb2x1bW49ImQ3NTE3MTM5ODg5ODdlOTMzMTk4MDM2M2UyNDE4OWNlIl0geyBkaXNwbGF5OiBmbGV4OyB9IC50Yi1jb250YWluZXJbZGF0YS10b29sc2V0LWJsb2Nrcy1jb250YWluZXI9ImU2MDcwYzFhYzM5NzQ4ZDQ4MDhlOTI0NmEzODczODU1Il0geyBwYWRkaW5nOiAwOyB9IGgyLnRiLWhlYWRpbmdbZGF0YS10b29sc2V0LWJsb2Nrcy1oZWFkaW5nPSIxMTFlZmU1NTBkNmMyNGUzMzY5ZWM2OTAxNWE0ZjBmYiJdICB7IGJhY2tncm91bmQtY29sb3I6IHJnYmEoIDI0NiwgMTk2LCA1MCwgMSApO3BhZGRpbmc6IDE1cHggMjBweCAxNXB4IDIwcHg7bWFyZ2luOiAyMHB4IDAgMCAwOyB9IEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzgxcHgpIHsgLnRiLWdyaWRbZGF0YS10b29sc2V0LWJsb2Nrcy1ncmlkPSI2NmIxMzUzODg1YTdjMmZhZTgxM2UyZGIzZmU3NDVmNCJdIHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBtaW5tYXgoMCwgMC41ZnIpIG1pbm1heCgwLCAwLjVmcik7Z3JpZC1jb2x1bW4tZ2FwOiAxMHB4O2dyaWQtYXV0by1mbG93OiByb3cgfSAudGItZ3JpZC1jb2x1bW5bZGF0YS10b29sc2V0LWJsb2Nrcy1ncmlkLWNvbHVtbj0iZDc1MTcxMzk4ODk4N2U5MzMxOTgwMzYzZTI0MTg5Y2UiXSB7IGRpc3BsYXk6IGZsZXg7IH0gIH0gQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1OTlweCkgeyAudGItY29udGFpbmVyW2RhdGEtdG9vbHNldC1ibG9ja3MtY29udGFpbmVyPSJlYzAxZTdhNGUxMzVjZDhkYzgzOWY3YmIyYjIwZTkzMSJdIHsgcGFkZGluZy1yaWdodDogMTBweDtwYWRkaW5nLWxlZnQ6IDEwcHg7IH0gLnRiLWdyaWRbZGF0YS10b29sc2V0LWJsb2Nrcy1ncmlkPSI2NmIxMzUzODg1YTdjMmZhZTgxM2UyZGIzZmU3NDVmNCJdIHsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBtaW5tYXgoMCwgMC41ZnIpIG1pbm1heCgwLCAwLjVmcik7Z3JpZC1jb2x1bW4tZ2FwOiAxMHB4O2dyaWQtYXV0by1mbG93OiByb3cgfSAudGItZ3JpZFtkYXRhLXRvb2xzZXQtYmxvY2tzLWdyaWQ9IjY2YjEzNTM4ODVhN2MyZmFlODEzZTJkYjNmZTc0NWY0Il0gPiAudGItZ3JpZC1jb2x1bW46bnRoLW9mLXR5cGUoMm4gKyAxKSB7IGdyaWQtY29sdW1uOiAxIH0gLnRiLWdyaWRbZGF0YS10b29sc2V0LWJsb2Nrcy1ncmlkPSI2NmIxMzUzODg1YTdjMmZhZTgxM2UyZGIzZmU3NDVmNCJdID4gLnRiLWdyaWQtY29sdW1uOm50aC1vZi10eXBlKDJuICsgMikgeyBncmlkLWNvbHVtbjogMiB9IC50Yi1ncmlkLWNvbHVtbltkYXRhLXRvb2xzZXQtYmxvY2tzLWdyaWQtY29sdW1uPSJkNzUxNzEzOTg4OTg3ZTkzMzE5ODAzNjNlMjQxODljZSJdIHsgZGlzcGxheTogZmxleDsgfSBoMi50Yi1oZWFkaW5nW2RhdGEtdG9vbHNldC1ibG9ja3MtaGVhZGluZz0iMTExZWZlNTUwZDZjMjRlMzM2OWVjNjkwMTVhNGYwZmIiXSAgeyBwYWRkaW5nOiAxMHB4O21hcmdpbjogMDsgfSAgfSA=</div>
<p><script class='toolset-blocks-script-tmp' type='text/javascript'>
if ( ! document.getElementById( 'toolset-blocks-styling' ) ) {
		document.head.insertAdjacentHTML(
			'beforeend',
			'</p>
<style id="' + 'toolset-blocks-styling' + '"></style>
<p>' );
}
		var style = document.getElementById( 'toolset-blocks-styling' );

I would appreciate any suggestions you might have. This is a local site but I could put it in a duplicator package for you if you like. I did this for you once before with my query_var problem.

#1519727

Update: after inserting a 'fake' view into all the content templates I use on my site (the view simply displays a post title with limit=1) and then hiding the loop item so I can't actually see it, then my content template for the footer displays fine everywhere.

So it seems we have a bug...

I guess I should send you my site, so you can get what you need?

#1520185

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

I have tried it in my localhost with a fresh WordPress installation + the latest version of Toolset Plugins:
1) Design a content template with grid block
2) Put the PHP codes I mentioned above into theme file "footer.php" directly.

It works fine, there might be other compatibility issue in your website, please provide a full copy of your website in below private message box, you can put the duplicator package into your own google drive disk, share the link only.

Also point out the problem page URL and content template URL, where I can edit your PHP codes, I need to test and debug it in my localhost, thanks

#1524459

Luo, Sorry to bother you but I've been spending last 2 hours trying to figure out why the responsiveness of this page alone breaks:
hidden link

All my other pages in the whole site work when you shrink it to mobile size except this one. I don't know if you have time to look at it but it is driving me crazy. I think the only thing different on this one from the other ones which are successfully responsive like
hidden link
which use the same Archive for ASC template is the number of posts in the view is larger. Thanks.

#1525179

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Luo is on holiday today. He will get in touch with you tomorrow as soon as you will back to work.

#1525569

Luo, don't worry about the responsiveness issue on the field-studies page. I'm working on it. I think it is just a css issue with some of my code so I don't think you should spend your time on it.

Let's just worry about the 'Fake ' view problem above, sorry.

#1525965

Luo, I'm seeing a problem with my footer on the Resource Library page and Directory page. It's formatted but the columns are vertical instead of side by side for desktop:

hidden link
hidden link

Pic attached.

#1526099

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Thanks for the details, I am downloading the files, will update here if there is any found

#1526101

Thanks so much! I'll stay available.

#1526133

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Q1) For the question:
why the responsiveness of this page alone breaks:
hidden link

I have tried it in my localhost, it works fine, it is displaying the columns as vertical in mobile size, see my screenshot mobile2.JPG

Is it the same issue you mentioned above? What do you expect to see?

q2) I'm seeing a problem with my footer on the Resource Library page and Directory page

I don't see the problem in my localhost with desktop size browser window, see my screenshot desktop2.JPG

It works fine, and display the columns side by side, there might be cache problem in your website, please try to clear your browser cache or try with another browser, and test again.

#1526157

Yes, that is showing correctly for desktop and mobile in your screenshots. Did you check the URL's I gave you? Sigh. I'm still having problem with Resource Library and Directory here. Even 'Fake' view add to the Pages (they don't use a content template I built them write in the blocks editor).

I cleared cache in Safari and tried Chrome but no difference.

Did you try taking out my 'Fake View' block from the page template to make the problem come back? I think I left it in didn't I?

#1526159

I wonder if today's update to the newest Views plugin affected anything?