0

I have a multi-tiered Wordpress site that needs to have a different logo depending on what category is present. For example: The main page would have logo.png but the category adventure, and all of adventure's sub categories, would have adventurelogo.png.

I tried:

<?php if (is_category(10) || cat_is_ancestor_of(10, get_query_var('cat'))): ?>
<script>
    document.getElementsByClassName('logo')[0].src ='adventurelogo.png';
</script>

<?php endif; ?>

But that did not seem to work. Does anyone know how this would be done?

Thanks for your help!

4
  • Does the <script> write to the HTML? is there a chance it's your JS? if you add global $wp_query; echo "<pre>".print_r($wp_query,true)."</pre>"; do you see cat of 10 ? Commented Jan 10, 2018 at 18:18
  • Sorry I'm pretty knew to all of this, I'm not sure what you mean. Where would I add this?
    – Jthunter24
    Commented Jan 10, 2018 at 19:00
  • where is this code? does it run before the logo html is added?
    – inarilo
    Commented Jan 10, 2018 at 19:03
  • I added it in the functions.php file
    – Jthunter24
    Commented Jan 10, 2018 at 19:09

1 Answer 1

1

Based on the comments I think I can walk you through this.

If you want to "inject" code like this into your theme, one of the better ways is with Wordpress Action API.

Since what you're trying to get on your site is Javascript, we'll hook into the footer. Assuming your theme is built properly, adding this to your functions.php will add some code to the bottom of your site, on all pages:

add_action('wp_footer', function(){
    echo "<mark>👋 Hello</mark>";
});

If we then add in your conditionals, we can make that message only show on your categories page. See if the Hello message is on the page you want, and shouldn't be on pages you don't want.

add_action('wp_footer', function(){
    if (is_category(10) || cat_is_ancestor_of(10, get_query_var('cat')))
        echo "<mark>👋 Hello</mark>";
});

If that didn't work, is_category() is just arguing against $wp_query. So we can review the $wp_query for the page you're after, to ensure you're conditionalizing the right things. Visit the page where the logo should change, and see what the cat value is:

add_action('wp_footer', function(){
    global $wp_query; 
    echo "<pre>".print_r($wp_query,true)."</pre>";
    //if (is_category(10) || cat_is_ancestor_of(10, get_query_var('cat')))
    //  echo "<mark>👋 Hello</mark>";
});

If it did work, or you resolved why it didn't, we'll we're golden. You conditionals are fine. Now it's just a matter of adding your script:

add_action('wp_footer', function(){
    if (is_category(10) || cat_is_ancestor_of(10, get_query_var('cat'))) {
        ?>
        <script>
            document.getElementsByClassName('logo')[0].src ='adventurelogo.png';
        </script>
        <?php
    }
});

If that doesn't work, but the Hello message did, your issue is with your Javascript code. And well, that's probably it too, looking closer at your JS code, you're using the logo as a relative path - which won't work if you're using named permalinks. You need an image src with the full image URL. Assuming adventurelogo.png is in the root of your theme, it'd be more like:

add_action('wp_footer', function(){
    if (is_category(10) || cat_is_ancestor_of(10, get_query_var('cat'))) {
        ?>
        <script>
        var newLogo = '<?= get_template_directory_uri() ?>/adventurelogo.png';
        document.getElementsByClassName('logo')[0].src = newLogo
        </script>
        <?php
    }
});
1
  • Hi David- Thank you so much for your help. Your explanation is really in depth and really helps. The first hello appeared on all the pages but I haven't gotten it to work on just the category pages yet. with your explanation though I know where to start looking and how to dive in. When I reviewed the wp-query it showed cat like this : cat -> , which to me looks like the category is empty which is really strange. I have a feeling there are some strange things going on with this theme.
    – Jthunter24
    Commented Jan 11, 2018 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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