Twenty Thirteen
[resolved] How to change Twenty Thirteen header image height (7 posts)

  1. FkdkWeb
    Posted 2 years ago #

    I've been scratching my head since last night and finally solved the problem. Posting here since there's a lot of open threads with the same issue. To increase (or decrease, whatever floats your boat) Twenty Thirteen's header image height is quite simple. First, add the code bellow to the functions.php file of your child theme:

    function yourchildtheme_custom_header_setup() {
    	$args = array( 'height' => 400 );
    	add_theme_support( 'custom-header', $args );
    add_action( 'after_setup_theme', 'yourchildtheme_custom_header_setup' );

    Then add this to your css:

    .site-header .home-link {
    	min-height: 400px;

    You can use any value for the height, of course.

  2. amigos66
    Posted 2 years ago #

    Super, thank you :) works perfect.

  3. Dion
    Posted 2 years ago #

    Aargh! Spent all night scratching my head over this! Thanks so much!

    Edit: it's not working… do I need to edit the child theme's custom-header.php as well? Am I missing something obvious (like renaming "yourchildtheme" to something else)?

  4. FkdkWeb
    Posted 2 years ago #

    If you use a child theme you need to add the code to the functions.php of the child theme, if it doesn't have this file you'll need to create it.


  5. aleksandrarocks
    Posted 2 years ago #

    Hello FkdkWeb,

    I tried using your method - but I can't seem to get it to work. Are you able to determine what am I doing wrong?

    Here's the functions.php - I added it just under this first line:

     * Add support for a custom header image.
    require get_template_directory() . '/inc/custom-header.php';
     * Bigger header.
    function twentythirteen_custom_header_setup() {
    	$args = array( 'height' => 300 );
    	add_theme_support( 'custom-header', $args );}
    add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup' );

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    And the CSS:

    /*Make site header height larger*/
    .site-header .home-link {min-height: 300px;}

    This is at visualizingclimatechange.ca.



  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    @aleksandrarocks - first you need to start your own thread - this one is marked resolved.

    You also need to be using a child theme - otherwise all of your changes will be lost when WP is updated.

    Then once that is set up, see this thread:


  7. aleksandrarocks
    Posted 2 years ago #


Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic