Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End Different Logo for each wordpress page

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #148861
    danielc2384
    Participant

    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!!

    #148865
    danielc2384
    Participant

    Not 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&quot; >

    <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=”” />

    ©

    #148875
    kaffekop
    Participant

    Perhaps 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 :)

    #148882
    danielc2384
    Participant

    Thanks! I’m just kinda stuck on the

    <?php the_slug(); ?>

    part though. Does the page ID need to go there or something?

    #148887
    kaffekop
    Participant

    No, <?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.

    #148891
    kaffekop
    Participant

    @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.

    #149013
    sayedtaqui
    Participant

    Well 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;
    }
    
    #162537
    urechstefan
    Participant

    Thank you so so much @Melindrea! You helped me a lot with your code!

    #208054
    nizam
    Participant

    I 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&#8243; />
    <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>

    &lt;header id="masthead" class="site-header" role="banner"&gt;
        &lt;div&gt;
            &lt;a&gt;" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" rel="home" class="site-branding"&gt;
     &lt;!--Editing start from here and i am gona delete all other code from above span section--&gt;
    
                &lt;?php $header_image = get_header_image(); ?&gt;
                &lt;h1 class="site-title"&gt;
                    &lt;?php if ( ! empty( $header_image ) ) : ?&gt;
                        &lt;img /&gt;" width="&lt;?php echo get_custom_header()-&gt;width; ?&gt;" height="&lt;?php echo get_custom_header()-&gt;height; ?&gt;" alt="" /&gt;
                    &lt;?php endif; ?&gt;
    
                    &lt;span&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/span&gt;
                &lt;/h1&gt;
                &lt;h2 class="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt;
            &lt;/a&gt;
    
            &lt;nav id="site-navigation" class="site-primary-navigation slide-left"&gt;
                &lt;a href="#"&gt;&lt;i class="icon-cancel-circled"&gt;&lt;/i&gt; &lt;span&gt;&lt;?php _e( 'Close', 'jobify' ); ?&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;?php get_search_form(); ?&gt;
                &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary', 'menu_class' =&gt; 'nav-menu-primary' ) ); ?&gt;
            &lt;/nav&gt;
    
            &lt;?php if ( has_nav_menu( 'primary' ) ) : ?&gt;
            &lt;a href="#"&gt;&lt;i class="icon-menu"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;?php endif; ?&gt;
        &lt;/div&gt;
    &lt;/header&gt;&lt;!-- #masthead --&gt;
    
    &lt;div&gt;
    

    `

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Back End’ is closed to new topics and replies.