WordPress.org

Forums

Ward
[resolved] logo (8 posts)

  1. arieli
    Member
    Posted 1 year ago #

    can i add a logo on the top left corner ?

  2. daftduke
    Member
    Posted 1 year ago #

    Yes you can:

    Like this - Screen shot link.

    Put this code into your child theme header.php so you won't lose all the changes made when the theme updates.

    Child themes are the safest way to go when doing all kinds of modifications.

    <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"/>
        </a>
    </div>

    You will have to upload your logo via ftp, not through the media library.

    First create a folder called 'images' in

    wp-content/themes/ward/

    and then upload your logo into that directory. Make sure it is called 'logo.png'.

    You might need to adjust with CSS to get it exactly as you want.

    I hope that helps!

  3. arieli
    Member
    Posted 1 year ago #

    Thank you!

  4. briz_dad
    Member
    Posted 1 year ago #

    Hello daftduke,

    I attempted to do the same thing - and I used your code above. However, I broke the site.

    How do I effectively call in this element from the child theme?

    Sincerely,
    Greg

    PS. I attempted to drop your code above between the following two snippets:

    <div class="container">
    				<div class="navbar-header">

    So I had:

    <div class="container">
                             <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"/>
        </a>
    </div>
    				<div class="navbar-header">
  5. daftduke
    Member
    Posted 1 year ago #

    Hi Greg,

    It's great to hear you are using a child theme!

    To include this code you need to make a copy of your 'header.php' file and place it in your child theme directory.

    Look for this line of code (line 38ish):

    <a id="site-title" class="navbar-brand" href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?> <small><?php bloginfo( 'description' ); ?></small></a>

    If you want to keep the Site Title place the code below (i.e. around line 39).

    If you don't want to keep the Site Title you can remove the above code and just replace it.

    <div class="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_stylesheet_directory_uri(); ?>/images/logo.png" alt="Logo"/>
        </a>
    </div>

    (Screenshot of new code)

    The img tag contains slightly different code from the previous post to take into account that you are using a child theme.

    get_template_directory_uri - - > get_stylesheet_directory_uri

    And you'll still need to place your logo.png file in your

    wp-content/themes/ward-child/images

    or whatever name you gave your child theme folder.

    I hope that works for you! Let us know how it goes :-)

    - Luke

  6. briz_dad
    Member
    Posted 1 year ago #

    Hello Luke,

    Perfect - works like a charm. (And I found out that just placing the header.php file into the Child-Theme directory works.)

    blackstardevelopment.org/wp-site/

    I have two other questions - and they're different topics - so this item can close out.

    Thanks again!
    Greg

  7. joelsmithlowe
    Member
    Posted 1 year ago #

    daftduke you are awesome for those snippets of code !

    I have a question though if you feel like answering, I was wondering how would you be able to centre the logo.png abit more or give more space between the image and the top Navigation bar.

    <div id="page">
    
    		<header class="<?php echo $bavotasan_theme_options['nav_palette']; ?> navbar navbar-fixed-top" role="navigation">
    			<div class="container">
    				<div class="navbar-header">
    					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    			          <span class="icon-bar"></span>
    			          <span class="icon-bar"></span>
    			          <span class="icon-bar"></span>
    			        </button>
    			        <div class="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_stylesheet_directory_uri(); ?>/images/logo.png" alt="Logo"/>
        </a>
    </div>
    
    				</div>
    				<h3 class="screen-reader-text"><?php _e( 'Main menu', 'ward' ); ?></h3>
    				<a class="screen-reader-text" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'ward' ); ?>"><?php _e( 'Skip to content', 'ward' ); ?></a>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'bavotasan_default_menu' ) ); ?>
    			</div>
    		</header>
  8. daftduke
    Member
    Posted 1 year ago #

    Hi there,

    If I'm understanding correctly you could adjust this with CSS. Something like:

    .header-image {
      margin: 20px 0 0 20px;
    }

    Placed inside your child theme style.css

    If you post a link to your site I could be more exact for you.

    I hope that helps :-)

    - Luke

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags