Extend Lay Theme with standard wordpress API page template?`

[jodldoe]

Hey! Loving the theme, great work.

I was wondering – is there a best practice to extend the theme with a page template that just displays data directly via the Wordpress PHP API, like a page-{id}.php that wp_queries all titles and links from a particular category?

I was looking through the LAY template files and got a bit confused at <%= showContent() %> – how can I insert data from a wp_query call in the Lay gridder layout in a template file?

Thanks!

[arminunruh]

Hey jodldoe!
Hm no that doesn't work with Lay Theme. Lay Theme's frontend is a javascript application. So it doesn't use any php files like page-{id}.php :/

[jodldoe]

Thanks Armin! Where there is will, there is a way :) Passing html code generated through PHP in the main template file through a simple variable in showContent(string) somehow permits me to do what I needed (show an index of projects on a page), but of course it won't survive the next update. Lets see if theres a better way.

[arminunruh]

Ok, I see

http://laytheme.com/documentation.html#custom-javascript
You could also fetch your data using wp-api. http://v2.wp-api.org/
That's what lay theme uses.

In this case it's pretty slow, cause first I fetch all posts, then I fetch each featured image (project thumbnails) and that just takes long. :/

<script>
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
	if(type == "page" && obj.id == 20){
		//fetch projects
		jQuery.getJSON(frontendPassedData.wpapiroot+'wp/v2/posts/', function(result){
			console.log(result);
			for(var i=0; i<result.length; i++){
				var fi_id = result[i].featured_image;
				jQuery.getJSON(frontendPassedData.wpapiroot+'wp/v2/media/'+fi_id, function(result){
					console.log(result);
				});
			}
		});
	}
});
</script>

But maybe you don't need all the featured images but just the project titles. That's faster:

<script>
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
	if(type == "page" && obj.id == 20){
		//fetch projects
		jQuery.getJSON(frontendPassedData.wpapiroot+'wp/v2/posts/', function(result){
			for(var i=0; i<result.length; i++){
				console.log(result[i].title.rendered);
			}
		});
	}
});
</script>