WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Changing the header size of twenty eleven (17 posts)

  1. TyMcClendon
    Member
    Posted 2 years ago #

    Hi all,

    I'm trying to change the header size of the twenty eleven template.

    I've made a functions.php file in my child theme, and input the following:

    <?php
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 100 ) );
    ?>

    The header size changes in the admin panel. For example, when I go to appearance > header, the image dimensions say 1000 x 100.

    When I attempt to view these changes on the website, the header does not change in size. I view the source and it says the image's height attribute is set to 100, but the image's display is much larger than 100px.

    Any ideas why the header won't change it's actual size?

    Thanks!

    Ty

  2. TyMcClendon
    Member
    Posted 2 years ago #

    When I try to access the dashboard, I get the following error and cannot log in:

    Warning: Cannot modify header information - headers already sent by (output started at ../wp-content/themes/twentyeleven-child/functions.php:6) in ../wp-includes/pluggable.php on line 866

    To fix this, I tried adding:

    remove_filter( 'HEADER_IMAGE_WIDTH', 'twentyeleven_header_image_width' );
    remove_filter( 'HEADER_IMAGE_HEIGHT', 'twentyeleven_header_image_height' );

    But it didn't work. The only way to access the admin panel is to remove the functions.php file.

    Any suggestions are appreciated.

    Ty

  3. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

  4. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi,

    You need to change the sizes in a 'post_theme_setup' function, check out this topic from last week!

    At the moment the child theme sets the sizes and the parent re-sets them, with an action running a post_theme_setup function, this runs after the child and parents functions.php have been run!

    This child themes function.php code sets the new sizes and removes the default headers, so you would upload and crop the new headers!

    HTH

    David

  5. TyMcClendon
    Member
    Posted 2 years ago #

    Thanks for the help.

    I've copied all the code to edit the post_theme_setup function, but it still does not change the actual size of the header on the website's front end. The dashboard reads the dimensions 1000 x 100, but the displayed image's height is still much larger.

    The only solution I have is to set the height in css to 100, which works. But I'd like to resolve this issue completely and I don't think my fix is efficient enough.

    This is the code in my child theme's functions.php file:
    <?php
    // It's a new layout make the content wider
    if ( ! isset( $content_width ) )
    $content_width = 940;

    /** Tell WordPress to run post_theme_setup() when the 'after_setup_theme' hook is run. */
    add_action( 'after_setup_theme', 'post_theme_setup' );

    if ( !function_exists( 'post_theme_setup' ) ):
    function post_theme_setup() {

    // 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', 100 ) );

    /* 1140 Remove Headers */
    function child_remove_twenty_eleven_headers(){
    unregister_default_headers( array(
    'wheel',
    'shore',
    'trolley',
    'pine-cone',
    'chessboard',
    'lanterns',
    'willow' ,
    'hanoi')
    );
    }
    add_action( 'after_setup_theme', 'child_remove_twenty_eleven_headers', 11 );
    }
    endif;
    ?>

    Thanks.

    Ty

  6. Digital Raindrops
    Member
    Posted 2 years ago #

    It will work, you have to upload the NEW headers, this will bring up the crop function!

    The original ones are already to big, WordPress will not resize these!

    HTH

    David

  7. TyMcClendon
    Member
    Posted 2 years ago #

    Thank you for your help.

    I've been able to successfully adjust the height.

    Have a nice day,

    Ty

  8. Digital Raindrops
    Member
    Posted 2 years ago #

    No problem, it is one thing that many do not think about, that the original images are not resized.

    Can you mark this one as resolved please.

    David

  9. Ov3rfly
    Member
    Posted 2 years ago #

    Actually you should use the existing filter to change header image size in a child theme functions.php like this:

    add_filter('twentyeleven_header_image_width', function($size) { return 1000; });
    add_filter('twentyeleven_header_image_height', function($size) { return 100; });

    If you use define( 'HEADER_IMAGE_WIDTH', apply_filters(.. in a child theme, this will cause a php notice (in debug mode):
    PHP Notice: Constant HEADER_IMAGE_WIDTH already defined in /some/path/...

  10. Digital Raindrops
    Member
    Posted 2 years ago #

    @Ov3rfly
    Thanks for that pointer I will use it in a post I am writing on making a wide twenty eleven (1140px) child theme.

    Regards

    David

  11. TyMcClendon
    Member
    Posted 2 years ago #

    When I try pasting in the code Ov3rfly provided, dreamweaver throws a syntax error out. When I try accessing the dashboard, I get a 404 error. When I try accessing the front end of the site, I get the following error:

    Parse error: syntax error, unexpected T_FUNCTION in /home/mcclendo/public_html/newsongsdaily.com/wp-content/themes/twentyeleven-child/functions.php on line 34

    This line points to the add_filter functions provided by Ov3rfly.

    I simply replaced these two lines of code with Ov3rfly's code.

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 100 ) );

    If I remove all of the "if ( ! isset( $content_width ) )" code, and leave only the 2 lines of add_filter script, the same issue occurs as explained above in this reply.

  12. Digital Raindrops
    Member
    Posted 2 years ago #

    It worked fine for me, 1140 width!
    functions.php
    http://pastebin.com/46Q6JmNP

    style.css added!

    /* =Make our page 140px wider maximum width 1140 pixels
    -------------------------------------------------------------- */
    #page {
    	max-width: 1140px;
    }
    
    .featured-posts,
    #ie7 article.intro {
    	max-width: 1140px;
    }

    HTH

    David

  13. TyMcClendon
    Member
    Posted 2 years ago #

    I've removed all the the code from my child theme's functions.php file, uploaded the blank file, and the errors went away. (Woohoo!)

    I then copied the contents your functions.php on pastebin(I hid the number lines, no editing done), uploaded the file, and BOOM! This error comes up:

    Parse error: syntax error, unexpected T_FUNCTION in ..themes/twentyeleven-child/functions.php on line 15

    I feel stupid. Why does everybody else's work except mine? :'(

    Ty

  14. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi Ty,
    I have zipped up a child theme for download, it is one I have been using to test different wide theme functions, the functions.php code snippets you can copy out the relevent lines.

    You can also upload, activate and test the child theme, use the theme or any of the code, you should not get any errors on activating the theme.

    NOTE: If you do get any errors what are the WordPress and PHP versions!

    functions.php
    There is also a function that will look in the child theme's folder for /images/headers/ and any *.jpg or *.png files that are post fixed -thumbnail.

    You will see I have included three sample headers that the function will register automatically on load, to use this in you own theme create the header to your dimensions, then resize and postfix with -thumbnail at 230px to 400px wide

    Any headers with thumbnails in the folder will be selectable from Appearance > Headers

    Another bit of code to load a custom-style.css file so user changes can be done 'non-destructive' without editing the style.css

    HTH

    David

  15. Ov3rfly
    Member
    Posted 2 years ago #

    @TyMcClendon: If you get the "unexpected T_FUNCTION" error, use this:

    <?php
    
    // child theme functions.php
    
    function my_header_image_width($size) { return 1000; }
    add_filter('twentyeleven_header_image_width', 'my_header_image_width');
    function my_header_image_height($size) { return 100; }
    add_filter('twentyeleven_header_image_height', 'my_header_image_height');
  16. Digital Raindrops
    Member
    Posted 2 years ago #

    @Ov3rfly,
    I have updated the download with this code and added a credit link to your WordPress profile page!

    Regards

    David

  17. TyMcClendon
    Member
    Posted 2 years ago #

    Cool. All seems to work well now.

    Thank you both.

    Ty

Topic Closed

This topic has been closed to new replies.

About this Topic