Make Header Image Link to Home Page

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter arcilli

    (@arcilli)

    This is my header:

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package Expound
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://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( 'expound_header_before' ); ?>
	<header id="masthead" class="site-header" role="banner">
		<div class="site-branding">
			<div class="site-title-group">
				<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>
		</div>
		<nav id="site-navigation" class="navigation-main" role="navigation">
			<h1 class="menu-toggle"><?php _e( 'Menu', 'expound' ); ?></h1>
			<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'expound' ); ?>"><?php _e( 'Skip to content', 'expound' ); ?></a></div>

			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 3 ) ); ?>
			<?php do_action( 'expound_navigation_after' ); ?>
		</nav><!-- #site-navigation -->
	</header><!-- #masthead -->
	<?php do_action( 'expound_header_after' ); ?>

	<div id="main" class="site-main">

    Please go through the below link. I trust this is what you are looking for.
    https://www.ads-software.com/support/topic/change-header-text-to-header-image?replies=18

    Note:
    This code has to get into your child theme style.css

    Thread Starter arcilli

    (@arcilli)

    Thank you a lot! ??
    Regard from Romania!

    Thread Starter arcilli

    (@arcilli)

    Still, I don’t understend. Look at my site now: https://gabrielraileanu.com/

    I make a new director, expound-child and I have created a file called style.css. That containts:

    /*
 Theme Name:     Expound
 Description:    An awesome magazine theme for your WordPress site. Responsive layout, post thumbnails support, featured posts and more.
 Author:         Konstantin Kovshenin
 Author URI:     https://kovshenin.com
 Template:       expound
 Version:        1.9
*/

@import url("../expound/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
.site-title a {
    background: url('https://i.imgur.com/gZ4ZXne.png') 0 0 no-repeat;
    width: 300px;
    height: 120px;
    text-indent: -9999px;
}

    But it dont’ works. ??
    Please help!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To clarify, which do you want to do:

    1. Link the header image to your homepage
    2. Change the header text to a header image
    Thread Starter arcilli

    (@arcilli)

    I want to link the header image to my homepage.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Did you set up a Child Theme?

    Thread Starter arcilli

    (@arcilli)

    I can’t. My director shows like this, and style.css contains only this code: `/*
    Theme Name: Expound
    Description: An awesome magazine theme for your WordPress site. Responsive layout, post thumbnails support, featured posts and more.
    Author: Konstantin Kovshenin
    Author URI: https://kovshenin.com
    Template: expound
    Version: 1.9
    */

    @import url(“../expound/style.css”);

    /* =Theme customization starts here
    ————————————————————– */
    .site-title a {
    background: url(‘i1.wp.com/gabrielraileanu.com/wp-content/uploads/2013/10/cropped-ddoks2.jpg.png’) 0 0 no-repeat;
    width: 1000px;
    height: 120px;
    text-indent: -9999px;
    } `
    If I activate expound-child, my banner and my right bar it’s not show.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think in Child Themes you have to redo your theme settings – so if your banner and right bar were done in theme settings you need to redo them.

    Thread Starter arcilli

    (@arcilli)

    I don’t understand. Can you explain, please?

    Looks like JetPack mobile is stuck “on” – start by deactivating ALL plugins. Clear any caching on your site and browser too.

    I’m new at the CSS/HTML coding thing, but there seems to be a lot of confusion around adding header logos, resizing them, and linking them back to the main page. Here’s the fairly easy solution I figured from mining the forums:

    1. Add your header image to your media gallery and then add this CSS code (or something like it) to your child theme:
    .site-title a {
    background: url(‘headerpicture.png’) 0 0 no-repeat;
    width: 1000px;
    height: 120px;
    text-indent: -9999px;
    }

    2. You also need to add a Site Title to the basic Expound theme (but, I found, not tagline text). (To do so, go to Customize Theme–>Site Title & Tagline). The ‘text-indent: -9999px’ code will move your title off the screen). In my experience, the code in step #1 wasn’t working if I didn’t customize the theme and add the Site Title.

    3. After steps #1 and #2 you should have a linked logo on your header page. If you want to resize the header banner–I found it was too large for my taste–you need to add this code to your child theme CSS:
    .site-title-group {
    margin: 20px 40px;
    }
    (The 20px refers to the height, and the 40px refers to the width).

    4. Finally, I had trouble with the dimensions of my header.png file, so I added one final line of code to the .site-title script: ‘background-size: 50%’ before the close-bracket. That will resize your image within your new header dimensions and you can fool around with it to make it all fit.

    I’m sure there are more experience people out there who may have an easier way to do all this, but I finally got things to where I like them using advice from about 4 different Expound forum threads.

    I hope this is helpful.

    I struggled with this too in the Genesis/Innovative child theme. I wanted a responsive, full-width, clickable header and as a non-techie had to piece together advice from various sources to work out a solution.

    Here’s how I managed to do it in the end:
    Responsive Headers for Genesis and especially the Innovative Theme

    Course you’d have to adapt it to your own theme but I hope it helps anyone with similar aims.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Make Header Image Link to Home Page’ is closed to new replies.