Customizing Twentyeleven, Let’s Start With Width and Smaller Header

Posted on July 8, 2011 by Rev. Voodoo

I dig twentyeleven. It’s got a lot of fun features and it looks pretty good. There were a couple of things I didn’t like, however. The header is kind of GIANT. So I’m going to need to take care of that. Also, although it is flexible width, the maximum width was a bit too narrow for my taste. Also, I need wider sidebars, I don’t like things looking so cramped over there. While I’m messing with the header, I have my own logo for VoodooPress, no need for the site name to be up top. I’m going to get rid of that, and while I’m at it relocate the search and site description to overlay my header image. Finally, I like my widgets to have their own home, they need a nice box to seperate them from the content a little. It’s pretty easy to get this all done, check it out!

So the first thing I need to do, is to widen the max-width of the theme. You’ll notice some extra css in some of my examples. I also reduced margins in some places. Twentyeleven had too much white space for my taste. Some people love it that way, but hey, this is what I like! Before we get into this too far, make sure you have your child theme set up. If you forget how, run over here and check it out. Just remember, that tutorial is for twentyten. You’ll have to just adjust the header and import rule to refer to twentyeleven.

Here’s where the theme width is set up in twentyeleven’s style.css:

/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}

Really all you need to do there is adjust the max-width in #page. Here’s my final view:

#page {
	margin: 1.5em auto;
	max-width: 1050px;
	border-top: 15px solid #bbb;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

Honestly, that’s it. You’ll see I have some extra stuff in there. I tweaked the margin to reduce the gutters on the side, and I added a think rounded border to the top. That’s just for my visual taste, When I remove all the info from above the header image, it looked a bit harsh. I liked the idea of just a little visual interest up top.

So with that out of the way, I realized that with a wider theme, I’d need a wider header image. This is super simple. I just made a functions.php file in my child theme and added (NOTE: this is new update code to add a filter, which is the preferred way to do this):

//CUSTOM HEADER SIZE
add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height');
function voodoo_header_height($param) {
return 175;
}
add_filter( 'twentyeleven_header_image_width', 'voodoo_header_width');
function voodoo_header_width($param) {
return 1050;
}

For informational purposes, below is the old function I used to adjust the header image. It worked, but one of our readers pointed out in the comments that we weren’t using the best method. So I recommend you use the above code, the code below is just kept for comparison.

//CUSTOM HEADER SIZE
add_action( 'after_setup_theme', 'voodoochild_theme_setup' );

if ( !function_exists( 'voodoochild_theme_setup' ) ):
function voodoochild_theme_setup() {
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 175 ) );
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1050 ) );
}
endif;

Don’t forget the opening php tag at the top if you are started a brand new functions.php file. OK, now with that above function I’ve altered twentyeleven’s header image from 1000x288px to a wider and shorter 1050x175px. Of course you can just do the width and leave the height line out, or use different values.

With the new header image in place, any new header you upload either through the header menu, or using the featured image uploader will be in that size. But I’ve had VoodooPress going for a bit, and it used to use twentyten, which had different header sizes. Chances are your site will not look right if you already have posts with thumbnails. No problem, I’ve got you covered! Check out this handy plugin here. It’ll regenerate your thumbnails and get everything looking so good once again.

One final thing I needed to deal with to get my headers to work properly. Sometimes I like to use images that are smaller than the header. By default if you do that, it won’t be used as your header image. Well, I copy header.php from twentyeleven and put it into my theme. I need to tweak some things further on it, so I need my own copy used. I found this bit of code toward the bottom of header.php:

	has_post_thumbnail( $post->ID ) &&
	( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
	$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!

I just deleted

&&
							$image[1] >= HEADER_IMAGE_WIDTH

So I was left with:

	has_post_thumbnail( $post->ID ) &&
	( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT ) ) ) ) :
// Houston, we have a new header image!

And that allows for featured images smaller than the minimum size to still be used. So we are getting pretty close to good here. We’ve got a wider theme, a wider header image to fit the theme and more options for our header image size. Tomorrow, we’ll finish this off. Tweaking the rest of the white space, readjusting the header some more, and prettying up the widget areas. After that, I’ll post up my header.php and style.css code in case I forgot anything, so you can peep my finished product so far. Once I have myself a nice basic child theme done to my liking, it’ll be time to look for new fun to be had.

Shortlink:

Pin It

61 thoughts on “Customizing Twentyeleven, Let’s Start With Width and Smaller Header”

Me on July 16, 2011 at 4:55 pm said:

You are re-defining the header size, which results in a php error,
Shouldn’t a better way be to add a filter ?
Reply ↓
- Rev. Voodoo on July 16, 2011 at 8:28 pm said:
  
  I don’t quite follow? That is a filter….. and I don’t get any errors…. could you explain please?
  Reply ↓
  - Me on July 17, 2011 at 3:10 am said:
    
    first, functions.php of the the child’s theme is loaded, and after that the file of the parent theme is loaded.
    so the code
    define( ‘HEADER_IMAGE_HEIGHT’, …
    is called twice, thus the second one should create an error, check your error logs .
    the way to solve this is with add_filter function
    Reply ↓
    - Rev. Voodoo on July 17, 2011 at 11:27 pm said:
      
      Some code examples sure would be cool! But I’ll take your word for it. The thing is, all the tutorials I saw when I was looking for a solution used the above technique. I’ll look around the google for the method you are describing, but if you’d send me a pastebin of some code or something, that would save a lot of time? Thanks!!
      Reply ↓
    - Rev. Voodoo on July 18, 2011 at 1:31 pm said:
      
      OK, I’ll be updating the posts now that I’ve figured it out! Thanks for pointing out the right way to do this, I’m always open to learning!!
      Reply ↓
matt on July 19, 2011 at 1:27 am said:

have you played with creating custom theme templates for twenty-eleven yet? playing with that now, and its not what I recall from last time I attempted it.
Reply ↓
- Rev. Voodoo on July 19, 2011 at 3:23 pm said:
  
  What sort of templates? I’ve got a variety of them in use, nothing much has changed that I’ve seen. If you have specific examples/situations maybe I can help?
  Reply ↓
Edward Nick A Jubrey on July 19, 2011 at 11:35 am said:

I was wondering there is some code in the functions.php file that establishes the size height and width of the header why can we not just change those numbers in the child theme?
This is the original
// The height and width of your custom header.
// Add a filter to twentyeleven_header_image_width and twentyeleven_header_image_height to change these values.
define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘twentyeleven_header_image_width’, 1000 ) );
define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘twentyeleven_header_image_height’, 288 ) );
Reply ↓
- Rev. Voodoo on July 19, 2011 at 3:25 pm said:
  
  Functionally, that works. It’s actually how I used to do it. A VoodooPress reader informed me that way is improper as it causes php errors. And after some research, he was right. The problem is that The parent theme first defines those values, and then the child theme also defines those values, which is not allowed. If you do it that way, and then check your error logs you will see the errors. Adding a filter to adjust the values is the proper way to do it.
  Reply ↓
Pingback: 5 Best Resources to Find Solutions to Issues in WP Twenty Eleven Theme
Susan on July 24, 2011 at 6:37 pm said:

First of all, when you look at my website, keep in mind that it’s a practice site, so the URL doesn’t match the content! Anyway, I’m trying to make the page content much wider. . . it’s way too narrow, so I adjusted the max-width in #page. margin: 1.5em auto;
max-width: 1050px;
just as you did. I don’t get any results. It’s still the same. I’m at the /* =Structure on my style.css. Can you give me any ides what I’m not doing or am doing wrong? Thanks.
Reply ↓
- Danko Dubajic on July 25, 2011 at 3:03 am said:
  
  Just one tip for page width.
  Try to make site 980px wide. Its resolution that wont show you horizontal slide on 1024×768 resolution, which is most commonly used resolution.
  About your site:
  I just changed this and I got equal width,
  #primary {
  float: left;
  margin: 0;
  width: 100%;
  } line 93
  .one-column #content {
  margin: 0 auto;
  width: auto;
  } line 208
  Depending on design I try to make one big div to hold whole site, and one smaller with {width:980px;margin:0 auto}, and that keeps my site always in middle and proper width.
  Reply ↓
- Rev. Voodoo on July 25, 2011 at 7:22 am said:
  
  Remember that changing to 1050 is only 50 more than original, so it’s not a dramatic change. Also, if you see no change, press ctrl+f5. Sometimes the browser cache needs reset to see css changes. Also, 1050 is the max width, so whether you see change or not is contingent on your browser. 2011 is a variable width theme up to 1000px (or 1050px with your edit). So it will appear the same size regardless of edits, if your screen size is under 1050.
  Reply ↓
Pingback: Customizing Twentyeleven | Miguel Martinez
LisaS on August 18, 2011 at 9:36 am said:

Hi! I’m new to WordPress but really loving the twenty eleven theme and trying to work with it to create the agency I work for website. I’m wondering if it’s possible to put an animation or slideshow of images where the menu sits and also not show the menu, topics, archive etc? Any help would be much appreciated!:)
Reply ↓
Matt Hobin on August 24, 2011 at 10:40 am said:

Great customizations! Is there a way to reduce the space between the top of the screen and the top of the header?
Reply ↓
- Rev. Voodoo on August 29, 2011 at 7:23 am said:
  
  Yup, in the top example in this post, you can see #page has a margin of 2em and auto. the 2em is for the top and bottom, and the auto is for left and right. Reducing the 2 em to 1.5 or even 1 would reduce the spacing above the header and below the footer.
  Reply ↓
Arthur on August 31, 2011 at 7:05 pm said:

Thank you for one of the most helpful design tutorial site i have seen…
I am in the process of creating a twentyeleven-child theme
and I was wondering if in the code bellow am i suppose to replace the word voodoo with something else, since i am not sure where it is referenced in my blog code?
1 //CUSTOM HEADER SIZE
2 add_filter( ‘twentyeleven_header_image_height’, ‘voodoo_header_height’);
3 function voodoo_header_height($param) {
4 return 175;
5 }
6 add_filter( ‘twentyeleven_header_image_width’, ‘voodoo_header_width’);
7 function voodoo_header_width($param) {
8 return 1050;
9 }
also i wasn’t sure what the following is referring to please explain:
“Don’t forget the opening php tag at the top if you are started a brand new functions.php file.”
Reply ↓
- Rev. Voodoo on September 1, 2011 at 7:03 am said:
  Well, if you notice in that code, on line 2, we add a filter and on line 3 we have a function. Same goes for line 6 and line 7. So you could change voodoo to anything you want. What we are doing is defining a function in lines 3 and 7, and applying those filters in lines 2 and 4. Since we are defining our own functions, we call them anything we want. So I try to make mine descriptive, thus header_height and header_width. The best practice when writing your own functions is to add some prefix, that way you can be sure your function won’t have the same name as another core, or theme/plugin function. So I always prefix my functions with voodoo. So in line 3 and 7 where we define the function, we can name it anything we want, as long as in lines 2 and 4, we use the exact same name. What you can’t change, is the twentyeleven_header_image_height. Line 2 basically says to take the filter named voodoo_header_height and apply it to twentyeleven_header_image_height. Make sense?
  As for “don’t forget the opening php tag”, well, in a child theme when you start out, there is no functions.php. You can’t simply copy one from twentyeleven as it will crash the child theme. So you start with a blank file. It just needs to have that opening php tag that all theme php files have.
```
<?php
code goes here;
//maybe a comment
etc...
```
  Hopefully that also makes sense now.
  Reply ↓
  - Arthur on September 1, 2011 at 12:14 pm said:
    
    thank you for explaining the function architecture. I am new to functions… I love your sight cant believe that it took me so ling to find you. Have you thought of having a go to meeting tutorial class online? or simple a group skype meeting every once in awhile? I would be in! Since the real beauty of the web is community. BTW I made film called Y Yoga Movie which i would love to share with u…Please send me an email of your email and i will send you a free digital download as my gift for your help…
    in love light and peace,
    in gratitude,
    Arthur
    Reply ↓
    - Rev. Voodoo on September 1, 2011 at 1:14 pm said:
      
      I’m glad you found that reply helpful! I have no time right now to do much reliable meeting or anything. I’m working a lot of overtime in a non-WP related field, and working on my Masters. Once things settle down, I’d love to dedicate more time to WP stuff. If you’d like to send me a link for your video, my contact form is up on my menu bar (I may forget to email…my memory is terrible). My wife would be very interested in that!! Thanks for the generous offer!
      Reply ↓
Arthur on August 31, 2011 at 9:32 pm said:

is there a way to move search box where it is on twenty ten and to move the second header to right justified? There are many things that i like about eleven but also much that i miss of ten… thanks
Reply ↓
- Rev. Voodoo on September 1, 2011 at 7:45 am said:
  http://cdn.rvoodoo.com/ Is this something like what you are looking for? It’s my test site I was messing around with.
  If that’s what you are looking for, I simply added:
```
#branding #searchform {
	display: none;
}
#site-title {
	float: left;
	margin-top: -25px;
}
#site-description {
	clear: right;
	float: right;
	margin: 2.25em 0;

}
#branding img {
	height: auto;
	margin-bottom: 7px;
	width: 100%;
	float: left;
}
```
  To my child theme style.css, and then put the search widget in my sidebar.
  Reply ↓
  - Antonio Cassano on September 22, 2011 at 5:55 am said:
    hi, very interesting but when i paste
    add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height'); function voodoo_header_height($param) { return 165; }
    in my functions.php file in the child theme i see nothing (white screen). i don’t understand what is the problem. My site is vega.marionegri.it and i use wordpress 3.2.1 with twenty eleven child theme
    Reply ↓
    - Rev. Voodoo on September 22, 2011 at 7:02 am said:
      
      I hope I can help you! What does your functions.php look like in your child theme? Do you have other functions, or was it blank, a new file you created? If blank, did you put an opening php tag at the very top?
      <?php
      Here’s an article I stumbled on yesterday with info about pasting into a functions file
      http://vudu.me/func
      Reply ↓
      - Antonio Cassano on September 22, 2011 at 7:58 am said:
        
        ok, it’s solved but i’ve used the old version:
        //CUSTOM HEADER SIZE add_action( 'after_setup_theme', 'voodoochild_theme_setup' ); if ( !function_exists( 'voodoochild_theme_setup' ) ): function voodoochild_theme_setup() { define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 175 ) ); define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1050 ) ); } endif;
        i don’t know why the new version doesn’t work on my web site
      - Rev. Voodoo on September 22, 2011 at 8:05 am said:
        
        That’s very strange that the normal code won’t work. The old code is fine pretty much. It is redeclaring a define, so it generates errors, just so you know. They won’t display unless you turn debugging on.
Pingback: Mal wieder was neues… | Paul Glaser
sky on October 10, 2011 at 4:44 am said:

header resize for twenty eleven: works like a charm! ) thanks!
Reply ↓
- Rev. Voodoo on October 10, 2011 at 7:14 am said:
  
  Thanks for letting me know this worked for you!
  Reply ↓
mtpultz on October 17, 2011 at 1:21 pm said:

For some reason this doesn’t work for me? Not sure why, I’ve added the code as you have it. I stubbed my files to print to see the width and height values before and after, and they don’t change. I didn’t try the old way thought I’d ask first what might be wrong since I’d prefer to do it this way instead.
Reply ↓
- mtpultz on October 17, 2011 at 1:37 pm said:
  Does it have something to do with how I’m using doaction(…). Does this have to happen at some other time slice in code that I miss by calling it this way, so add_filter is called early enough.
```
function ask_widgets_init() {
	// Custom header width
	add_filter( 'twentyeleven_header_image_width', 960);
	function ask_header_width($param) {
		return 960;
	}

	// Custom header height
	add_filter( 'twentyeleven_header_image_height', 215);
	function ask_header_height($param) {
		return 215;
	}

      // removal of some sidebars and the ephermera widget
}
add_action( 'widgets_init', 'ask_widgets_init' );
```
  Reply ↓
mtpultz on October 17, 2011 at 1:53 pm said:

Oh I see, I can just place them in my function.php anywhere, don’t need to wrap it in anything and perform an action. Right, sorry I seem to be answering my own questions or trying to on your blog. Thanks for the post
Reply ↓
- Rev. Voodoo on October 20, 2011 at 7:23 am said:
  
  Seems you got it all figured out! But yep, you just use the code above without wrapping it. We are already making a custom filter, no need to wrap it in an action!
  Reply ↓
JoAnn on October 19, 2011 at 11:25 am said:

I don’t know why I don’t remember to check your site first. I was searching part of the day yesterday to find out how to do this exact thing and couldn’t find it till I saw a link for your site today. I really need to remember to check your site first when I want to make changes. I’m sure you’ll have already written about what I want to do. Thanks for your work.
Reply ↓
- Rev. Voodoo on October 20, 2011 at 7:23 am said:
  
  lol! I’m just a small site, so people forget about me! Hopefully I can grow a bit and make it easier to stumble on VoodooPress! I’m glad you found this post helpful!
  Reply ↓
Henrik on November 10, 2011 at 8:20 am said:

Well Hello! So this is where all the WP knowledge is stored! ;-D
So, maybe you could tell me….
Is it possible to change the images in the slide show running in the header of Twentyeleven?
I would like to keep the slide show function but have my own images displayed. I have been trying to find the location of the images and thought I would just replace them, but I just don’t know where to look.
Perhaps there is some magic VoodooPress-formula to solve my problem!
Reply ↓
- Rev. Voodoo on November 10, 2011 at 12:47 pm said:
  
  Well I’m sure glad you found us here!! I can help you out. We could swap out the images in twentyten, however, I’d like to point out the best way to handle this for you! First up, do you have a child theme going? IF not, check out http://vudu.me/child
  That’s an article on my personal blog about child themes. It’s not recommended to ever edit WP themes (especially ones which are shipped with WP, frameworks, and actively developed themes)
  The reason being, themes get updated with new features, security updates, and bugfixes. If you directly edit the theme, then when the theme gets updated, you lose all your hard work. It gets overwritten by the new updated original theme.
  So we make a child theme, and edit from there. Now, back to your question. Check out this article:
  http://vudu.me/ph
  That is an article about how to add in more default headers, and remove the stock ones if you don’t like em. I hope that gets you started!
  Reply ↓
Chess on February 12, 2012 at 7:34 pm said:

When I create a new functions.php file in my child them folder with the above code and then try to insert an image as the featured image, I get this error:
//CUSTOM HEADER SIZE add_filter( ‘twentyeleven_header_image_width’, ‘voodoo_header_width’); function voodoo_header_width($param) { return 1100; }
Warning: Cannot modify header information – headers already sent by (output started at /home/trueno11/public_html/blog/wp-content/themes/twentyeleven-child/functions.php:6) in /home/trueno11/public_html/blog/wp-includes/pluggable.php on line 866
Reply ↓
- Rev. Voodoo on February 14, 2012 at 8:09 am said:
  
  Is the very first thing in your functions.php the opening php tag? If you drop your functions.php tag into http://pastebin.com and save it, and report thelink back here, I can take a look for you!
  Reply ↓
suraj on February 24, 2012 at 3:33 pm said:

thanks for the solution!!!!!!!!!!!!
Reply ↓
suraj on February 27, 2012 at 4:56 pm said:

i used the php code
#branding img {
height: 160px;
margin-bottom: -7px;
width: 100%;
}
for manipulating header hight
Reply ↓
- Rev. Voodoo on February 28, 2012 at 6:53 am said:
  
  That only kind of works. Let me explain the issue for you. First up, the terminology. The code you provided is css code, not php. Now here is the problem. 2011 looks for the header image to be 1000px by 288px. So your css code chops the image down to 160px, however, WordPress still thinks your header image is 288px tall. So when you upload a new image to use as your header, or if you attach a featured image to your post, WordPress crops the image at 288px. Your css hides the bottom of the image. So, while it works to narrow the displayed portion to only 160px, you are actually chopping off the bottom portion of the image.
  When setting a featured image, WordPress crops from the center to make an image 288px tall, your css then chops the additional amount off of the bottom to make a 288px image fit into a 160px space. If you go to appearance->header, you will see that WP is still expecting a 1000×288 image.
  The php I provided above changes this. So if you were to use the php code I provided and set it to be 160px height, WordPress would only look for a 1000x160px image. That way you get a crop of the exact rigt size that you want.
  Reply ↓
Dan on March 5, 2012 at 8:21 am said:

Total noob lost in woods here. It appears have some problem with my function.php syntax. Below is the string that appears above the header when I preview my 2011 child theme following your excellent advice. Note the “warning” at end about missing a valid callback. How did I mess this up?
//ADD NEW DEFAULT HEADER IMAGES function wptips_new_default_header_images() { $child2011_dir = get_bloginfo(‘stylesheet_directory’); register_default_headers( array ( ‘image1′ => array ( ‘url’ => “$child2011_dir/images/image1.jpg”, ‘thumbnail_url’ => “$child2011_dir/images/image1-thumb.jpg”, // 230 x 66px ‘description’ => __( ‘Image Description’, ‘child2011′ ) ), // if you have more than one image you will need a comma between all of them, except for the last one ‘image2′ => array ( ‘url’ => “$child2011_dir/images/image2.jpg”, ‘thumbnail_url’ => “$child2011_dir/images/image2-thumb.jpg”, // 230 x 66px ‘description’ => __( ‘Image Description’, ‘child2011′ ) ) // the last image does not get a comma )); } add_action( ‘after_setup_theme’, ‘wptips_new_default_header_images’ ); //Voodoopress.com “customizing twentyeleven, lets start with width and smaller header” //CUSTOM HEADER SIZE add_filter( ‘twentyeleven_header_image_height’, ‘voodoo_header_height’); function voodoo_header_height($param) { return 175; } add_filter( ‘twentyeleven_header_image_width’, ‘voodoo_header_width’); function voodoo_header_width($param) { return 1050; }
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘wptips_remove_header_images’ was given in /home/content/29/8209729/html/marxbrothersmeet/wp-includes/plugin.php on line 405
Reply ↓
- Rev. Voodoo on March 6, 2012 at 7:49 am said:
  That all spits out at the top of your page? Let’s start basic here for troubleshooting, do you have an opening php tag at the start of your functions.php file?
```
<?php
// all of your code starts here
```
  Reply ↓
  - Dan on March 7, 2012 at 3:56 pm said:
    
    Here is how it starts:
    //ADD NEW DEFAULT HEADER IMAGES
    [follows, rest of default header syntax]
    Reply ↓
    - Dan on March 7, 2012 at 3:58 pm said:
      
      [Sorry, lost the text on last post. Now, here is the top of functions.php:}
      //ADD NEW DEFAULT HEADER IMAGES
      Reply ↓
    - Rev. Voodoo on March 7, 2012 at 4:01 pm said:
      
      code needs to be wrapped in language tags in square brackets…. [ php ] and [ /php ] without the spaces. There’s a little note at the bottom of my commets form there…..
      Reply ↓
TD on March 12, 2012 at 12:30 pm said:

Hoping you could answer a quick question. I am hoping to add some new divs to the top of the header.php. I have a child theme designed, but when I copy over the header.php file from twentyeleven I lose all my styles for my page. http://trayerdesignstest.com/blog I have been reading up on the child themes and I am not sure whether the full header.php file can be moved from the parent theme or if I need to make other adjustments. Your guidance would be greatly appreciated.
Reply ↓
- Rev. Voodoo on March 12, 2012 at 1:06 pm said:
```
<link rel="stylesheet" type="text/css" media="all" href="../twentyeleven/http://trayerdesignstest.com/blog/wp-content/themes/upriverunited-2011-child/style.css" />
<link rel="pingback" href="../twentyeleven/http://trayerdesignstest.com/blog/xmlrpc.php" />

```
  Looks like you have a goofy setting or somethin, check out the URL there from your source. You can copy over the header.php to your child theme no problem… that’s what I do on VoodooPress
  Reply ↓
  - TD on March 12, 2012 at 3:44 pm said:
    
    Thanks VooDooPress…. Sorry for such a lame one – I should have checked that, but everywhere I was reading it wasn’t showing any reference to the use of the header.php So vs spending more hours searching I just wanted to ask… Thanks much… I straightened that out and it still appears that I have some additional possibly similar stuff going on because the header image is not showing, but I am in good shape…. Thank you greatly for your time… Oh and thanks for all your work – I have found answers to many things already through your various posts….
    Reply ↓
    - Rev. Voodoo on March 13, 2012 at 6:57 am said:
      
      I see you are using one of the standard 2011 images now. Are you using the child theme header.php? When your image wasn’t displaying, how were you bringing it in? Was it just an image you uploaded through the admin, or did you code it in?
      Reply ↓
      - TD on March 13, 2012 at 11:13 am said:
        
        It was actually an image that I had uploaded. The Url was the culprit…. I am good to go now – I just have to make my adjustments to my header.php file and all is good…. I did run into trouble though – maybe you have seen this – I upgraded to 3.3.1 and I lost the backend formatting and functionality – I took it back to I believe it was at 3.13 because I did not have time to surf that while in the designing phases, but just thought I would see if you have seen that before – this particular site is actually hosted on GoDaddy and I was working on it on the client site when this happened vs my testing site… Thanks again… Much appreciated….
    - Rev. Voodoo on March 13, 2012 at 11:39 am said:
      
      I know that 3.3.1 works on Godaddy, as I was recently hosted there. As for losing formattng on the backend, I’ve seen a few things that can cause this.
      1. A hack … run the URL through securi’s checker to test for that
      2. a jQuery conflict. I’ve actually had this happen when using Google cdn copy of jQuery instead of the WP version
      3. Similar to #2, some themes or plugins may buncle in a jQuery that causes a conflict with WP
      Reply ↓
TD on March 13, 2012 at 12:39 pm said:

Cool… Thanks for the info… Life is a learning lesson everyday… Thanks for your expertise and wealth of information…. Much appreciated…. Enjoy your day….
Reply ↓
- Rev. Voodoo on March 14, 2012 at 6:51 am said:
  
  No problem, I’m always happy to help if I can!
  Reply ↓
  - TD on March 14, 2012 at 7:04 am said:
    
    Good… I am glad that you are always happy to help because I could use your expertise once again…. I have my child in place on my client site and I have lost the ability to do the random images in the header area in the control panel. I figured it may be that something is going haywire in the function.php. Because I did change the height of the header image. I went back in and pulled all the header information to be certain that my function file wasn’t the culptit, but I am still having the problem. Can you tell me what would cause that option to disappear from the screen? The site can be viewed at http://www.UpRiverUnited.org I am still working on things, but it is getting there…. Thanks once again….
    Reply ↓
    - Rev. Voodoo on March 14, 2012 at 8:54 am said:
      
      OK, I just tested VoodooPress, since I have a 2011 child theme here. The random function exists and works fine on my site. So, all I can think of is that a plugin is interfering, or it’s something to do with your child theme. I would say the easiest thing is to switch to 2011 momentarily just to rule out a plugin thing. If on 2011 the option comes back, we have narrowed it down to your child theme and can go from there!
      Reply ↓
      - TD on March 14, 2012 at 2:06 pm said:
        
        Thanks greatly!! My guess now is a plugin… It is never good working into the wee hours of the morning, but I did actually set it to the theme twentyeleven to see if it had been removed prior to checking the function.php and it wasn’t present then either. So I believe you have guided me in the right direction – it must be a plugin – now to figure out the culprit because I have used many on this one…. Thanks again…
BGR on April 11, 2012 at 6:15 pm said:

How would I increase on or both sidebars to be able to accommodate a 300×200 ad size at http://www.halfwaytoconcord.com using twentyeleven child theme
Reply ↓
- Rev. Voodoo on April 12, 2012 at 9:51 am said:
  
  It’s gonna take a bit of math on your part! http://vudu.me/p4
  Is my next article in this series, I go into a bit more depth about adjusting the theme. So you may want to widen up your theme, you’ll need to adjust the secondary div to accomodate that 300px. You may want to assign it a min-width of 330px or something, and then adjust the percentage. Or just fix the width, but fixing the width can wreak havoc on 2011′s responsive design. Widen the theme a bit, reduce a little of the white space in the theme, maybe reduce the content area. Hopefully that article I linked can get you thinking in the right direction!
  Reply ↓

VoodooPress

WordPress Fun From The Voodoo Empire

Customizing Twentyeleven, Let’s Start With Width and Smaller Header

61 thoughts on “Customizing Twentyeleven, Let’s Start With Width and Smaller Header”

Leave a Reply Cancel reply

Related Posts

61 thoughts on “Customizing Twentyeleven, Let’s Start With Width and Smaller Header”

Leave a Reply Cancel reply