In this tutorial, i’ll provide all the working code i have tested locally which adds a portfolio page to the Eleven40 child theme by StudioPress.
You can use this code to create portfolio pages for all your category archives and display the featured image with or without post title and excerpt.
Here’s a screen shot taken from my local installation showing what it can look like.
The code creates a new widget where you simply drag in the Genesis featured posts widget and configure the settings to your liking.
There’s 2 simple steps involved:
- Create a new portfolio_archive.php template file
- Register a new widget in your child themes functions.php file
- Add some CSS code to your child themes style.css for the width and margins
Create Archive Template
Please copy and paste this code into a new file using a code editor and name it portfolio_archive.php
<?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]
Note: You can change the name of this file and the code to something like category_archive.php and use it to create multiple portfolio style archive pages.
<h3>Add New Widget & Image Size</h3>
[code]
add_image_size( 'portfolio', 360, 230, TRUE );
// Register widget areas
genesis_register_sidebar( array(
'id' => 'portfolio',
'name' => __( 'Portfolio', 'eleven40' ),
'description' => __( 'This is the portfolio page.', 'eleven40' ),
) );This code registers a new widget which you can also modify for each category. It also creates a new image size for the portfolio featured image. This size can also be changed however it does fit perfectly 3 across on the archive page.
Style Portfolio Archive Pages
Please paste this code at the end of your child themes style.css file.
.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: 360px;
}Again, the name of the portfolio page template class can be changed to something like .page-template-page_category-php if you want to use the portfolio for different category archives and style them differently.
Important Tips
- Resave your permalinks after adding the PHP to your functions file
- Crop/Resize your images to the exact same as your settings (360 x 230) before adding them as featured images for each single custom post
Genesis Featured Post Widget Settings
Time to hit your widgets page and drag in the Genesis Featured Post widget into your new Portfolio widget area. Here’s the settings i used.
Displaying featured images for posts in a portfolio style category archive may help attract more traffic to these archives as its a more visually attractive way to search for posts in an archive.
You’ll also find more posts on this site with code that does exactly the same thing for use on other themes.
Video Result (With Relaxing Music)
Here’s the video showing you the result of adding the code above and how it works.
What do you think? Like it or not?
Leave a Reply
You must be logged in to post a comment.