- This topic is empty.
-
AuthorPosts
-
September 2, 2013 at 11:59 pm #148861danielc2384Participant
Just wondering how I can change the logo for each page on this wordpress site.
http://www.creativemms.com.au/verve/Basically for each page I need a different color logo (top left).
It’s a wordpress site and no plugins seem to work for it.
Thanks!!
September 3, 2013 at 1:48 am #148865danielc2384ParticipantNot really all that experience with php. I ended up finding a bit of a cheat and just added a new logo to each page with a div tag so the new logo just sits ontop of the old logo.
I think your recomendation would be easier. Any possibility you would be able to help?
Here is my header.php code
<!—->
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="; charset=” />
<link rel="stylesheet" type="text/css" href="” />
<link rel="stylesheet" type="text/css" href="/css/prettyPhoto.css” /><body >
<
div id=”wrap” class=”clearfix”>
<a href="”><img src="” alt=”Photo Lab” />
<a href="”><img src="/images/logo.png” alt=”Photo Lab” />
‘main’, ‘menu_class’ => ‘sf-menu’, ‘container’ => ‘ul’ ) ); ?>
- <a href="”>Home
”)); ?>
<a target="_blank" href="”><img src="/images/icons/facebook.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/twitter.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/flickr.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/digg.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/reddit.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/stumpleupon.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/rss.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/youtube.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/linkedin.png” alt=”” />
<a target="_blank" href="”><img src="/images/icons/googleplus.png” alt=”” />
©
September 3, 2013 at 3:46 am #148875kaffekopParticipantPerhaps something like this: http://www.tcbarrett.com/2011/09/wordpress-the_slug-get-post-slug-function/
Then you just have to add some css that matches your different pages.
#logo img{ background: url('/path/to/logo.png'); width: 100px; height: 50px; } #logo img.about-us{ background: url('/path/to/logo-about-us.png'); } #logo img.services{ background: url('/path/to/logo-services.png'); }
And then change your logo-container to:
<div><a href="/verve"><img src="/path/to/logo.png" class="<?php the_slug(); ?>" alt="Photo Lab" /></a></div>
Add
Current slug: <?php the_slug(); ?>
somewhere to see what the slug is to the current page.The above is untested as i dont really use wp anymore, but i think it should work :)
September 3, 2013 at 5:03 am #148882danielc2384ParticipantThanks! I’m just kinda stuck on the
<?php the_slug(); ?>
part though. Does the page ID need to go there or something?
September 3, 2013 at 5:15 am #148887kaffekopParticipantNo,
<?php the_slug(); ?>
will spit out the current page slug – i.e my frontpage (default wp 3.6) is called hello-world, the my services page will display my-services :)Put
the_slug();
function in your themes functions.php and add<?php the_slug(); ?>
to the first line in header.php – you should now see the slug-string above the website.September 3, 2013 at 5:38 am #148891kaffekopParticipant@melindrea Perhaps it does, i haven’t used wp in a looong time – there might even be a smarter function then the one i found somewhere i wp by default these days :)
But i find adding a single function, to get the slug, is way easier then adding multiple lines of php, especially since @danielc2384 wrote > Not really all that experience with php.
Your approach will work fine for sure, but i would rather edit my .css, to add a new .logo-slugname, then doing it in the header.php code. Especially since this would have to be edited every time a new page is added.
A shorter, none css, version of my approach could be (in header.php – functions.php still needs the function)
<img src="images/logo-<?php the_slug().png">
With this all danielc2384 would have to do is uploading the new logo-new-page-slug.png and then it should be shown automaticly.
images/logo-hello-world.png // default images/logo-about-us.png images/logo-services.png
edit: of course the_slug() has no fallback, so if some-page.png is missing, no logo will be displayed. If using the css, the #logo will always render the default logo and if #logo img.some-page is defined in css it will overwrite it.
September 4, 2013 at 8:36 am #149013sayedtaquiParticipantWell it should be done by editing your current theme however , if you are just looking for some copy paste code then paste this in your functions.php file and replace the image sources with your.
function mms_current_page_url() { $pageURL = 'http'; if( isset($_SERVER["HTTPS"]) ) { if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";} } $pageURL .= "://"; if ($_SERVER["SERVER_PORT"] != "80") { $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; } else { $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; } return $pageURL; } add_action('wp_head', 'mms_change_logo_on_each_page' ); function mms_change_logo_on_each_page(){ if(mms_current_page_url() == 'http://www.creativemms.com.au/verve/'): ?> <script> jQuery(document).ready(function(){ jQuery('#logo a img').attr('src', 'http://www.creativemms.com.au/verve/wp-content/uploads/2013/07/verve_logo_blue.png'); }) </script> <?php elseif(mms_current_page_url() == 'http://www.creativemms.com.au/verve/about-us/' ): ?> <script> jQuery(document).ready(function(){ jQuery('#logo a img').attr('src', 'ENTER LOGO URL FOR ABOUT US'); }) </script> <?php elseif(mms_current_page_url() == 'http://www.creativemms.com.au/verve/services/' ): ?> <script> jQuery(document).ready(function(){ jQuery('#logo a img').attr('src', 'ENTER LOGO ULR FOR SERVICES'); }) </script> <?php elseif(mms_current_page_url() == 'http://www.creativemms.com.au/verve/work/' ): ?> <script> jQuery(document).ready(function(){ jQuery('#logo a img').attr('src', 'ENTER LOGO ULR FOR WORK'); }) </script> <?php elseif(mms_current_page_url() == 'http://www.creativemms.com.au/verve/contact-us/' ): ?> <script> jQuery(document).ready(function(){ jQuery('#logo a img').attr('src', 'ENTER LOGO ULR FOR CONTACT US'); }) </script> <?php endif; }
February 10, 2014 at 6:51 pm #162537urechstefanParticipantThank you so so much @Melindrea! You helped me a lot with your code!
September 11, 2015 at 8:51 am #208054nizamParticipantI needed the same functionality and tried to use the above code but all in vain. Can you guide me how to have different logo in each WP page.
My header.php code is:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till<
div>
*
* @package Jobify
* @since Jobify 1.0
*/
?><!DOCTYPE html>
<!–[if IE 7]>
<html class=”ie ie7″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html class=”ie ie8″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 7) | !(IE 8) ]><!–>
<html <?php language_attributes(); ?>>
<!–<![endif]–>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width” />`<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” /><meta name=”viewport” content=”initial-scale=1″>
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/source/vendor/html5.js” type=”text/javascript”></script>
<![endif]–><?php wp_head(); ?>
`</head>
<body <?php body_class(); ?>>
`<div>
<header id="masthead" class="site-header" role="banner"> <div> <a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="site-branding"> <!--Editing start from here and i am gona delete all other code from above span section--> <?php $header_image = get_header_image(); ?> <h1 class="site-title"> <?php if ( ! empty( $header_image ) ) : ?> <img />" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /> <?php endif; ?> <span><?php bloginfo( 'name' ); ?></span> </h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </a> <nav id="site-navigation" class="site-primary-navigation slide-left"> <a href="#"><i class="icon-cancel-circled"></i> <span><?php _e( 'Close', 'jobify' ); ?></span></a> <?php get_search_form(); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu-primary' ) ); ?> </nav> <?php if ( has_nav_menu( 'primary' ) ) : ?> <a href="#"><i class="icon-menu"></i></a> <?php endif; ?> </div> </header><!-- #masthead --> <div>
`
-
AuthorPosts
- The forum ‘Back End’ is closed to new topics and replies.