Different mastheads for different pages
-
Is there a way I can have the masthead graphic change for different pages. For example, if I created a page called “links,” can I have a different masthead for that page?
Thanks. 🙂
-
Sure, there are lots of ways that you could do that.
I think the simplest way to go about it would be to use Page Templates.
You can just use a different page template for each page that you want a different header graphic on, the documentation on Designing Headers might be helpful as well.
Thanks for the reply. Is there not a bit of “magic” code that could be used to reference specific headers for specific pages? The site I’m working on has a bunch of pages and that’s a lot of work that I’d like to avoid if possible. 😉
Thanks.
There are so many ways that you could go about this. Using page templates makes it pretty clear what is going to be loaded when. Some of the other ways that you could do it would use less files, but would involve PHP.
However you do it, you will probably want to create a different header file for each page that you want to be different.
You can load different headers on different pages by using the “get_header” tag with the “$name” parameter to specify the custom header you want to load.
You could have just one page template, and use conditional tags to load different headers, something like this:
<?php if ( is_page('about') ) : get_header('about'); elseif ( is_page('contact') ) : get_header('contact'); else : get_header(); endif; ?>You could also have one header with your graphic in it, and have a conditional statement like this:
<?php if ( is_page('about') ) { echo "<img src="about-banner.jpg">"; } elseif ( is_page('contact') ) { echo "<img src="contact-banner.jpg">"; else { echo "<img src="default-banner.jpg">"; endif; ?>Some methods might be faster to execute, but if it takes you longer to research and figure out, you might lose whatever time you would have saved!
Where would I put the code if I used the “get header” tags? Which php file?
You would put that code into your page templates, files like page.php, or page-custom.php.
If you want to load different headers, you need to do it in the templates, these are what load together the header, sidebar, content, and footer.
Take a look at the code for the default theme’s page.php file:
<?php /** * @package WordPress * @subpackage Default_Theme */ get_header(); ?> <div id="content" class="narrowcolumn"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> <div class="entry"> <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?> <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> </div> </div> <?php endwhile; endif; ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>I only have a page.php, so I guess it would go in there?
Also, I have no idea where to put that code in my header.
<head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php if (is_home () ) { bloginfo('name'); echo " - "; bloginfo('description'); } elseif (is_category() ) {single_cat_title(); echo " - "; bloginfo('name'); } elseif (is_single() || is_page() ) {single_post_title(); echo " - "; bloginfo('name'); } elseif (is_search() ) {bloginfo('name'); echo " search results: "; echo wp_specialchars($s); } else { wp_title('',true); }?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <meta name="robots" content="follow, all" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo(wp-content/themes/pixel/images/".$random.".png); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <style type="text/css"> #header #logo { background: <?php $stylesarray = array("mastheadfinal"); $random = $stylesarray[rand(0,count($stylesarray)-1)]; echo "url(wp-content/themes/pixel/images/".$random.".png);" ?> } </style></div> <?php wp_head(); ?> <!--[if lt IE 8]> <link href="<?php bloginfo('template_url'); ?>/ie.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if lt IE 7]> <link href="<?php bloginfo('template_url'); ?>/ie6.css" rel="stylesheet" type="text/css" /> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]--> </head> <body> <div id="wrapper"> <div id="header" onclick="location.href='<?php bloginfo('home') ?>'"> <div id="logo"> <span><?php bloginfo('description'); ?></span> </div> <div id="topright"> <ul><li> <BODY><div id=EchoTopic> <a href="http://notstepfordwives.com/wordpress/?page_id=46" onmouseover="image1.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_2.gif';" onmouseout="image1.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_1.gif';"> <img name="image1" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/cookingbutton_1.gif" border=0></a> <a href="http://notstepfordwives.com/wordpress/?page_id=48" onmouseover="image2.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_2.gif';" onmouseout="image2.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_1.gif';"> <img name="image2" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/tipsbutton_1.gif" border=0></a> <a href="http://notstepfordwives.com/wordpress/?page_id=50" onmouseover="image3.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_2.gif';" onmouseout="image3.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_1.gif';"> <img name="image3" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/shoppingbutton_1.gif" border=0></a> <a href="http://notstepfordwives.com/simplemachinesforum/" onmouseover="image4.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_2.gif';" onmouseout="image4.src='http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_1.gif';"> <img name="image4" src="http://notstepfordwives.com/wordpress/wp-content/themes/pixel/images/icons/forumbutton_1.gif" border=0></a> </BODY> </li> </ul> </div> </div><!-- Closes header --> <div class="cleared"></div>The stuff that I posted are a few different possible solutions, you may need some, or all of them.
You can add a custom header to your page.php yeah, but it will show up on every Page, but not on the posts and categories, just the static pages. If you want different headers on different pages you will need page templates or conditional tags that load different headers.
I strongly recommend just creating a few custom Page Templates just to get started. Don’t worry about adding custom headers to them or anything, just add a bit of different text to each template, or even just a comment. You want to make sure that you have got that part of it down before you go any further, Page Templates are an important building block for a good custom theme.
If you could post a link to your site, and maybe explain in a little more detail how you want the pages organized, what banners on what pages, I might be able to give you a more specific answer that would work for your situation.
- The topic ‘Different mastheads for different pages’ is closed to new replies.