How to Add the Wordpress Body Content Area and the Featured Image Using the Directory Plugin

In my last post on How to Style the Directory Plugin I showed how to start styling the Directory Listings. To do this you need a single-listing.php file and your style.css file -- both should be saved in the root of your theme folder. In this post I’m going to show how to add the the Wordpress Body Content area and how I used the Featured Image functionality of Wordpress to add a logo or profile photo to the listing.

Assuming you started with the exact code of my last post. Your single-listing.php would have only this code on it:

<?php get_header(); ?>

<?php genesis_before_content_sidebar_wrap(); ?>
<div id="content-sidebar-wrap">

	<?php genesis_before_content(); ?>
	<div id="content" class="hfeed">

			<?php if ( have_posts() ) : ?>

				<?php  while ( have_posts() ) : the_post(); ?>

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<div class="entry-post">

					<!-- Here is where the magic happens -->
					<div id="listingHeader">
    <div id="listingTitle">
        <h1><?php the_title(); ?></h1>
        <?php do_action('sr_avg_rating'); ?>
    </div>
</div>

<div id="leftColumn">
	<!-- This is my left column ?
		<div id=”websiteLinks”>
             		 <p><a href=”<?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?>” title=”Website Link” title="" target="new-window"><?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?></a></p>
              		<p><a href="<?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?>" title="Website Link Graphic" target="new-window"><img src="http://mywebsite.com/wp-content/themes/mytheme/images/view-website.jpg" alt="VIew Website" /></a></p>
	</div>
</div>
<div id="rightColumn">
	<!-- This is my right column -->
</div>

					</div>
</div>

				<div id="commentbox">
					<?php comments_template('', true); ?>
				</div>

				<?php endwhile; ?>

				<div id="post-navigator">
					<div class="alignleft"><?php next_posts_link( __( '« Previous Entries', DR_TEXT_DOMAIN ) ) ?></div>
					<div class="alignright"><?php previous_posts_link( __( 'Next Entries »', DR_TEXT_DOMAIN ) ) ?></div>
				</div>

			<?php else : ?>

				<h3><?php _e("Sorry, we can't find the post you're looking for at this URL. Please try selecting a menu item from above or to the side of this message to get where you'd like to go.", DR_TEXT_DOMAIN); ?></h3>

			<?php endif; ?>

		</div><!-- end #blog-single -->

	</div>
</div><!-- end #content -->

<?php get_footer(); ?>

Without having read my first post, this may look like a LOT of code, especially if you’re a designer first and a programmer second -- like me. Not much I can do about that however. Styling the Directory Plugin requires a lot of moving parts. I’ll try to keep posting short tutorials on it however, to help anyone else who wants to build an awesome directory.

Adding in the Wordpress Body Area

You should have the title of your listing showing in your browser window at this point; along with the star rating, website address, and website link button. There are also a couple of columns but that’s about it.

Adding in the Wordpress Body Area may be next on your list of things-to-do. This is the large editing field in a normal post or page. It’s where most people type or paste in their blog posts or web page content. In the Directory Plugin Listings, it can also be used for that too.

It’s also the area that uses a built in What-You-See-Is-What-You-Get tool (better known as the WYSIWYG). It’s what allows editors to bold text, add an image, add a link, etc.

Your listing already has this field, as well as the WYSIWYG, but your listing page (single-listing.php) doesn’t show it yet. To add this in, find the code for the right column div, inside your single-listing.php page. It looks like this:

<div id="RightColumn">
     <!-- This is my right column -->
</div>

After the <!-- This is my right column --> add in the following code:

<div id="mainListingArea">
     <!-- WYSIWYG Content Area -->
     <h3>Listing Description</h3>
     <?php the_content(); ?>
</div>

What The New Code Does

For starters I’ve created a “mainListingArea” div. This is a div that will hold the main body content of the listing page.

To style this container I’ve added this to my style sheet:

#mainListingArea {
	float:right;
	width:270px;
	min-height: 200px;
	border:1px solid #ccc;
	padding: 20px;
	margin: 0 0 10px 0;
}

You’ll notice in my styles is that I’m floating the main listing area to the right. It could float on the left or right but I’m floating it to the right because later on I’m going to show you how I added YouTube Videos with the Directory Plugin (with Arnold's help). I’ve made the width of the area 270px, set a minimum height to 200px, put a border on it, added some padding, and placed a margin on the bottom.

The rest of the content area should inherit the styling from your website’s theme.

Back in the single-listing.php template and inside of our “mainListingArea”, I’ve added a comment to myself “<!-- WYSIWYG Content Area -->" and just under that an <h3> or third heading tag.

You can change the <h3>Listing Description</h3> to say whatever you want. If you’re listing books, maybe call it Book Description. If you’re building a directory based on the teaching of the Kama Sutra, maybe call it Position Overview. Who am I to judge?

The coolest bit of code is this:

<?php the_content(); ?>

This magically brings in the WYSIWYG edited content. I don’t really know how it does this but I don’t need to know. I assume the content is stored in the database and called up by some fancy PHP function but for all I know the content is guarded by Zeus on Mount Olympus and rendered onto the page via a chariot of gold, flown down by a murder of crows when a deep horn bellows out a call. The code may sound that horn. Who knows?

Featured Image Code

So for most of you, the Featured Image should be familiar. It’s actually called the Post Thumbnail Theme Feature on Wordpress’s website but within the Admin area of your site it’s called Featured Image.

It’s generally used to show a image from your post on the homepage or archive page of your website. This would depend on how your theme is setup. I’ve decided to use this for people creating a listing to add their logo or listing profile photo. Really, there are several ways this could be accomplished. You could use the WPMU Avatar Plugin, you could simply use the WYSIWYG image tool, or you could use a plugin/widget.

Adding an image to your listing with this tool makes the most sense to me because it’s what millions of Wordpress sites already use to feature an image. It’s also already in your Edit Listing area, within Wordpress (Although you could hide it by changing the Screen Options at the top of your Edit Listing page).

There may be some disconnect with my users understanding how it works with their listings and I may need to create my own video tutorial to help them. I’ll use lean/agile development best practices to test and improve the product as I go.

Anyhow, adding the Featured Image code is easy. Just copy and paste this code below code into your template. It goes just below the <h3> tag and just above the <?php the_content(); ?> code:

<?php the_post_thumbnail ( array('thumbnail'), array( 'class' => 'alignleft' ) ); ?>

So it should look like this:

<div id="mainListingArea">
     <!-- WYSIWYG Content Area ?
     <h3>Firm Description</h3>
     <?php the_post_thumbnail ( array('thumbnail'), array( 'class' => 'alignleft' ) ); ?>
     <?php the_content(); ?>
</div>

This code brings in your Featured Image and uses the “thumbnail” size, as set within your Wordpress site. The size of your thumbnail is set in your Wordpress Settings > Media admin area.

This code also adds a class to the image called “alignleft”. You’ll need a style in your CSS to actually move it to the left though. In my case it’s actually two styles that control this:

img.alignleft {
	margin: 10px 10px 10px 0;
	display: inline;
}

.alignleft {
	float: left;
	margin: 0 10px 0 0;
}

This is a little goofy because the img.alignleft class overwrites the margin of the .alignleft class. This could be written more cleanly in one class like this:

.alignleft {
	float: left;
	margin: 10px 10px 10px 0;
        display: inline;
}

It’s not written more cleanly in my stylesheet because the .alignleft class is used on a non-image somewhere -- hence the two classes.

Adding the Featured Image to the Left Column

Now that we have the main body content showing up in the right column, here is how I used the same Featured Image in the top of the left column.

Locate the following code:

<div id="leftColumn">
     <!-- This is my left column ?
<div id=”websiteLinks”>

Just below the <!-- This is my left column --> and above the <div id=”websiteLinks”>, paste in the following code:

<div id="listingLogo">
     <p><a href="<?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?>" title="" target="new-window"><?php the_post_thumbnail( 'medium' ); ?></a></p>
     <h5><?php echo do_shortcode('[ct id="ct_Firm_Tag_L_text_4962" property="title | description | value"]'); ?></h5>
</div>

Here is the style for the “listingLogo” div:

#listingLogo {
	text-align: center;
}

Pretty simple styling. I just want the content center aligned. The content in this case is the same Featured Image as before, just slightly larger, and with a tagline. The tagline is input as a Custom Press field. Let’s take a quick look at each:

<p><a href="<?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?>" title="" target="new-window"><?php the_post_thumbnail( 'medium' ); ?></a></p>

This code is three tags. A paragraph tag, an anchor tag, and the Featured Image PHP tag. The <p> simply gives the image some spacing. The anchor tag uses a Custom Press embed code -- the same code I used in my last post -- to link a website url. It also uses the target=”new-window” to open the client’s website in a new tab. I should use target=”_blank” but nobody's perfect.

The <?php the_post_thumbnail( 'medium' ); ?> tag displays the Featured Image based on the “medium” image size. The settings for your image sizes is found in your Wordpress admin area under Settings > Media. In my case I’ve changed the default Wordpress medium size (300px by 300px) to 200px by 200px.

The second part of this code is two tags; an <h5> tag and a Custom Press PHP embed code for a new custom created field. The <h5> tag is another heading tag and uses the default styles of my style.css file. The Custom Press embed code is for a field I’ve created asking for a tagline. Since I’m using the Featured Image to display my user’s logo, it made sense to me to allow my clients the ability to write in a tagline below that.

* One thing you should note if you're using this to help you style your listings. The Custom Press embed codes I'm using are unique to my website. You need to locate your own embed codes. You can learn about these on WPMU's Directory instructions.

That’s a lot in one post and I apologize for all of the grammatical errors. I was public schooled. :slight_smile: