[Support request] Creating Portfolio Posts Separate from Blog Posts

[Lina]

I would like to create a portfolio template that is separate from my blog template, but with the same type of functionality. Meaning, I would like to be able to have “previous portfolio piece,” “next portfolio piece” sort of functionality – as you would with a blog.

I just don’t want the portfolio pieces and blog pieces to mix together.

What is the best way to achieve this?

Thank you.

P.S. What i’m trying to achieve is a blog section that looks like a typical blog, and a portfolio section that has a three column layout instead of the typical blog layout. I want the two areas of the website to look different.

[David]

Hi there,

ideally you would create a Custom Post Type for your Portfolio post type.

Then we could use either Filter Hooks, Block Elements or GB Query Loop blocks to display the portfolio archive and make changes to how the single portfolio is displayed.

Do you have any experience with creating CPTs ?

As the alternative to that would be to use a regular Post and create a Category for your Portfolio posts, and we can assist with some PHP / Block Elements to change its layout.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lina]

Hi David,

Only a little bit – I’m trying to understand it better.

For now, I created a Custom Post Type using Code Snippets, and put a couple of posts under that category, so I can try to see if it will work.

I’ve also created a separate .php file called single-portfolio.php, so that’s it created a new Template Category named “Portfolio.”

I’d like to now make a custom template for the single posts under the Portfolio Post Type, but not sure how to go about it.

[Fernando]

Hi Lina,

Here’s an article you may refer to regarding to this: https://docs.generatepress.com/article/setting-up-a-simple-custom-post-type/

[Lina]

Thank you very much for your direction, Fernando. This has been a very educational exercise for me.
I have all the single posts created in my Portfolio now, and looking the way I want them to look.

I would like to modify the archive page that displays the posts in that category, but I’m not sure how.

Under Pages, I see that the blog archives page is there, and classified as a “Posts page.” I’m assuming that somewhere in wordpress, I can also find the archive page for my Portfolio, so that I can modify it?

[David]

When you created your CPT, there are various support parameters you can include. Did you include the has_archive ?

More info here:
https://developer.wordpress.org/reference/functions/register_post_type/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lina]

I believe so, yes.

[David]

Ok, go to Settings > Permalinks and click Save Changes, this will rebuild the permalinks.
You should now be able to view the archive with the yourdomain.com/portfolio URI

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lina]

Yes, the page has been there the whole time.
What I want to know is how to modify the layout and components of this page?
Specifically, can it be modified in WordPress, or can it only be modified manually through the php file?

Thank you

[David]

Theres quite a few options available to us.
Whats the main requirement ? To get the portfolio posts to display in columns ? Or do you need to do more than that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lina]

Ideally, I would like the portfolio posts to display in a masonry grid.

If that’s too complicated, I would settle for columns as a secondary option 🙂

I’m working hard at trying to figure this out myself, and what I’ve tried so far is creating a Portfolio page that pulls content from an element page I’ve set to display content for the Portfolio Archive.

This has resulted in a less than perfect result you can see on the page I’ve linked to.
If you have any suggestions as to how I can achieve the masonry grid effect, I would be most thankful.

[David]

Enable the Blog Module in Appearance > GeneratePress.
This will allow us to use the columns and masonry functions, and we can apply them specifically to your CPT using some PHP.

For columns see here:

https://docs.generatepress.com/article/using-columns-in-the-blog/#adding-columns-to-your-custom-post-type

So, make sure the CPT slug is correct and should be able to do:

// Enable columns
add_filter( 'generate_blog_columns', function( $columns ) {
    if ( 'portfolio' === get_post_type() && ! is_singular() ) {
        return true;
    }

    return $columns;
} );

// Set Columns to 33%
add_filter( 'generate_blog_get_column_count','tu_search_column_count' );
function tu_search_column_count( $count ) {
    if ( is_post_type_archive( 'portfolio' ) ) {
        return 33;
    }

    return $count;
}

// Enable Masonry

add_filter( 'generate_blog_masonry','tu_portfolio_masonry' );
function tu_portfolio_masonry( $masonry ) {
    if ( is_post_type_archive( 'portfolio' ) ) {
        return 'true';
    }

    return $masonry;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lina]

Okay, I’ve added this code in Code Snippets, and it seems to have changed the layout of the Porfolio Archive Page.

But how do I modify other aspects of this page?

Namely, how can I get the header image container to disappear all-together, and each post link to display as a photo that then leads to each individual entry?

[Ying]

To build the layout of the blog or cpt archive, you can use a block element - content template:
https://docs.generatepress.com/article/block-element-content-template/

The video should help you understand the concept.

let us know if there’s anything unclear 🙂

[Lina]

Hi Ying

I promise, this is what I’ve been doing, trying to get things I do in the Portfolio Archive template to actually show up on the page.

They are just not showing up. Is there something I’m missing? Is there additional php code that needs to be included in the Custom Post Type snippet to make sure these things are going to show up.

For example: the title of each post shows up, but the image doesn’t. Basically, only the title shows up.

[Author]

Posts