Change logo on each page of University Hub theme [closed]

Question

I'm using the University Hub theme http://wenthemes.com/item/wordpress-themes/university-hub/ and I searched a lot and didn't found a solution. I want to change the main logo on each page of the site. I managed to change with CSS the header background color but for the logo it seems I need a custom solution for this theme, but I really don't know how to do it, any help will be appreciated. Thanks! :D P.D.: I am already using a child theme.

Answer 1

I would add a filter to the body class in your functions.php file. This will add a class based on the page/post/cpt slug:

PHP:

/**
 *
 * Add Page/Post Body Class Slug
 *
 * post-slug-for-post
 * page-slug-for-page
 *
 *
 */
function yourprefix_page_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
        $classes[] = $post->post_type . '-' . $post->post_name;
    }
    return $classes;
}
add_filter( 'body_class', 'yourprefix_page_slug_body_class' );

Then I would use jQuery to swap the src based on the body class. You will need to change the path variable and possibly the parent class where the logo img is located (the example uses .site-branding).

jQuery

 ( function( window, $, undefined ) {

     'use strict';


     $( document ).ready( function(  ) {


        /* ==== change logo based on body class ===

        // default logo and path
        var path  = 'http://yourdomain.com/wp-content/uploads/',
            logo  = 'logo-1.png'; // this is the default


        // logo 2 conditional change var value
        if ( $( 'body' ).is( '.page-such-and-such' ) ) {
            logo = 'logo-2.png';
        }

        // logo 3 conditional change var value
        if ( $( 'body' ).is( '.post-such-and-thing' ) ) {
            logo = 'logo-3.png';
        }

        // return the logo src
        $( '.site-branding img' ).attr( 'src', path + logo );


        // end swapping logo


    } ); //* end ready


} )( this, jQuery );

Create a document with your code editor name it swapping-logo.js (or whatever) and enqueue it with jQuery as a dep. The instructions on adding js to your theme are everywhere.

Answer 2

This is not specific to WordPress however you could try removing the header hook and adding it back with a image from a custom field or the featured image meta box. Then output using your header hook university_hub_action_header all from the safety of a child theme.

Or

You could filter the custom logo using custom fields or the post thumbnail as your input.