Create a Portfolio Template Page

BEFORE YOU START CHANGING THINGS…..BACK IT ALL UP FIRST !

When it came to creating my Portfolio Template Page, I wanted it to be simple yet effective.

Please note this is for use within a Genesis child Theme

There are a bucket full of ways of achieving the same results.

And here they are-

• Install a plugin Genesis Portfolio-Pro or Genesis Simple Portfolio.
• Integrate a Javascript library like Masonry, Packery or isotope.
• Some themes ( Pro – html5) come with the Portfolio already done, some don’t so check before you install or purchase.
• Click, Lick and Paste someone else’s code and spend half the day deleting styles, restyling, re configuring, pulling your hair out and kicking the cat (just a figure of speech, I don’t own a cat).

Or you could just write your own Portfolio Template Page and here’s mine.

So, to make life a bit easier for me, I wrote some code myself to do what I wanted it to do and here is the finished Project, with the ubiquitous image below.

It may look a little different now because I like to play, but the “template page” code will be primarily the same and to be honest the following snippet of code is only a foundation for you to build upon .

So lets get started.

Create a Portfolio Template Page in the Genesis Framework

We are going to create just one file and that file will be placed inside our Child Theme root folder, so for example →

Lets keep it stupid simple and open up our text editor, I use SublimeText it’s a brilliant visually enticing editor.

Create a new file and call it projects-page.php , then save it to you desktop – it doesn’t need to be name that, it could be portfolio-page.php, the idea here is to name it anything-page.php as long as it is -page.php.

Next, in that page copy the following text-

<?php /** * Template Name: Projects Page * Description: Used as a page template to show page contents, followed by a loop * through the "Portfolio" category * */ // This gives the page a full width layout add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); // Add our custom loop add_action( 'genesis_loop', 'gecko_grafix_project_loop' ); function gecko_grafix_project_loop() { $args = array( 'category_name' => 'portfolio', // replace with your category slug
		'orderby'       => 'post_date',
		'order'         => 'DESC',
		'posts_per_page'=> '18', // overrides posts per page in theme settings
	);
	$loop = new WP_Query( $args );
	if( $loop->have_posts() ) {
		// loop through posts
		while( $loop->have_posts() ): $loop->the_post();
			echo '

<div class="portfolio-cont">';
			echo '

<div class="portfolio-item" >';
			echo '

<h3 class="portfolio-title center-text">' . get_the_title() . '</h3>


';
			echo '

<img class="portfolio-thumb" style="display:none;" src=" ' . the_post_thumbnail( array(300, 150) ) . '">

';
			echo '</div>


</div>


'; // The end of .portfolio-cont
					endwhile;
	}
	wp_reset_postdata();
}
genesis();

That’s the page done, it now needs to be uploaded to your server via FTP, if you are unsure or nervous about doing that, there is an article on FTP Transfer’s here

WHOOOOAAA that looks complicated???? Don’t worry I’ll explain it now.

From the Top

We want the page unhindered or distraction free so we get rid of the sidebar and make it full width, this will override your theme’s settings, if you still wish to keep the sidebar then just delete the lines.

Then we have the “add_action”, this tells your website what information it needs to pull in from the database and display.

Now we have THE LOOP, its a custom loop because we only want to pull in a certain “Category”, in my case it is “portfolio”, so any post I write and categorize as Portfolio the loop will pull that in and omit all other posts. All the posts will still be displayed on your blog, so you would need to put an “array” into your blog page to omit all portfolio posts, to stop duplication.

$args = array(
		'category_name' => 'portfolio', // replace with your category slug
		'orderby'       => 'post_date',
		'order'         => 'DESC',
		'posts_per_page'=> '18', // overrides posts per page in theme settings
	);

The “orderby” means that the most recently published work/project/post is shown first because the “order” is descending (‘DESC’) and lastly the “posts_per_page” tells you how many posts are to be displayed before pagination is effected.

The loop then does what it needs to do and keeps “looping” posts until there are no more.

We move onto the display formatting which is basically HTML5 and php combined, we have already told your database what we need, so now we need to say how its going to be displayed by attaching class’s to the elements to hook in the CSS-

$loop = new WP_Query( $args );
	if( $loop->have_posts() ) {
		// loop through posts
		while( $loop->have_posts() ): $loop->the_post();
			echo '

<div class="portfolio-cont">';
			echo '

<div class="portfolio-item" >';
			echo '

<h3 class="portfolio-title center-text">' . get_the_title() . '</h3>


';
			echo '

<img class="portfolio-thumb" style="display:none;" src=" ' . the_post_thumbnail( array(300, 150) ) . '">

';
			echo '</div>


</div>


'; // The end of .portfolio-cont
					endwhile;
	}
	wp_reset_postdata();
}
genesis();

The <div> gets “echo”ed out and the php pulls in the relevant data, you can see with the get_permalink(), get_the_title() etc. etc. etc. the array at the end of the of the_post_thumbnail( array(300, 150) ) overrides the theme default size of image 300 width by 150 height.

That is basically your template done, are you still with me?

Great,  now we need to place it in your website BUT have you backed it up, here is an article on backing up your Genesis website.

Create your page via the Dashboard as you do normally and then choose the template that you have just added →

And publish the page,  you can click the view page link at the top of the page to check that its displaying correctly, if it is then lets get down to styling it.

Style is a very personal thing, so below is basically the bare bones to get things in place, I personally went for a grid format but you can change it to what you like.

Portfolio

---------------------------------------------------------------------------------------------------- */
.page-template-projects-page .site-inner{
max-width:1600px;
}

.portfolio-cont{
position:relative;
padding:1%;
display:block;
width:33%;
float:left;
text-align:center;
}

.portfolio-item{
border:1px solid #4F5750;
border-radius:5px;
}

.portfolio-title{
margin:15px 0;
}

.portfolio-item p{
margin:0 0 30px 0;
}

@media only screen and (max-width: 800px) {
.portfolio-cont{
padding:1%;
display:block;
width:48%;
margin:1%;
}
}
@media only screen and (max-width: 480px) {
.portfolio-cont{
padding:1%;
display:block;
width:98%;
margin:1%;
}
}

We are nearly there.
Once you have all your posts categorized and the page is working and styled to your liking then we can finally
add our page to our menu via the Dashboard.

That’s it.
of course if you have any questions or ways to improve the code above then please don’t hesitate to leave a message.