How to insert a logo in the header?

  • I am pretty new in WordPress world (I came from Joomla)

    I am finding some difficulties to insert a logo into this WordPress test site: http://onofri.org/example/

    I want put my logo in the header of the website, instead the "EXAMPLE" text.

    Looking into the WordPress configuration panel I am not finding where I can upload the logo and automatically put it instead the "EXAMPLE" text in the header (I don't know if this is a standard WordPress function as in Joomla or if it is a feature that can be made available by some specific themes or if I have to put it directly into the code)

    However I am not finding it even in my theme settings.

    What have I to do to put my logo? Have I to insert it directly into my HTML code?

  • Try modifying the header section a bit to comply with the standards. Here is what your code right now:

    <div id="header-image">
       <img width="1102" height="350" alt="" class="header-image" src="http://onofri.org/example/wp-content/uploads/2013/06/header1.jpg">
    </div>
    

    Here is how you can modify the things:

    <div id="header-image">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
           <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" width="HERE" height="HERE" />
        </a>
    </div>
    

    There are only 3 steps now:

    • Instead of using the theme's default header image settings, you can edit your theme's header.php with the code given above.
    • Instead of inserting image from the Add New Media, you can upload image via cPanel (Control Panel of your web host) into the theme folder's sub-folder named 'images'.
    • And instead of making a huge image with background for your logo, try making a simple background-less logo in Photoshop (or any graphics software) - in case of Photoshop, just do it: after placing the logo image in a layer, just delete the background layer and then save the image for web (File > Save for web... [Ctrl + Alt + Shift + S]) and choose the format PNG-24 for a good result. Then save it as logo.png and place it to the '/wp-content/themes/simplemarket/images/' folder.

    Hope you get the rest. If any question, please feel free to comment here under.

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM