1

I've been trying to figure out this problem for a while now:

<article class="post">

    <div class="entry-header">
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </div>  <!-- end entry-header -->

    <div class="entry-content">
        <?php the_content(); ?>
    </div>  <!-- end entry-content -->
</article>

This display the title, then the image (audio, video, gallery embed, etc.), then the post info. I am trying to get the Image, then the Title, and then the post info.

I made this picture for what I explained.

enter image description here

How do I go about this?

2 Answers 2

0

So to move the title below the content just move the html.

<article>    
    <div class="entry-content">
        <?php the_content(); ?>
    </div>  <!-- end entry-content -->

    <div class="entry-header">
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </div>
</article>

You need to rotate your html a bit. First thing you need to do is add the wordpress function add_theme_support('post-thumbnails') to your functions.php. This will allow you to add featured images to each post/page.

Next in your functions.php you need to add the wordpress function add_image_size('postimgsize', width, height, true). The last perimeter allows the image to be cropped from the center out to the specified and width you'd like.

Last you need to adjust your theme file.

<article class="post">
    <?php if(has_postthumbnail()) : ?>
         <div class="entry-postthumbnail">
              <?php the_post_thumbnail('postimgsize');?>
         </div>
    <?php endif; ?>

    <div class="entry-header">
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </div>  <!-- end entry-header -->

    <div class="entry-content">
        <?php the_content(); ?>
    </div>  <!-- end entry-content -->
</article>

the_post_thumbnail() function calls the featured image and by specifying the name of the add_image_size function inside of the circle brackets, the image will crop to the exact size you would like.

Hope this helps.

3
  • I want to display title below the content not cropping featured image :D
    – Hung PD
    Mar 8, 2015 at 17:04
  • Sorry I was confused because you said "I am trying to get the Image, then the Title, and then the post info." So I assumed you wanted to know how to crop the image and order the html considering it was already title then post info. I edited my answer. hope that helps
    – dgas02
    Mar 8, 2015 at 17:56
  • Please don"t add code in bold, use backticks or code block Mar 8, 2015 at 18:13
0

I figured out that way to solve my problem. Just get post format then get the content by using get_post_meta($post->ID, 'variable_name', true);

Example:

<article class="post post-<?php echo $postformat; ?>">

    <?php 

        if( $postformat == "video" ){

            $embed_video_code = get_post_meta($post->ID, 'video_embed_code', true);

            if ($embed_video_code) {

                echo '<div class="ajax-video-wrapper">';
                echo '<div class="ajax-video-container">';
                    echo $embed_video_code;
                echo '</div>';
                echo '</div>';

            }

        } 
    ?>
</article>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.