Support » Fixing WordPress » How to make post headers on homepage

  • Resolved rebah

    (@rebah)


    Hello,

    I’ve just started messing around with my first WordPress website using the Twenty eleven theme. I already made some modifications, but now I want the featured images from a post to display in a little header above the post on the homepage. Like in this theme: http://www.thetraveltheme.com. Is there a way to do that?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    make sure to create and work with a child theme of Twenty Eleven http://codex.wordpress.org/Child_Themes

    the code for the front page loop is in content.php; add the code for the featured image before the line of the title;

    http://codex.wordpress.org/Post_Thumbnails
    http://codex.wordpress.org/Function_Reference/the_post_thumbnail

    what detail do you have problems with?

    Everything 🙂 I have to Google eacht step. I am already using a child theme. But not with a content.php yet. I made a new content.php with only no code:

    <?php
    /* Custom code goes below this line. */
    
    /* Custom code goes above this line. */
    ?>

    I’m assuming I don’t have to add support for Post Thumbnails, because I can already select a featured image when I write a post.

    So I have to add
    <?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
    to functions.php?

    If I put that in my child theme, how do I get it above the title?
    Or do I just past the whole code in the new functions?

    Is this the right place?

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<header class="entry-header">
    			<?php if ( is_sticky() ) : ?>
    				<hgroup>
                       <?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
    				</hgroup>
    			<?php else : ?>
    			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    			<?php endif; ?>

    I hope I’m at least close to the right way to do this.

    Ok, I’ve tried adding the code

    <?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>

    in content.php in the child theme and the normal one, but then I get no posts at all on my page.
    Is this the right code and where do I have to put it.

    I also added

    if ( function_exists( 'add_theme_support' ) ) {
      add_theme_support( 'post-thumbnails' );
    }

    in my child theme functions.php because I couldn’t find it in the original functions.php.

    Michael

    (@alchymyth)

    Forum Moderator

    start with saving a full copy of content.php into the child theme – then make the edits.

    Ok, I have.
    Now I added the line there:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<header class="entry-header">
    			<?php if ( is_sticky() ) : ?>
    				<hgroup>
                       <?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
    				</hgroup>
    			<?php else : ?>
    			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    			<?php endif; ?>

    But nothing happends. Wrong place? Wrong code?

    Michael

    (@alchymyth)

    Forum Moderator

    that section will only get shown for ‘sticky’ posts.

    possibly add the new line before this one:

    <header class="entry-header">

    That was it! Great, thank you.

    One more question, I want the image to have specific dimensions. Now I read that i have to add this line

    <?php add_image_size( $name, $width, $height, $crop ); ?>

    to my wp-includes/media.php to set an imagesize. I can’t get to that file at the moment because I am at work, but do I have to make a child version of this file too? If yes, do I copy it whole and to which folder?

    Michael

    (@alchymyth)

    Forum Moderator

    without setting the image size in functions.php, you could use:

    <?php echo get_the_post_thumbnail( $post_id, array(500,145) ); ?>

    where 500 is the image width in pixels, and 145 is the image height.

    http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

    if you want to use functions.php:
    don’t save a full copy of functions.php from the parent theme to the child theme – this will lead to errors.

    create a new functions.php in the child theme folder; then add the neccessary code there.

    I already had a new functions.php, so I added the image size there and referred to it.
    What I now run into is that I can change the size of the image, I can see it work. But the image always stays in its original proportion, even when I’m setting the height en width for example at 620×180. Then the image becomes 270×180. I’ve tried crop true and false, but there is no difference between the two.

    Ok, It was because of the size of my uploaded image. By accident I noticed that it worked after I downsized the image. Thanks for all your alchymyth!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to make post headers on homepage’ is closed to new replies.