Display Custom Taxonomy Category in Search Results + Scroll Window To Offset

Trent Turner

#202483

Hi guys.

Two things I need help with.
1) Displaying the category a post belongs to in my search results.
2) How to set a Scroll Window to Offset when using a custom selector.

Have made a video explaining in detail: http://www.kubikdesign.com.au/posts/search-filter-pro-support-20190217.mp4

1) Displaying the category a post belongs to in my search results.
I am using search filter with a custom post type and custom taxonomy.
I am using the short code method.
See video for full detail.

2) How to set a Scroll Window to Offset when using a custom selector.
I have a fixed header so need to set an offset so that the scroll to anchor doesn’t scroll to the top cutting things off.
I have a bit of jQuery I use to do this on other scroll to elements.

jQuery('html, body').animate({ scrollTop: jQuery('#anchor').offset().top -navbarHeight }, 500);

navbarHeight is a variable I use to get the height of my navbar.

var navbarHeight = jQuery('.navbar').outerHeight();

Again see video for full detail.

I am currently working locally so don’t have a URL to share. Happy to setup a staging area should you need, but hoping it’s straight forward fixes.

Thanks.

Add New Note to this Reply

Trevor Moderator

#202499

As this is a Custom Post Type, are you sure is a ‘Category’, or is it a Custom Taxonomy? For example, WooCommerce calls them categories and tags, but they are not. This is possibly why they do not show.

This may help:

https://css-tricks.com/forums/topic/display-custom-taxonomy-like-the_category-for-custom-post-type/#post-91497

For #2, you need a pure CSS solution. I think this (and the stackexchange article it references, will help:

http://darktef.github.io/posts/2017-03-offset-html-anchors-for-fixed-header-with-css

Add New Note to this Reply

Trent Turner

#202820

Thanks for the tip on #1, I ended up using the following.

$terms = get_the_terms( $post->ID , 'latest_news' );
$term = $terms[0]->name;
$category_link = get_category_link( $terms[0]->term_id );
echo $category_link;
echo $term;

#2 – thanks I will look into it and let you know how I get on.
=)

Add New Note to this Reply

Trent Turner

#202961

Hi Trevor.

I had a play with the CSS solution for #2, still with some issues.

Please see video:
http://www.kubikdesign.com.au/posts/search-filter-pro-20190222-01.mp4

Thanks.
=)

Add New Note to this Reply

Trevor Moderator

#203034

I was trying to find how I had fixed this before. Then I remembered. I added a before rule to the anchor. I added a class to each anchor, let us call it scrolltofix.Let us say that the header is 50px tall, the CSS would be this:

.scrolltofix::before {
  content: "";
  display: block;
  height: 50px; /* fixed header height*/
  margin: -50px 0 0; /* negative fixed header height */
  position: relative;
  z-index: -1;
}

Does that help?

Add New Note to this Reply

Trent Turner

#203235

Yeh similar approach to what I did.
Thanks again Trevor.

Add New Note to this Reply

[Author]

Posts