alternate header image using custom template WordPress
I have created a child theme to heuman.
I have created a custom template for the page i wish to display the alternate header image.
I have created a custom header.php that my custom template links to.
I have uploaded the alternate image into wp-content/uploads/2014.. same path as my main template
I have also tried linking to the alternate image with out calling it.
here are the two code elements i have tried in my header-kids.php
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="http://adamhurstartstudios.com/wp-content/themes/hueman/img/Header-Kids-3-Animated.gif" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
and
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
my custom template is displaying fine other than it is still serving up the header image used on the rest of the site.
http://adamhurstartstudios.com/kids/
Answers (4)
Arnav Joy answers:
can you show us full file please. template and the header file./
Arnav Joy comments:
how you called the header in template file?
you should replace <?php get_header() ?> with <?php get_header('kids');?>
ahurst2001 comments:
my-kids-template.php
<?php
/*
Template Name: my-custom-kids
*/
?>
<?php get_header-kids(); ?>
<section class="content">
<?php get_template_part('inc/page-title'); ?>
<div class="pad group">
<?php while ( have_posts() ): the_post(); ?>
<article <?php post_class('group'); ?>>
<?php get_template_part('inc/page-image'); ?>
<div class="entry themeform">
<?php the_content(); ?>
<div class="clear"></div>
</div><!--/.entry-->
</article>
<?php if ( ot_get_option('page-comments') != '' ) { comments_template('/comments.php',true); } ?>
<?php endwhile; ?>
</div><!--/.pad-->
</section><!--/.content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
--
header-kids.php
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(''); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<header id="header">
<?php if (has_nav_menu('topbar')): ?>
<nav class="nav-container group" id="nav-topbar">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
<div class="container">
<div class="container-inner">
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand">
<div class="search-expand-inner">
<?php get_search_form(); ?>
</div>
</div>
</div><!--/.container-inner-->
</div><!--/.container-->
</nav><!--/#nav-topbar-->
<?php endif; ?>
<div class="container group">
<div class="container-inner">
<?php if ( ot_get_option('header-image') == '' ): ?>
<div class="group pad">
<?php echo alx_site_title(); ?>
<?php if ( !ot_get_option('site-description') ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
</div>
<?php endif; ?>
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="http://adamhurstartstudios.com/wp-content/themes/hueman/img/Header-Kids-3-Animated.gif" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
<?php if (has_nav_menu('header')): ?>
<nav class="nav-container group" id="nav-header">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
</nav><!--/#nav-header-->
<?php endif; ?>
</div><!--/.container-inner-->
</div><!--/.container-->
</header><!--/#header-->
<div class="container" id="page">
<div class="container-inner">
<div class="main">
<div class="main-inner group">
I also used the exact code from page.php but referenced it to my custom header-kids.php with the assumption that since it was a custom template it would follow to the image i put in wp-content/uploads/2014.....
Arnav Joy comments:
see this function in your template file
<?php get_header-kids(); ?>
change it to
<?php get-header('kids'); ?>
Hariprasad Vijayan answers:
Hariprasad Vijayan comments:
Hello,
I think, in your header-kids.php, you need to use your first set of code, that is
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="http://adamhurstartstudios.com/wp-content/themes/hueman/img/Header-Kids-3-Animated.gif" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
And you need to call this header-kids.php in your template file like get_header('kids');
ahurst2001 comments:
already done... from my template file
<?php
/*
Template Name: my-custom-kids
*/
?>
<?php get_header-kids(); ?>
ahurst2001 comments:
have also tried
<?php
/*
Template Name: my-custom-kids
*/
?>
<?php get_header('kids'); ?>
<section class="content">
<?php get_template_part('inc/page-title'); ?>
<div class="pad group">
Hariprasad Vijayan comments:
What you get when you try it?
Hariprasad Vijayan comments:
Also ensure you are selected correct template for the kids page from dashboard.
ahurst2001 comments:
after a lot of trouble shooting serving blank page I finally have my custom template displaying exactly like my main template (with the wrong header image)
ahurst2001 comments:
<blockquote>Also ensure you are selected correct template for the kids page from dashboard.</blockquote>
only have one custom template, so definitely have the right one...
ahurst2001 comments:
<blockquote>Also ensure you are selected correct template for the kids page from dashboard.</blockquote>
only have one custom template, so definitely have the right one...
Hariprasad Vijayan comments:
it seems like your header-kids.php not calling. Please make sure.
ahurst2001 comments:
when you say header-kids.php is not calling, do you mean my-kids-template.php is not being linked up, or that header-kids.php is not properly calling up the image?
I believe i was on the right track creating a custom template and header to go with it I just cant seem to figure out how to direct the new header-kids.php to serve the image i want. it still points to the image that the rest of my site uses. ( I used page.php and just added <?php
/*
Template Name: My Custom Page
*/
to the top.... so i can see why it is serving the main image but i thought since it was a seperate template with seperate header it might direct to the new image. If i can just point to the image from header-kids.php, everything else seems to be working properly.
Bob answers:
It seems that you might be calling get_header() and including header-kids.php also some way.
change it as Arnav and Hariprasad's instructions.
Other than that your header-kids.php is checking that you have set header-image or not(below code)?
<?php if ( ot_get_option('header-image') ): ?>
so if you remove header-image from backend then your custom template(kids) will also not show your custom image.
if you do not want to create another header file then you can also try following code in your header.php file
<?php if ( is_page_template('my-kids-template.php') ) { ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="http://adamhurstartstudios.com/wp-content/themes/hueman/img/Header-Kids-3-Animated.gif" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php
}else{
?>
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
<?php
}
?>
replace your-template-file-name.php with your template file name.
and if your templage file is in directory then use "templates/my-kids-template.php.php"
ahurst2001 comments:
what is <?php if ( ot_get_option('header-image') ): ?> referencing? on my main template it points to the header image i uploaded.
how do i control what ('header-image') points to? since its a seperate template and header, shouldnt i control what it points to?
ahurst2001 comments:
<blockquote>replace your-template-file-name.php with your template file name.
and if your templage file is in directory then use "templates/my-kids-template.php.php"</blockquote>
I dont quite understand this. the my-kids-template.php.php ??
ahurst2001 comments:
<blockquote><?php if ( is_page_template('my-kids-template.php') ) { ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="http://adamhurstartstudios.com/wp-content/themes/hueman/img/Header-Kids-3-Animated.gif" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php
}else{
?>
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
<?php
}
?></blockquote>
where would i place this in my header.php file?
Bob comments:
you can simply try this
replace following code in your main header.php
**old code**
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
**new code**
<?php if ( is_page_template('my-kids-template.php') ) { ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="http://adamhurstartstudios.com/wp-content/themes/hueman/img/Header-Kids-3-Animated.gif" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php
}else{
?>
<?php if ( ot_get_option('header-image') ): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
<?php } ?>
and in your page template do not call custom header file simply call get_header();
Bob comments:
what above code does is it will check if you are using custom template then show you image or show default image.
you can put some html comment like <!-- this is custom template --> in your template then in view source you can check this comment.This way you can check that proper template is being applied to your page.
Bob comments:
Hi ahurst2001,
It seems your problem is solved.
Please close question by voting.
Thanks,
Bhavesh
Ryan S answers:
Make sure you call your header correctly like <code>get_header('custom'); // .e.g header-custom.php<code>
Hope that helps