Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #21412


    I’m trying to get the category pages to display in the portfolio format rather than the blog format. How can I do that?

    What I tried so far is copying the code from the template-portfolio.php and pasting in a new category.php file, then modifying the query, and replacing the avia css functions with the actual css needed (such as “twelve alpha units”).

    I’ve actually just about got it working correctly, but every time the page loads, all of the images are stacked on the right, and then after a delay of 5-10 seconds, they move into their correct positions.

    It seems like either Javascript of JQuery is still doing something and then needs to finish.

    Any way to correct that? Is there an easier way than what I’m doing?

    Any help is much appreciated!





    Can you give us a link to your category page?





    Thanks for the quick reply!

    I was working on it for the past hour when I discovered that there were other errors in my current method, so it’s probably not the best example to use. It seemed good at first.

    Perhaps the best question is where we should start to get that format onto a category page.

    Our team is working on a site where hundreds of portfolio items need to appear and be searched by category, with several subcategories. Within the theme structure our only current option would be to create over 50 portfolio pages, which is not feasible.

    We have experience with php, javascript, and jquery. We just need some direction.

    Thanks again!


    Sweet. I think we’ve got it! It didn’t take as many changes after all.

    Here’s the solution for anyone else who wants to use the regular category pages with the grid portfolio layout in the Angular theme. You may also be able to take this same idea and adapt it to change the archive page, blog, etc. (Note: this takes some familiarity with PHP, so do this only if you know what you are doing!)

    1. Create a new category.php file in the angular theme folder

    2. Copy the entire content of the file “template-portfolio.php” in the theme folder, and paste it into the category.php

    — Now, since there are no options for category pages, we have to insert the options manually into the category.php page.

    3. Go to about line 18 and replace:

    $avia_config['new_query'] = array("paged" => get_query_var( 'paged' ), "posts_per_page" => $avia_config['portfolio_item_count'], "post_type"=>"portfolio");


    $avia_config['new_query'] = array("paged" => get_query_var( 'paged' ), "posts_per_page" => 24, "post_type"=>"post");

    (You’ll notice that we simple are manually inserting the number of posts to be shown on the page (24 in our case), and changing the post_type to “post” instead of “portfolio”.)

    4. Line 24 – Change the number at the end to the number of columns you would like in the grid. We chose 3, so the new line looked like this:

    if(empty($avia_config['portfolio_columns'])) $avia_config['portfolio_columns'] = 3;

    5. Line 38: Replace the “<?php echo $avia_config; ?>” with “twelve alpha”:

    <div class='content <?php echo $avia_config['content_class']; ?> units template-portfolio-overview content portfolio-size-<?php echo $avia_config['portfolio_columns']; ?>'>


    <div class='content twelve alpha units template-portfolio-overview content portfolio-size-<?php echo $avia_config['portfolio_columns']; ?>'>

    6. Now we need to remove the sidebar, which usually would appear. Go to about Line 68 and remove the following:

    if(strpos($avia_config['layout'], 'sidebar') !== false)
    //get the sidebar
    $avia_config['currently_viewing'] = 'page';

    7. Find the file “loop-portfolio.php” in the “includes” folder inside the angular theme folder. Duplicate this file and call it loop-category.php.

    Go to Line 136 and change the following:

    if($loop_counter > $avia_config['portfolio_columns_iteration'])


    if($loop_counter > 3)

    (NOTE: Here we are simply manually inserting the number of columns we have once again, so we inserted the number 3. If you want 2 columns, this number needs to be 2, etc.)

    8. Last, go back to the category.php file and go to Line 58. Change the following:

    get_template_part( 'includes/loop', 'portfolio' );


    get_template_part( 'includes/loop', 'category' );

    (This tells the category page to grab that new loop-category.php file we just created, instead of the loop-portfolio.php).

    That’s it!

    We are continuing to test this, but we have not seen any issues yet. Feel free to add comments, corrections, typos you find, or other helpful things below.




    Thank you dfnt23 for posting the solution – I’m sure it will help other users too.




    One last addition. After this, you will need to make some modifications to the title, and/or content that is displayed above the gallery of posts. You’ll need to get the current category name and display it, along with whatever text you want to show above the gallery.



    Thank you so much for letting others know about this. We really appreciate it and I am sure so will others in the future.

    Take Care,


Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Use Portfolio template for category pages’ is closed to new replies.