Question

I have a page.php template and I want the first section to be wrapped in <div id="featured"> to style it differently. How do I do it?

I can’t insert the div in my template since the_content() just outputs the whole content. I could insert the additional markup in the editor in HTML mode, but then I would have to repeat this process for every new page. Also the editor seems to insert empty p tags for no reason..

Markup looks like this:

<img>
<p>

<p>
<p>
<P>
...

What I want is:

<div id="featured">
 <img>
 <p>
</div>

<p>
<p>
...

What’s the best way to do this?

Edit: Thanks for your answers. After some more searching I found exactly what I was looking for, not as straightforward as I hoped but that’s life 🙂
http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/

Answer 1

A classic case for Featured images and excerpts!

You would enable both in your functions.php

add_post_type_support( 'page', 'excerpt' );
add_theme_support( 'post-thumbnails');

Then in your tempate files (page.php for pages and single.php for posts) you would have

 <div id="featured">

      // This is your excerpt

        <?php if(!empty($post->post_excerpt)) { ?>

            <div class="your-excerpt"><?php the_excerpt(); ?></div>

       <?php } ?>

     // And this is your featured image - pulled in at 960 wide

        <?php if (function_exists('has_post_thumbnail') && has_post_thumbnail()) {

            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array( 960,960 )); ?>

            <div class="the-image">
                <img src="<?php echo $img_src[0]; ?>" /> 
            </div>

    <?php }; ?>

  </div>

To make sure the excerpts and featured images are visible in the backend, in your page and post edit screen hit the ‘Screen options’ tab on the top right hand corner and from the drop down make sure that the boxes are checked. Add your text into the excerpt input box and the upload your image through the featured image dialogue box on the right.