newheaderdefault

Adding and Removing Default Headers in TwentyEleven

After helping someone through some issues with adding and removing the default headers in twentyeleven, I thought that would be a great idea for our next tutorial. So we are going to cover adding and removing default headers to the twentyeleven theme. The techniques are the same as with twentyten, so keep reading if you are using that one. We will also look into how to set one of your headers as the default as well. This is pretty simple for you, let’s dig in!

The first thing we need to do, is set up our headers. You will need to make these images to fit your theme. If you are using twentyeleven in an unmodified state, that will be 1000x288px. If you followed along with our recent tutorial series to edit your theme width and header size, then make your headers accordingly. For instance my new headers are 1050x175px. For each new header you make, you also need thumbnails. Make those at exactly 230x66px. It’s easiest to just stick with the size already being used.

Once you have thos images made, put them into the images folder in your child theme. If you don’t have an images folder, just make one. It doesn’t really have to be named images, call it what you want. As long as you reference it properly in your code, you are fine. But why not call it what it is eh? If you don’t have a child theme, well now is the time to do that! So let’s look at adding in our new default images. It’s done with the register_default_headers function. Take a look at this block of code:

//ADD NEW DEFAULT HEADER
function voodoo_header_in() {
$vp_dir = get_bloginfo('stylesheet_directory');
define( 'HEADER_IMAGE', '/wp-content/themes/voodoochild2011/images/voodooheader.jpg' );
	register_default_headers( array (
		'voodoopress' => array (
			'url' => "$vp_dir/images/voodooheader.jpg",
			'thumbnail_url' => "$vp_dir/images/voodooheader-thumb.jpg",
			'description' => __( 'VoodooPress', 'twentyeleven' )
			),

		));
}
add_action( 'after_setup_theme', 'voodoo_header_in' );

On line 2, we just name our function, as always, call it what you like. As long as you refer to it in the last line by the same name, you are fine. On line 3, we just assign our child themes directory to a variable for ease of use. You can change vp_dir to whatever you like. Line 4 is a bonus line I chucked in there, it sets the default header to my voodooheader.jpg. Set it to whatever image you would like to be the default image, if no other image is assigned. Starting on line 5, we set up an array for a default header image. line 6 establishes the ID of the image, line 7 tells WordPress where it is located (notice, using our variable), line 8 sets up the thumbnail to be displayed in the admin area, and line 9 is the display name. Finally down at the bottom, we run our function, which I named voodoo_header_in on after_setup_theme. Simple right? Want to do more than 1 header image? Just add em in like this:

//ADD NEW DEFAULT HEADER
function voodoo_header_in() {
$vp_dir = get_bloginfo('stylesheet_directory');
define( 'HEADER_IMAGE', '/wp-content/themes/voodoochild2011/images/voodooheader.jpg' );
	register_default_headers( array (
		'voodoopress' => array (
			'url' => "$vp_dir/images/voodooheader.jpg",
			'thumbnail_url' => "$vp_dir/images/voodooheader-thumb.jpg",
			'description' => __( 'VoodooPress', 'twentyeleven' )
			),
		'voodooempire' => array (
			'url' => "$vp_dir/images/voodooempire.jpg",
			'thumbnail_url' => "$vp_dir/images/voodooempire-thumb.jpg",
			'description' => __( 'VoodooEmpire', 'twentyeleven' )
			),

		));
}
add_action( 'after_setup_theme', 'voodoo_header_in' );

As you can see, we just keep repeating the array over and over for each new header image we want added in to our twentyeleven child theme. So if we keep adding in our own images, it’s going to get pretty crowded in there. Let’s remove some of the standard header images that ship with twentyeleven. This is done using the unregister_default_headers function.

The first thing we need to do is look through functions.php of twentyeleven, the parent theme, and see which headers we want to remove. Here is a list of IDs for twentyeleven:

  • wheel
  • shore
  • trolley
  • pine-cone
  • chessboard
  • lanterns
  • willow
  • hanoi

So you can remove some, or all of them if you wish. Now on to the code:

// REMOVE SOME DEFAULT HEADERS
function voodoo_header_out() {
	unregister_default_headers( array(
		'wheel',
		'shore',
		'trolley')
	);
}
add_action( 'after_setup_theme', 'voodoo_header_out', 11 );

Now you can see I called this function voodoo_header_out. Call it what you like once again! Then we just put together an array removing each of the default headers we want gone. And at the end, we hook our function onto after_setup_theme, but unlike earlier, we add the number 11. That number is the priority. It tells WordPress when to fire this. The default priority is 10. So this fires after standard stuff. What does that mean to you? Well, twentyeleven runs at priority 10, so putting that 11 there allows for the default headers to be set up before we try to remove them.

Hopefully this post helps you move along on customizing your child theme. Now we’ve learned how to tweak the width, the header size, move some header elements around, and finally today we added and removed some header images, and set one of them to be the default. Let me see what you’ve got going on with twentyeleven!

40 thoughts on “Adding and Removing Default Headers in TwentyEleven”

      1. Do you know a way to replace the header image by a slideshow? I have tried the nivoslider, but I am having difficulty with the process of using attached images from posts.
        I am using the following function:

        	<?php
        $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => null ); 
        $attachments = get_posts( $args );
        if ($attachments) { ?>
        		<div id="slideshow">
        			<?php
        	foreach ( $attachments as $post ) { ?>
        				<?php setup_postdata($post);
        		echo wp_get_attachment_link($attachment->ID, 'full', false, false); ?>
        			<?php } ?>
        		</div>
        		<!-- #slider1 -->
        		<?php }
        wp_reset_query();
        ?>

        That code actually retrieves all the images (in any format I want), but I used different slideshow technic without good result.
        I would be great to show us how to take the header to a whole different level by envisioning more than simple still images.

        1. Well…. I’ll be honest with ya, I hadn’t looked into sliders at all, as I truly dislike them! But that’s personal opinion…. it would definitely be something good to show the VoodooPress readers (if I can figure it out) so I’ll look into it next week and see if I can’t come up with a cool solution. Thanks for the idea!

          1. I was more expecting something simpler where the wp query could be used for the slidershow without plugin or a complex custom function to add elsewhere than inside the header itself or at the very least the functions.php file. I will send you what have on mind.

        2. I’m pretty sure I understand what you are trying to do. Work is gonna be hectic this week, but when I can get a few spare minutes, I’ll try to see what I can come up with.

  1. Thanks for this and the other tutorials and your site looks great. I know this is a bit off topic, but would you consider making a tutorial on adding a Google font selector to Twenty Eleven using a child theme?

    @Toure I’m going to try and add Nivo slider to Twenty Eleven. I added to a Twenty Ten child theme with options, it shouldn’t be much different. If you want to try it yourself you can grab it here http://zeaks.org/wp-content/plugins/download-monitor/download.php?id=22

    1. A font selector eh? I have a really cool setup on my personal blog rvoodoo.com. It has a font uploader built in which uses the WP media uploader. Upload as many fonts as you want, and then apply them to the site from dropdowns. There are like 15 options where custom uploaded fonts can be used. That might be a bit involved, but what are you envisioning? Like having set fonts in the theme to choose from? Or being able to drop in the font to use? I’m trying to envision what the final product would look like…..

      1. Basically a dropdown with a selection of 5-10 (number doesn’t matter) Google fonts for content and another for titles. I know they can be added easily through the CSS, I thought it might be nice to have a selector added to the current Twenty Eleven options in a child theme though.

        I’ve added a couple of color schemes to the current options in my child theme, I’m sure it would be easy to add new layouts, but adding a whole new option would be different.

        1. Oh that technique will be simple! I’ll try to get to that soon. Adding in an option to the option page should be easy since an option page already exists, and then just spit out the css to wp_head. It can all be handled from functions.php!

  2. Just noticed a problem I’m having with this. Notice: Constant HEADER_IMAGE already defined. Can’t use a filter on a constant, how do you get around this error? or am I missing something obvious? It the line adding the new default header that’s causing it.

    1. Where are you seeing that? Is it with debug on? Perhaps it’s something similar to this? http://vudu.me/oy Maybe gotta run a filter for setting that default header? I’ll check into that some more soon. But honestly, that error is only due to the define in line 4, you can just get rid of line 4 if you want, as that just sets the default header.

    1. By default in the twentyeleven theme, if you set a featured image for a post or page, that featured image is used as the header image for the respective post/page. as long as the image is minimally the set header size, which on an unmodified twentyeleven is 1000x288px I believe

  3. Hi as a WordPress newby I am on a (very) steep learning curve. Is it possible to have header images linked to a page or menu? I’ll first give it a go to change the standard images for my own… bt it would be great if you could give me a hint on how to get the above!! thanks

    1. So what you are looking for is to have different header images on different pages? Or you want the link for where the image leads when clicked to change per page? Also what theme are you using? Twentyeleven? I should be able to help once I know exactly what you are looking for, and depending what theme you are using.

  4. Is it possible to have the header image only show on the home page (which technically is a “post” in the admin) but not on the interior pages (which are “pages” in the admin)?

    I’m putting together a fairly basic 4 page site for my wife – http://www.spinforautism.com and the header photo looks great on the home page, but looks out of place on the interior pages. My preference would be to not show the image on those pages and only show the logo at the top, the text below it – and then have the nav bar and the info on the page that we input.

    Thanks in advance! Tj

    1. Yeah, it’s super simple. Technically, the home page is not a post, it’s an archive of posts. First, have you made a child theme? http://vudu.me/child for info on that if not.

      It is very important, so that your changes do not get lost on a WP upgrade.

      After making a child theme, you would copy the header.php from the parent theme, and include it into the child theme, and make your edits there. The change only takes 2 lines of code.

      http://pastebin.com/gMm6pkX3

      Is the header from twentyeleven, I added in lines 83, and 98. It wraps the header image in a conditional to check if it’s the home page. If so, execute the header image code, if not home, skip the code

      You can see it in action on my test site at cdn.rvoodoo.com I’ll leave it up for a day or two.

        1. Sure, glad you are happy with the results! That conditional will ONLY affect the home page. So, for instance, if more than 10 posts are made, and the front page developed further pages (page 1, page 2) the image would only show up on page 1, only the home page. If you ever want to modify the behaviur of that conditional, you can look in the code on the WP site for conditionals and get guidance, or ask me again!

          1. Can I push the envelope and ask one more question? If you go back to the site you’ll see I added the right rail to the home page. I changed the option in the theme from “one column” to “content on the left”.

            BUT, now the interior pages are very narrow. I’m not sure exactly what I did to remove the rail on those pages but how do I expand the content areas of those pages? Ideally to at least 800px or maybe 850?

            Thanks, Tj

          2. I’m not sure how it looked before, but, that is how pages are designed to look in 2011. http://cdn.rvoodoo.com/lorem-ipsum/ for instance. Now if you just want the sidebar back, everytime you create a page, or edit a page (or even use the quick edit feature) you have the option under page attributes to pick a template. If you switch that from default, to sidebar template, you get your sidebar back like http://cdn.rvoodoo.com/page-with-comments/. Is that what you want, or you wish to leave the sidebar gone, and widen the content?

    1. So… on first gloss

      .page #content {
      	margin: 0 3.6%;
      	position: relative;
      	width: auto;
      }
      .page .entry-header,
      .page .entry-content,
      .page footer.entry-meta,
      .page #comments-title {
      	margin: 0 auto;
      	width: 78.9%;
      }
      

      in my child theme accomplishes http://cdn.rvoodoo.com/lorem-ipsum/

      Basically reduced margings on pages, and widened the content. Obviously those percentages can be played with….. And this affects pages only, not single posts.

  5. Can anyone help me completely remove my header?
    Im trying to embed my blog into a webpage and don’t need the header then. I just need the posts.

    If anyone could help me I would be very gratefull. Im new to WP

    1. ALl depends what theme you are using, etc. Twnetyeleven allows you to remove header images, etc. But if you are just trying to use your posts in another site, you may want to look at:
      http://www.corvidworks.com/articles/wordpress-content-on-other-pages
      http://codex.wordpress.org/Integrating_WordPress_with_Your_Website
      It is possible to just call the posts and run a loop on another page. I used to do that with an old html site before I converted it to WP.

  6. Ok, I am not totally new to working with WordPress themes, but I’m definitely still learning. I have created a twenty eleven child theme, and this is exactly what I wanted to do, was add some of my own photos into the random list. I followed your directions closely, but it’s not working for me. I put this coding into a functions.php in my child themes directory. I changed the file names and such but when I access my website it just shows all the coding at the top of the website. What am I doing wrong? I thought this would have to go in a functions.php file, but maybe I’m wrong. Please, any help you can give me would be greatly appreciated. Thanks.

    1. Ok, totally rookie mistake. I copied your coding so I didn’t have to retype everything and I copied your line numbers too. Ugh. Anyway, it’s working now. Thanks so much for your tutorial, it is great.

      1. Glad you got it working. When you hover over code on this site, a little menu should pop up, with one of the options being to copy code to your clipboard. This should copy it without line numbers.

  7. Hi, I found this tutorial looking for how to remove the text link above my header image in my twenty ten theme (or maybe twenty eleven I’m thinking of switching to that one…), do you have a tutorial for how to perform that action? Thanks so much!

  8. Great help – thanks so much for saving me a lot of time, Rev!

    I was just setting up a non-profit website with a somewhat default-ish WordPress Child theme and just needed an elegant way to have their random header images instead of the default TwentyEleven ones. Your post helped me do that without wasting a bunch of time trying to figure out the syntax for unregistering the default images in the array. Specifically helpful was the ’11′. That’s not something I would know intuitively! Woohoo!

    You totally rock – thank you for sharing this helpful info!

Leave a Reply