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! 😀
P.D.: I am already using a child theme.
2 Answers
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.