Add Portfolio Page To Prose Theme

Note: As of November 2015, Prose is no longer available.

In this tutorial, i’ll show you how to add a portfolio page to the Prose child theme by StudioPress.

Here’s an image of what it looks like once added to Prose.

First step is to add this PHP code to the end of the custom.php file.

Go to Prose > lib > structure > custom.php and paste this code at the end of the file:

add_image_size( 'portfolio', 280, 200, TRUE );

// Register widget areas
genesis_register_sidebar( array(
	'id'				=> 'portfolio',
	'name'			=> __( 'Portfolio', 'prose' ),
	'description'	=> __( 'This is the portfolio page.', 'prose' ),
) );

The above code registers a new widget for the Genesis featured posts widget and adds a new featured image size for the portfolio style archive page.

Next step is to create a new file named page_portfolio.php using a code editor like Notepad++ and paste in this PHP code.

<?php
/*
Template Name: Portfolio
*/

/** Force the full width layout on the Portfolio page */
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

/** Remove the standard loop */
remove_action( 'genesis_loop', 'genesis_do_loop' );

/** Add the Portfolio widget area */
add_action( 'genesis_loop', 'wpsites_portfolio_widget' );
function wpsites_portfolio_widget() {
	dynamic_sidebar( 'portfolio' );
}

genesis();
[/code]

The above template file should be uploaded to the root directory of the Prose theme.

Next step is to add some CSS code to the Genesis > Custom Code > Custom CSS box:

[code]
.page-template-page_portfolio-php h4 {
	font-family: 'Lora', Georgia, "Times New Roman", Times;
	font-size: 42px;
	line-height: 1.25;
	margin: 10px 0 25px;
}

.page-template-page_portfolio-php h2,
.page-template-page_portfolio-php h2 a,
.page-template-page_portfolio-php h2 a:visited {
	font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.625), 20px);
	margin: 10px 0;
	text-align: center;
}

.page-template-page_portfolio-php .featuredpage img,
.page-template-page_portfolio-php .featuredpost img {
	margin: 0 0 10px;
}

.page-template-page_portfolio-php .featuredpage .page,
.page-template-page_portfolio-php .featuredpost .post {
	float: left;
	margin: 0 10px 30px;
	padding: 0 0 20px;
	overflow: hidden;
	width: 280px;
}

.page-template-page_portfolio-php .featuredpage img, .page-template-page_portfolio-php .featuredpost img, .post-image {
    background-color: #F5F5F5;
    border: 0px solid #DDDDDD;
    padding: 0px;
}

The above code adds styling to the portfolio page template along with margins, padding and a width to the featured images displayed on your portfolio archive page. You can tweak this code to your own liking.

The next step is to drag in the Genesis Featured Posts widget into the new Portfolio widget area and configure the settings.

Note: I’ve found the images display best when cropped to the exact same size as what you use in the widget settings above which in this case is 280 x 200. You can change the width slightly and change the height also.

Result With Relaxing Music

Here’s the video showing you the result of adding the code above and how it works.

Add Portfolio Page To Prose Theme

Result With Relaxing Music

Comments

Leave a Reply Cancel reply

Join 5000+ Followers