WordPress.org

Ready to get started?Download WordPress

Forums

willingness
[resolved] Add a bio picture left of the header text? (33 posts)

  1. JDK1313
    Member
    Posted 8 months ago #

    Is there a way to add a small picture next to the header text on the left?
    Thanks!

  2. Manish Suwal 'Enwil'
    Member
    Theme Author

    Posted 8 months ago #

    Yes.

    But it requires some coding.

    You might want to follow this advice -> How to insert image on header

  3. JDK1313
    Member
    Posted 8 months ago #

    I don't mind doing some coding, but I can't seem to find a code that works. A broken link keeps showing up.
    I have put this in <img src="images/cropped-bio_pic_small.jpg" />
    and I've tried this
    <img src="<cropped-bio_pic_small>

    The image is in the library, so I'm not sure what I'm doing wrong.

  4. JDK1313
    Member
    Posted 8 months ago #

    Also, I am putting the code before this

    <h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code has now been permanently damaged by the forum's parser.]

    Seems like the correct place because the broken image is showing up where I want the picture.

  5. JDK1313
    Member
    Posted 8 months ago #

    <h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

    Do I need to be doing something in the custom-header.php and the custom css. I've tried so many things I am losing track of what I tried where and with what code. :)

  6. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    You should be using a child theme for these changes - as is, all of your changes will be lost when the theme is updated -

    http://codex.wordpress.org/Child_Themes

  7. JDK1313
    Member
    Posted 8 months ago #

    I have a custom CSS, but after all the research I have found I am lost as what to change where. When I change the code in the custom css noting is happening.

  8. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    If you are modifying the header.php file, that has to be done in a child theme.

  9. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    I also would not use a 6 year old thread about another theme as a good reference. Could you post a link to your site.

  10. JDK1313
    Member
    Posted 8 months ago #

  11. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    You need to use a child theme to make changes to theme files:

    http://codex.wordpress.org/Child_Themes

  12. JDK1313
    Member
    Posted 8 months ago #

    I appreciate you trying to help, but I need suggestions on the code. I have no problem using a child theme, but I'm still having problems with the code and my picture showing up as a broken link. Which is also why I posted in the trouble shooting forum as well as here, as you saw.

  13. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    We don't generally like to help people do misguided things that will create bigger problems down the road.

    That said, try uploading the image to the media library and changing the file path here to the one from that image:

    <img src="images/cropped-bio_pic_small.jpg" />
  14. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    If that doesn't work, can you post the header.php file? Be sure to use the code buttons when posting code on these forums.

  15. JDK1313
    Member
    Posted 8 months ago #

    Thank you, I will install the child theme and give that a try.

  16. JDK1313
    Member
    Posted 8 months ago #

    Here is the header.php

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package willingness
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    	<!-- For Responsive Layout from http://www.catswhocode.com/blog/making-a-website-responsive-in-3-easy-steps -->
    	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <!-- Responsive Ends Here -->
    
    <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' ); ?>" />
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<?php do_action( 'before' ); ?>
    
    	<header id="masthead" class="site-header" role="banner">
    		<div class="site-branding">
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</div><!--end site-branding -->
    
    		<div id="header-right" class="header-sidebar">
    				<aside id="search-box"><!--start of #search-box -->
                		<?php get_search_form(); ?>
            		</aside><!-- end of #search-box -->
    		</div><!--end of header right-->
    
    		<!-- Custom Header code from custom-header.php -->
    		<?php $header_image = get_header_image();
    	if ( ! empty( $header_image ) ) { ?>
    		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
    		</a>
    	<?php } // if ( ! empty( $header_image ) ) ?>
    		<!-- End Custom Header from custom-header.php -->
    
    		<nav id="site-navigation" class="navigation-main" role="navigation">
    			<h1 class="menu-toggle"><?php _e( 'Menu', 'willingness' ); ?></h1>
    			<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'willingness' ); ?>"><?php _e( 'Skip to content', 'willingness' ); ?></a></div>
    
    			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    		</nav><!-- #site-navigation -->
    	</header><!-- #masthead -->
    
    	<div id="main" class="site-main">
  17. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Where's the image you want to use? Upload it to the media library and post the link to it here.

  18. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Also, is that the original, unmodified header.php file?

  19. JDK1313
    Member
    Posted 8 months ago #

  20. JDK1313
    Member
    Posted 8 months ago #

  21. JDK1313
    Member
    Posted 8 months ago #

    yes, that's the original unmodified header.php. I changed the colors in the custom css plugin, not the header file.

  22. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Okay, that's fine - as is the image - let me fuss around with it on a test site.

  23. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Okay, so try adding this:

    <div id="bio-image">
    <img src="http://www.wilsonpuleo.com/wp-content/uploads/2013/11/header-image.jpg" alt="bio image" />
    </div> <!-- end of #bio-image>

    Right under this line:

    <div class="site-branding">

    Then add to custom CSS (or a child theme style.css file):

    #bio-image img {
         float: left;
    }

    We might need to change some other CSS but see where that gets to.

  24. JDK1313
    Member
    Posted 8 months ago #

    Thank you, I got the child theme created and activated and I followed your input directions. Image showed, YAY!! But the site title and tagline are missing and the text on the navigation menu is doubled.

  25. JDK1313
    Member
    Posted 8 months ago #

    If it's a spacing issue I am ok with putting it above the search box too.

  26. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    But the site title and tagline are missing

    That was due to my mistake - sorry!

    Fix that last line of the code to this:

    </div> <!-- end of #bio-image -->

    Then we do still need to fuss with some CSS.

  27. JDK1313
    Member
    Posted 8 months ago #

    Great, that worked to get the title back.

  28. JDK1313
    Member
    Posted 8 months ago #

    Is there a way to get the picture next to the site title? Do I need to change the font size or just put the code down a line?

  29. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Hey sorry I missed this until now - let me look at it as soon as I get to a better computer for CSS stuff - in the next hour or so :).

  30. JDK1313
    Member
    Posted 8 months ago #

    :) Thanks again for all your help. Take your time.

Reply »

You must log in to post.

About this Theme

About this Topic