Portfolio Categories: only show parent categories

Home Forums Jevelin Theme Portfolio Categories: only show parent categories

Home Forums Jevelin Theme Portfolio Categories: only show parent categories

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts
  • michigankathleen
    Participant

    I have 2 sets of categories in my portfolio and would like to develop a landing page for each. When I select the parent category I want to show in the Portfolio 2.0 content editor, it only shows the projects that fall under that parent category, but shows all the labels for all my other categories and sub-categories. Is there a way to hide the other categories that aren’t applicable?

     

    Here’s a draft of the landing page and I only want the sub-categories from the drop-down menu “life” category to show. I’d eventually like to replace the menu item (currently set to Portfolio Category of the same name).

    https://kathleenpduffy.com/life/

    Hi @michigankathleen,

     

    I hope you are well today and thank you for your question.

     

    You can just display life category and hide all other categories by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item {
        display: none;
    }
    
    #portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item[data-filter="*"],
    #portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item[data-filter=".category-life"] {
        display: inline-block;
    }

     

    Best regards,
    Shufflehound team

    michigankathleen
    Participant

    Thanks. I was able to modify to show my “Life” subcategories as pasted below. I’d like to do the same for my “Work” landing page to show its subcategories. How do I edit the code for that page’s portfolio? It seems the Portfolio content element works to only show the 3 subcategories (first portfolio on this page), but not the Portfolio 2.0 (second portfolio on this page) which is still showing all the categories.

    https://kathleenpduffy.com/work/

     

    #portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item {
    display: none;
    }

    #portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item[data-filter=”*”],
    #portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item[data-filter=”.category-travel”],
    #portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item[data-filter=”.category-logos”],#portfolio-fancy-filter-6e9cf96963b6e1ac988a0c5678b41524 .sh-filter-item[data-filter=”.category-costuming”] {
    display: inline-block;
    }

     

    Thanks.

    To achieve same on the shared work page please also use the below custom CSS code.

     

    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item {
    display: none;
    }
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter="*"],
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter=".category-concepts"],
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter=".category-plans"],
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter=".category-work"] {
    display: inline-block;
    }
    

    michigankathleen
    Participant

    Thanks. I’d like it to show a different subcategory than “work” (Work is the parent category). I had it named Before/After, but when I replaced “work” in the 3rd item above with “Before/After”, it didn’t grab those with that category. I tried changing the category name thinking the “/” was the problem, so I called it “PhotoSimulations” and it still isn’t grabbing everything in that category. I would prefer it be called “Photo Simulations” with a space if possible. Any idea why my edit to the code did not work? Thanks.

     

    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item {
    display: none;
    }
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter=”*”],
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter=”.category-concepts”],
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter=”.category-plans”],
    #portfolio-fancy-filter-c62cbc9b3652ac33f01612b2bb46bac0 .sh-filter-item[data-filter=”.category-photosimulations”] {
    display: inline-block;
    }

     

    https://kathleenpduffy.com/work/

    Please change the text “.category-photosimulations” in your above code to the text “.category-before-after”

    michigankathleen
    Participant

    Ahh, the slug. Thanks still learning all this web code stuff! I appreciate the help.

    You are most welcome here 🙂

    michigankathleen
    Participant

    One last filter I’d like to customize more. On my homepage, I’d like the filter to only show “All” “Work” and “Life”. Just too many tabs with all the subcategories showing. Thanks.

    Use the below custom CSS code to achieve it.

     

    #portfolio-fancy-filter-7c965475e86778586eb3f5c5f5821836 .sh-filter-item {
    display: none;
    }
    #portfolio-fancy-filter-7c965475e86778586eb3f5c5f5821836 .sh-filter-item[data-filter="*"],
    #portfolio-fancy-filter-7c965475e86778586eb3f5c5f5821836 .sh-filter-item[data-filter=".category-life"],
    #portfolio-fancy-filter-7c965475e86778586eb3f5c5f5821836 .sh-filter-item[data-filter=".category-work"] {
    display: inline-block;
    }
Viewing 10 posts - 1 through 10 (of 10 total)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form