Change headers for different pages – WordPress
Usually these are standard sections of any website and are not different for different pages but there can be a requirement of different header parts for different pages. The requirement can be of showing some pictorial information like different image in a section of header according to page. Coding this requirement in html pages is possible and easy to do but doing it using a CMS is little difficult because it has its own conventions for sections and layouts.
Thanks to the wordpress which supports this functionality and you can pick the required header according to your need. By default in every theme, there is a header.php which represents the header of the theme and all pages use this as header. This is done by following code.
<?php get_header(); ?>
It is a include tag which includes header.php on you php page so that you can reuse it. This include function can be used to pick different headers as you can pass an argument in this function and the argument $name will call for header-name.php as include. e.g.
<?php get_header('home'); ?>
will include header-home.php in the page. In case you have some part common in your header and some part specific to pages, you can use another include codex get_template_part(). Common part can be placed in a php file and can be included in specific headers accordingly so there will be no repetetive code in your files.
<?php get_template_part( 'commonheadercode' ); // will include (commonheadercode.php) ?>
There are other include functions as well like get_footer and get_sidebar() which can be used as required.
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Hi mate,
Please help. This is really killing me. I tried installing Dynamic Header and it can be installed well. Images can be uploaded. BUT when tried to update image with respective posts/ pages, the purpose of this plugin doesnt seem to works. Please help!
Anyway, my theme is: http://themify.me/themes/itheme2
Thanks!
My method took me forever but it works. I downloaded a page-specific plugin described below that will make all this work. Here is my sweat and tears in writing:
1. Create a new page, name it “example” or whatever.
2. SECOND, (the “forever” part), make sure you don’t have a header uploaded in your “Header” menu (this is from your theme @ WP Panel>Appearance>Header). Click the button “Remove Header Image”, then click “Restore Original Header Image”. I got this as a blank box, same color as the overall WP Panel’s background. If you didn’t and perhaps you actually got your Original Header back on, then try these steps below anyway. If the steps don’t work, remove your Original Header image from the appropriate folder (wp-content or wherever it is) to somewhere else so WP won’t find it. Basically, allow it to load up nothing in that Header box display.
2. Upload Media—aka your newly designed header— at WP Panel>Media Library>Add New. I added a new header and automatically uploads it to the appropriate header image folder from WP. This provides you a convenient URL at the bottom after you uploaded your image from the Upload New Media screen. Copy that URL to your clipboard.
3. Downlowd time. I personally downloaded this:
http://wordpress.org/extend/plugins/page-specific-cssjs/
It is straightforward—basically once activated, create a new CSS file with the name of your page (the one you want changes on)—make sure the slug is exactly the name of your CSS file or else it won’t work. The plugin link tells you all about this. Now that “example.css” will make changes to your new “example” Page, add your copied URL to where the CSS finds its Header information like I did on mine:
/* header */
#header {
background-image:url(‘//uploads/2010/09/bg-header42.jpg’);
background-repeat:no-repeat;
background-position:right;
width: 850px;
height: 140px;
color: #fff;
text-align:left;
}
All I made changes to was I deleted the “background color” line, and wrote in “background-image: url (‘PLACE URL HERE’);
4. Because your css file is named like your page you want changes on, AND you have the ‘page-specific-css’ plugin activated, your new header should appear on your alternate page!
If you have questions, email me: mlopezart@yahoo.com