Home / tut_cpt / Add a Logo or Image to a Template
  • How to Add a Logo or Image to a Template

    add-logo-image-template

    It is common for WordPress themes to allow you to customize the header graphic, or even upload your own logo, nevertheless, there are times when you just need to add an image tag into a template. It may seem easy, but WordPress beginners can be confused as to where to upload the image, and how to write the path to it.

    First of all, you need to upload the image to your theme (or child theme) folder. For the purpose of this tutorial, lets assume that you have placed ‘logo.png’ in the ‘images’ sub-folder inside your theme.

    Then you just need to open ‘header.php’ (or the template where you want to add an image), and add the following code where you want your image to display:

    ( click code to copy )

    wordpress snippet : html

    <>
    <img src="<?php echo get_stylesheet_directory_uri()?>/images/logo.png" alt="My Logo">
    

    get_stylesheet_directory_uri() will return the path to your theme folder, something like: http://www.mysite.com/wp-content/themes/my-theme (without a trailing slash), so then all we need to do is fill in the rest of the path to your image.

    So for example, your themes may have a line of code similar to this:

    ( click code to copy )

    wordpress snippet : html

    <>
    <h1 class="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
            <?php bloginfo( 'name' ); ?>
        </a>
    </h1>
    
    Which you can then change to: ( click code to copy )

    wordpress snippet : html

    <>
    <h1 class="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
            <img src="<?php echo get_stylesheet_directory_uri()?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>">
        </a>
    </h1>
    
  • Aaron

    This snippet will be beneficial to beginners to WordPress. By the way, you forgot a semicolon.

    You wrote: <img src="/images/logo.png” alt=””>

    It should be actually: <img src="/images/logo.png” alt=””>

    Cheers

  • chris

    I always use this: – it’s shorter :)

  • chris

    oh crap, this code: bloginfo(‘template_url’)