Hi,
On seeing the site it seems that whole header is a single image here and already points to the site itself.
Please make it more clear…
cheers.:)..
Sure,
Let’s say the left half or Stein logo will stay as is (link = lindastein.com/new), while the right half, starting at the Have Art: Will Travel! logo will link to haveartwilltravel.org.
Thanks,
Hi,
If you want single image to link to two different parts then you would have to use image maps, refer to this article for that:
http://www.onextrapixel.com/2009/04/30/how-to-create-multiple-links-on-a-single-image-with-image-map/
Or
If you want to do it simply by placing two images, one for logo and other for right half then go into the header.php file and a link there manually….and remember to do the changes in a child theme only to avoid any loss of data if theme is updated in future…
Cheers..:)..
Hi wp-21,
I looked over the image mapping and came up with code but am not sure where to put it.
<body>
<img src="header-stein-hawt.png" alt="Stein & HAWT header" usemap="#header-stein-hawt" />
</body>
<map name="header-stein-hawt">
<area shape="rect" coords="275, 0, 645, 100" href="http://haveartwilltravel.org" title="Have Art: Will Travel! Inc." alt="Have Art: Will Travel! Inc." />
</map>
Can you help me with this?
Thanks,
Hi,
From where did you place the header image..?
You can place this code inside header.php file.
<map name="header-stein-hawt">
<area shape="rect" coords="275, 0, 645, 100" href="http://haveartwilltravel.org" title="Have Art: Will Travel! Inc." alt="Have Art: Will Travel! Inc." />
</map>
Cheers..:)..
You can place this code inside header.php file.
That needs to be in a copy of the theme’s header.php file in the child theme.
Yeah i checked your site, you placed it from dashboard.
It’s fine.Header image is called in header.php file.
Just place the above code in it.
And use child theme, do no edit the source file directly.
Cheers..:)..
I uploaded the header image through wordpress appearance>header.
I made a child of the oxygen theme.
I only have the .css file in there right now.
Do I copy the header.php file and put it in oxygen child?
Is there a precise location within the header.php file where I would put the code?
Thanks for your help,
I uploaded the header image through wordpress appearance>header.
If you’re doing that, it’s fine – no need to copy the header.php file to the child theme.
Thanks,
I’ll let you know how it goes.
It doesn’t seem to be working.
Where in the header.php file should I put the code?
Here is the header code.
Thanks,
<?php
/**
* Header Template
*
* The header template is generally used on every page of your site. Nearly all other templates call it
* somewhere near the top of the file. It is used mostly as an opening wrapper, which is closed with the
* footer.php file. It also executes key functions needed by the theme, child themes, and plugins.
*
* @package Oxygen
* @subpackage Template
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<?php if ( hybrid_get_setting( 'oxygen_favicon_url' ) ) { ?>
<!-- Favicon -->
<link rel="shortcut icon" href="<?php echo hybrid_get_setting( 'oxygen_favicon_url' ); ?>" />
<?php } ?>
<!-- Title -->
<title><?php hybrid_document_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- WP Head -->
<?php wp_head(); ?>
</head>
<body class="<?php hybrid_body_class(); ?> no-js">
<?php do_atomic( 'open_body' ); // oxygen_open_body ?>
<div id="container">
<div class="wrap">
<?php do_atomic( 'before_header' ); // oxygen_before_header ?>
<div id="header">
<?php do_atomic( 'open_header' ); // oxygen_open_header ?>
<div id="branding">
<?php oxygen_site_title(); ?>
<?php hybrid_site_description(); ?>
</div><!-- #branding -->
<?php get_sidebar( 'header' ); // Loads the sidebar-header.php template. ?>
<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>
<?php do_atomic( 'header' ); // oxygen_header ?>
<?php do_atomic( 'close_header' ); // oxygen_close_header ?>
</div><!-- #header -->
<?php do_atomic( 'after_header' ); // oxygen_after_header ?>
<?php do_atomic( 'before_main' ); // oxygen_before_main ?>
<div id="main">
<?php do_atomic( 'open_main' ); // oxygen_open_main ?>
Hi wp-21,
Can you tell me more about this option:
“If you want to do it simply by placing two images, one for logo and other for right half then go into the header.php file and a link there manually….and remember to do the changes in a child theme only to avoid any loss of data if theme is updated in future…”
Thanks,
Hi,
I saw your site, there is no need for second one as first one is working only thing is that you have placed the code for map but did not give the header image the map id.
I just did it in firebug and it is working.
You just need to place this usemap="#header-stein-hawt3" inside the imgtag for the header image like this,
<img class="logo" usemap="#header-stein-hawt3" src="http://lindastein.com/new/wp-content/uploads/2013/08/header-stein-hawt3.png" alt="LindaStein.com">
and it works.
Cheers..:)..
And to make your life easier you will find that img tag inside the functions.php file.
Look for this block of code:
/**
* Oxygen site title.
*
*/
function oxygen_site_title() {
$tag = ( is_front_page() ) ? 'h1' : 'div';
if ( get_header_image() ) {
echo '<' . $tag . ' id="site-title">' . "\n";
echo '<a href="' . get_home_url() . '" title="' . get_bloginfo( 'name' ) . '" rel="Home">' . "\n";
echo '<img class="logo" src="' . get_header_image() . '" alt="' . get_bloginfo( 'name' ) . '" />' . "\n";
echo '</a>' . "\n";
echo '</' . $tag . '>' . "\n";
This is just a snippet, and in this the img tag you see is responsible for the header image.
echo '<img class="logo" src="' . get_header_image() . '" alt="' . get_bloginfo( 'name' ) . '" />'
Now you just need to place that map id inside this tag as this:
echo '<img class="logo" usemap='#header-stein-hawt3 src="' . get_header_image() . '" alt="' . get_bloginfo( 'name' ) . '" />'
and see the magic happen.
but to remind you use your child theme, do not edit this directly.
Cheers…:)..
thanks wp-21,
I have made a child theme of oxygen and have copied the function.php into the child folder and am getting this:
Fatal error: Cannot redeclare oxygen_theme_setup() (previously declared in /home/stein/public_html/new/wp-content/themes/oxygen-child/functions.php:26) in /home/stein/public_html/new/wp-content/themes/oxygen/functions.php on line 114
It is possible I don’t understand how the child theme works.
Let me know how to not edit this directly.
Thanks
