Portfolio filtering doesn't show with custom header

This is a follow up to:

if a solution is not made yet to work nativley with Pro. when will a solution become available.

In the meantime, can you please show a step by step how to make it work using the shortcode and essential grid or the grid plugin?

Thank you!

Note: he filter shows up if the stack is change to Icon or Ethos. The filter still does not show when the stack is set to Integrity or Renew.

P.S> I am using Integrety (for the purpose of this solution). but it will be nice if it can work for all stacks!

Waiting… thank you!

Hey M,

The Portfolio Filter should show up regardless of Stack. There could be some customization affecting the display. Would you mind giving us the URL of the portfolio page and access to your WordPress admin in a Secure Note?

By the way, the Portfolio Filter will only work with X Portfolio. Essential Grid and The Grid have their own filter system.

Thanks.

Hello, this was about this past issue: Portfolio filtering doesn't showing with custom header

has it been resolved. if yes that means the issue is now on my end, and i can give you access to see it, if not, than i need guidance with the work around fix talked about is the link above.

Please let me know the status of this know issue some years ago and we decide how to proceed. thank you very much

Hi @MI1,

The issue has been resolve. Portfolio filter is not available on custom header because originally it was part of the legacy header. Since it was replace now, with a Pro header, as a way to add it on PRO header, there is a shortcode :

[x_portfolio_filters]

Add the shortcode on a content area element on your header and viola, you have portfolio filter now.

Hope this helps.

This is not clear.

let’s reset this whole thing and start from scratch.

I am using PRO
I am using PRO Header
I want to use a portfilio page that has filters on it.
the fileters work on the page if the header is NOT a pro header
If it is a PRO header, then the filter on portfolio page does not show up.

How can i show the filters in the portfolio page using a PRO Header?

If you can please show an example how to so it. I would appreaciate it.

Hey M,

As I previously mentioned,

I’m referring to the Portfolio Filter shortcode since, in your first post, you are following up on the previous thread where the Portfolio Filter was suggested.

With that said and once again,

If you watch the video below, you’ll see that the Portfolio Filter works regardless of stack.

Thanks.

The issue here is missed.

Please ignore all the above and note the folowing:

I use a custome hearder in pro.
I need portfolios filters on the page, not in the header.

How can that be done. since the previous threads say that the filters do not show up if using a custome header, but the filter do show up if using regulare header. (i tested that and it is true)

So if this issue is not resolved, how can i get filters on the page, (NOT on the header)

Thank you

Hello M,

The only way to display the portfolio files on the page is to modify the Layout - Portfolio page template. To do that, assuming you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/INTEGRITY/TEMPLATE-LAYOUT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio page output for Integrity.
// =============================================================================

get_header();

?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

    	<div class="custom_filter">
    		<?php echo do_shortcode('[x_portfolio_filters]'); ?>
    	</div>

      <?php x_get_view( 'global', '_portfolio' ); ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

3] Save the file named as template-layout-portfolio.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/pro-child/framework/views/integrity

You will need to create the folder path since it does not exist in your child theme yet.

We would love to know if this has worked for you. Thank you.

Amazing! Finally. thank you for understanding what i needed to do and gave the instruction to do it.

Also, why is not not part of any update to the theme? i think it should be made to work out of the box. this is years old issue and it would be nice to fix it and become part of the theme as it is meant to be.

Last, how can i center the button, see the picture, and if i wanted to have the page load without the filter expanded, (retracted instead) and the visitor will press the button to expand it if they want to.

Thank you.

Hey M,

Glad to hear that you like the solution suggested by Ruenel.

To center the Sort Portfolio button, add the following code in Theme Options > CSS.

.option-set {
    text-align: center
}

To your question:

The Portfolio Filter shortcode ([x_portfolio_filters]) is the official solution by our development team for Pro. One of the reasons for that is if we add the filter like what Ruenel showed you, it would break a lot of sites who already customized the template-layout-portfolio.php and the Landmark Header template.

The Portfolio Filter shortcode was also meant to be added in a custom Pro Header and not custom code like what Ruenel suggested unless strictly adding the filter to the inner page of course.

Previously, I was hoping that you add the Portfolio Filter to your Pro built header like what I showed in the screencast. You see there that I created a header specific for the Portfolio page so it applies only to the portfolio page. This doesn’t matter anymore though because you strictly want the filter to be in the inner page container.

Just to let you know though, it would have been a bit better if you use the custom header assigned to the portfolio page method so that you can apply code only to the portfolio page like the CSS code above. I believe it won’t matter in this case since it’s a small piece of code but just thought this info would be useful in the future.

Thanks.

Thank you, well noted.

I can use custom css plugin to assign this css code to the portfolio page only. (that help limit the css customization code to what pages they need to apply and not global all over the site.

Ruenel and you made it very clear now and I understand.

last comments, for those who buy the PRO version and are making a new site without any customization using your theme, they will be stuck when they make a PRO Header and they try to use portfolio with filtering. (like what happened to me) - with this example i start to see and appreciated using a child them, and i wish if everyone else can do the same and stop customizing your direct theme files in php which makes it bad for everyone else that like thinks to work out of the box. anyway. that is my thoughts for whatever it is worth to see how you can curb this issue moving forward.

Thank you!

You are most welcome and we appreciate your feedback as well.

i wanted to have the page load without the filter expanded, (retracted instead) and the visitor will press the button to expand it if they want to.

how to do that please.

Hello @MI1,

The portfolio filter were displayed and has a different event triggers in each respective stack. There is the expanded filter by default and there are also that you need to click to view the filter items. Please check out the demos below:

Integrity: https://demo.theme.co/integrity-1/portfolio/
Icon: https://demo.theme.co/icon-1/portfolio/
Renew: https://demo.theme.co/renew-1/portfolio/
Ethos: https://demo.theme.co/ethos-1/portfolio/

Modifying any behaviour of the portfolio filter can only be done with custom development which is way beyond the scope of our support already.

Hope this explains it briefly.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.