0

I have a website with a fixed top-bar that displays a certain logo. I used the following script in jQuery to show/hide the logo after scrolling a number of pixels:

<script>
jQuery(document).scroll(function() {
var y = jQuery(this).scrollTop();
if (y > 63) {
  jQuery('.top-bar-logo').fadeIn();
} else {
  jQuery('.top-bar-logo').css({
'display': 'none'
});
}
}); 
</script>

The above script works well but it applies to every page in the website. So what I'd like to do now is to customize this script for a specific page/template. For example, I'd like to target the 'archive' template in jQuery and write a customized script for it. How can I do this?

I'm new to Wordpress development and any help is greatly appreciated. Thanks.

0

Approach 1

Use the body class. all templates will have a class representing them. ie: body.archive, body.single, body.home, etc. It will even have specific tax/post type classes for more granular control. Wrap your js function in something that checks for that body class. The following should do the trick:

jQuery

if ( $( 'body' ).first().hasClass( 'archive' ) ) {...}

Plain JS

const body = document.querySelector('body');
if ( body.classList.contains('archive') ) {...}

Note: Body classes may be tweaked to your needs via the body_class filter, and the body_class() function must be on your body element.

Function (make sure this is on your body element):

body_class() | Function | WordPress Developer Resources https://developer.wordpress.org/reference/functions/body_class/

Filter (Use this to manipulate):

body_class | Hook | WordPress Developer Resources https://developer.wordpress.org/reference/hooks/body_class/

Approach 2

You could also target this template in php and wrap your wp_enqueue_script for this file (as long as that is all that is in this file, and you need nothing else) in a conditional to check, ie: is_archive(), is_single(), is_home().

If you bundle your assets, use the first approach.

  • @Berr see added jQuery example. – noahmason Apr 19 '18 at 1:26
  • Thanks for the reply, @NoahMason. I tried the following but for some reason, it doesn't work: <script> jQuery('document').scroll(function() { if ( jQuery( 'body' ).first().hasClass( 'archive' ) ) { var y = jQuery(this).scrollTop(); if (y > 63) { jQuery('.top-bar-logo').fadeOut(); } else { jQuery('.top-bar-logo').css({ 'display': 'block' }); } } }); </script> (And I did check that body_class() is already in my header.php) – Berr Apr 19 '18 at 2:01
  • I would wrap the whole thing with what I wrote, otherwise your scroll trigger will fire everywhere, even when not needed. after that, try in an incognito window. are you sure you are testing on an actual archive page? – noahmason Apr 19 '18 at 4:06
  • yes, I tired it on the 'category' pages which use the generic 'archive' template, yet it seems I have missed something since I'm all new to this. In any case, I found another workaround directly in php instead of using jQuery. But thanks a lot for your suggestions :) – Berr Apr 19 '18 at 22:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.