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.