How to Style the Directory Listings

Styling the Directory Listings

The WPMU Directory Plugin can be daunting. It’s a highly complex, open-ended tool for creating your own Directory website. You can use the templates that come with it or you can take on styling the Directory to make it your own. Here are some tips that might help you if you are going to style the directory on your own.

1. The Listing Page

The key to styling the listing pages is to use the single-listing.php file. This will be the template for all of your listings. You can start by copying and pasting the page from the plugin files (directory\themes\default\single-listing.php) into your theme’s folder or you can simply start from scratch by creating a new php file called "single-listing.php".

I use the Genesis Themeing Framework by StudioPress to do all of my themeing and found it easiest to start from scratch.

For my single-listing.php page, my document started with this code:

<?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>
</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(); ?>

This code is the basic starting point for my theme. It wraps the Directory listing with the look and feel of my website including the banner, navigation, and footer. It also has some php for leaving comments (if comments are turned on) and provides a message if there are no listings available.

It’s worth noting that within the Genesis framework you can set a default column layout -- one, two, or three. To get my site to work easily, I used the one column layout as the default -- which removed the sidebar. This made styling the Directory easier because I didn’t have to work around the sidebar or figure out how to get it to not show up on my page.

2. Title Area

To style the Listing Title Area of my page, I created the following code:

<div id="listingHeader">
     <div id="listingTitle">
         <h1><?php the_title(); ?></h1>
         <?php do_action('sr_avg_rating'); ?>
     </div>
</div>

This code was placed just under my comment (<!-- Here is where the magic happens -->:wink: and loads the listing title, as entered by the listing creator in the “Enter Title Here” field. The title is wrapped in the <h1> or heading one tag, which is the ideal SEO method for page titles.

The <?php do_action('sr_avg_rating'); ?> code displays the Directory Star Rating for the individual listing. It’s an average rating of all votes for that listing and part of the default listing's single-listing.php page. I simply copy and pasted it from the default template.

Both the Title and the Star Rating are wrapped by two div containers. I’ve done some real basic styling in my main style.css sheet for these. Here are my styles:

#listingHeader {
	width: 940px;
	float: left;
}

#listingTitle {
	float: left;
}

I use floats to position all of my divs on the page. You can learn about CSS floats here (http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics2)

3. Creating Columns

I mentioned before that I had set my web page to have one column using the Genesis framework. This gives me the full width of my page to create my listings, essentially removing the sidebar that is normally on my other pages.

I still want to make use of columns on my page however, so in my layout I’ve created two columns. The left column takes up ? of the page. The right column takes up ? of the page.

In my single-listing.php template, I wrote in the following xhtml just after my “listingHeader” div ends:

<div id="leftColumn">
	<!-- This is my left column -->
</div>
<div id="firmProfileRightColumn">
	<!-- This is my right column -->
</div>

The style for these look like this:

#leftColumn {
	float:left;
	width:210px;
	border:1px solid #ccc;
	padding: 20px;
	margin: 0 10px 0 0;
}

#rightColumn {
	float:right;
	width:636px;
	border:1px solid #ccc;
	padding: 20px;
	margin: 0;
}

These styles basically put my left column on the left side and right column on the right side. It also put a border around both of them, some space between the columns, and some padding on the inside.

3. Using CustomPress Fields

When styling your listing the most important part is loading your Custom Press Fields into styleable areas. To do this you’ll first need to create a new field. To create a new field follow the steps found on the Directory plugin page. (https://premium.wpmudev.org/project/wordpress-directory/) Click the “usage” tab and scroll down until to “Creating a Listing”.

Once you have a custom field created, locate the embed code by going to Custom Press > Content Types > Custom Fields in your Wordpress install. Hover your mouse over your custom field and the link to “Embed Code” will appear. Click on the link.

There are two types of embed codes -- a php embed code for use in your template and a shortcode for use in posts or pages. You’ll want the php embed code.

Here is the embed code Custom Press created for a field I use to collect a website address:

<?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?>

(Note: My Custom Press field asks for a full website URL. It requires the full http:// to work. An example would be: https://premium.wpmudev.org)

I added this embed code to my “leftColumn” and surrounded it with an anchor or xhtml link tag:

<div id="leftColumn">
	<!-- This is my left column -->
        <a href=”” title=”Website Link” ><?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?></a>
</div>

Then, inside of the href=”” attribute, I repasted the emebed code:

<div id="leftColumn">
	<!-- This is my left column -->
        <a href=”<?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?>” title=”Website Link” ><?php echo do_shortcode('[ct id="ct_Website_Ad_text_6f39" property="title | description | value"]'); ?></a>
</div>

This code displays the user input URL and makes it linkable to the URL they input.

4. More Embed Code Fun

On my listings I wanted to show the users URL, as well as, create a more noticeable graphic linking to the users website. To do this I reused the Custom Press field but added an image tag instead of the second embed tag:

<div id="leftColumn">
	<!-- This is my left column -->
               <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>

I also added a paragraph tag around both the text link and image link to give them some spacing and added the target=”new_window” tag to open the website in a new window. *

* The target=”new_window” is depracated but it still works and I use it.

5. Styling the Website Links Container

The next thing I did was to add a div container around my embed code links, so that I could better control the look. I created a new div called “websiteLinks”.

<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>

Then in my CSS I created the following style:

#websiteLinks {
	margin: 10px 0;
	padding: 5px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

This placed a border, margin, and padding at the top and bottom of my container.

That's all for now. I'll update this with more tips but here is a start for anyone attempting to style the Directory on their own.

Ps. I've attached a partial screenshot of my site's listing page. It doesn't show the full page but you can see where I'm going with it. This site is not yet online but with help from the WPMU Developers and the WPMU's Community, I hope it will be soon! :slight_smile: