WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make post headers on homepage (11 posts)

  1. rebah
    Member
    Posted 2 years ago #

    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?

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

    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?

  3. rebah
    Member
    Posted 2 years ago #

    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.

  4. rebah
    Member
    Posted 2 years ago #

    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.

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

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

  6. rebah
    Member
    Posted 2 years ago #

    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?

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

    that section will only get shown for 'sticky' posts.

    possibly add the new line before this one:

    <header class="entry-header">
  8. rebah
    Member
    Posted 2 years ago #

    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?

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

    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.

  10. rebah
    Member
    Posted 2 years ago #

    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 620x180. Then the image becomes 270x180. I've tried crop true and false, but there is no difference between the two.

  11. rebah
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic