Template page core code

We all like examples when trying to do something for the first time. Here’s a code example of the template page for the Simplest Storefront Demo.

Most WordPressers will have bumped into the “while loop” at the heart of every template.

I’m using the twentyfifteen theme, where I got the starting code from page.php, but it should be almost identical for other themes.

Then I added my stuff (italics). It’s where you’d add all your navigation, graphics, branding etc.

You’ll see I added a form for the three dropdowns. You’ll also notice that whenever any of them change, I “updateRequestString”, which also reopens the page with it. There are also hidden form fields to handle the various url parameters not covered by those dropdowns.

And then there’s that “anonymous” function to deal with handling any url parameters and updating the form fields with them if they were.

Here’s the code:

<?php
// Start the loop.
while ( have_posts() ) : the_post();
?>


<form id="configForm" name="userConfig">
<div style="margin-bottom: 5px;">
<div style="float:left; margin-left:3px; margin-right:3px;">
view by: <br>
<select name="userST" onchange="updateRequestString();">
<option value="popularity">Popularity</option>
<option value="date_created">Newest</option>
</select>
</div>
<div style="float:left; margin-left:3px; margin-right:3px;">
department: <br>
<select name="userDP" onchange="updateRequestString();">
<option value="">(none)</option>
<option value="252819538404952287">Art and Posters</option>
<option value="252290587744666646">Home and Pets</option>
</select>
</div>
<div style="float:left; margin-left:3px; margin-right:3px;">
category: <br>
<select name="userCG" onchange="updateRequestString();">
<option value="">(none)</option>
<option value="196007871454443931">Outer Space</option>
<option value="196691844710546791">Motivating</option>
<option value="196466803266351700">Just Fun</option>
</select>
</div>
<div style="float:left; margin-left:3px; margin-right:3px;">
<br>good searches: dreamy, plymouth, black and white, steampunk
</div>
<div style="clear:both;"></div>
<input type="hidden" name="userSD" value="desc">
<input type="hidden" name="userBG" value="ffffff">
<input type="hidden" name="userTC" value="ngrdzwp_exstp1">
<input type="hidden" name="userPM" value="BIGOFFMONEY">
<input type="hidden" name="userSC" value="hightonridley">
<input type="hidden" name="smid" value="441"> (you need to put in your own page id here, obtained in edit mode from the address bar)
</div>
</form>

<script>
var oNavChoices = document.getElementById('configForm');
var requestString = '';
var QueryString = function() {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString
var query_string = {};
var query = window.location.search.substring(1);
query = query.replace(/\&amp;/g,"&");
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = pair[1];
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [query_string[pair[0]], pair[1]];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(pair[1]);
}
}
if (query_string.pdp) {
oNavChoices.elements.userDP.value = query_string.pdp;
}
if (query_string.pst) {
oNavChoices.elements.userST.value = query_string.pst;
}
if (query_string.pcg) {
oNavChoices.elements.userCG.value = query_string.pcg;
}
if (query_string.psd) {
oNavChoices.elements.userSD.value = query_string.psd;
}
if (query_string.pbg) {
oNavChoices.elements.userBG.value = query_string.pbg;
}
if (query_string.ptc) {
oNavChoices.elements.userTC.value = query_string.ptc;
}
if (query_string.ppm) {
oNavChoices.elements.userPM.value = query_string.ppm;
}
if (query_string.psc) {
oNavChoices.elements.userSC.value = query_string.psc;
}
if (query_string.smid) {
oNavChoices.elements.smid.value = query_string.smid;
}
return query_string;
}();

function updateRequestString () {
requestString = 'http://' + window.location.hostname + window.location.pathname;
if (QueryString.pqs) {requestString += '?pqs=' + QueryString.pqs;} else {requestString += '?pqs=';}
requestString += '&ppg=1';
requestString += '&pst=' + oNavChoices.elements.userST.value;
requestString += '&psd=' + oNavChoices.elements.userSD.value;
requestString += '&pdp=' + oNavChoices.elements.userDP.value;
requestString += '&pcg=' + oNavChoices.elements.userCG.value;
requestString += '&pbg=' + oNavChoices.elements.userBG.value;
requestString += '&ptc=' + oNavChoices.elements.userTC.value;
requestString += '&ppm=' + oNavChoices.elements.userPM.value;
requestString += '&smid=' + oNavChoices.elements.smid.value;
window.open (requestString, '_self');
}
</script>

<?php
// Include the page content template.
get_template_part( 'content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
// End the loop.
endwhile;
?>