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 (directorythemesdefaultsingle-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:

  • 3SixtyEvolve
    • New Recruit

    Absolutely stunning share, Troycdunn! This is a gem and I’ve bookmarked this page. I do hope that once you’re done with it you would be showcasing it – we love to see what our members can do with our plugins.

    Again, amazing work. Thank you!

    Gina

  • Mason
    • DEV MAN’s Sidekick

    @troycdunn, dude, you win post of the month for sure :slight_smile:

    Epic tutorial – and honesty while Genesis is a super power framework, it can also be daunting to integrate it with outside solutions. From the screenshot it looks like you’ve done a fantastic job here.

    Any chance of sharing a link so we can see it “in action”? Also, if you’d be interested in featuring this project on something like wpmu.org send a note to my attention through the contact form here:

    https://premium.wpmudev.org/contact/

    Thanks again for sharing :slight_smile:

  • Troy
    • Site Builder, Child of Zeus

    Thanks for the feedback everyone! And for the points! 14% of the way to my lifetime membership. :slight_smile:

    Right now I’m using the WPMU Privacy Plugin to hide my site from the world. Once I get the site up and running I’ll post a link back here.

    I’ve also posted another how to for the Directory Plugin. It’s on How to Add the WordPress Body Content Area and the Featured Image Using the Directory Plugin.

  • Troy
    • Site Builder, Child of Zeus

    Code Fix –This code:

    <div id=”firmProfileRightColumn”>

    <!– This is my right column –>

    </div>

    Should be replaced with this code:

    <div id=”rightColumn”>

    <!– This is my right column –>

    </div>

    My directory is a listing of law firms, so my ID’s are actually all more specific to my website. I’ve been updating them for this article to make them more generic. I made them generic to broaden their useablity and understanding.

  • jongag1
    • The Crimson Coder

    Hi Troycdunn,

    Testing this out and it’s working great.

    I’ve one problem; In some situations not all Custom Fileds are filled. When they are not filled I don’t want to display them.

    Tried the below code, but wheter or not there is a value int he custom field, in both situations the line get’s printed after the else statement.

    Do you (or somebody else) has a suggestion?

    <?php if ( is_null (do_shortcode('[ct id="ct_Fax_text_deab" property="value"]'))) { ?>
    <b>nul</b>
    <?php } // end if statement
    // if there is data in custom_values print this line code
    else { ?>
    <b>Fax:</b> <?php echo do_shortcode('[ct id="ct_Fax_text_deab" property="title | description | value"]'); ?>
    <hr size=4 width="50%">
    <?php } ?>

    Thanks!

    Age

  • Arnold
    • El Macho WP

    Try empty() instead of is null. They are very different and you’re probably getting an empty string back which is not the same as a null.

    Note that empty() only work on a variable so you’ll need to put the do_shortcode in a variable to check it.

    $tmp = do_shortcode('[ct id="ct_Fax_text_deab" property="value"]');
    if (empty($tmp) )....

  • jongag1
    • The Crimson Coder

    Here u go:

    <?php $tmp = do_shortcode('[ct id="ct_Fax_text_deab" property="value"]');
    if (empty($tmp) ) {} else { ?>
    <b>Fax:</b> <?php echo do_shortcode('[ct id="ct_Fax_text_deab" property="title | description | value"]'); ?><br>
    <?php } ?>

  • jongag1
    • The Crimson Coder

    Hi troycdunn,

    In your screen-dump above I noticed the You Tube video’s.

    Trying to have it myself I created a custom field and include it in the template.

    It works using the include code (iframe) you can see it at this link. But afterwards there’s a problem editing the listing because the value is wrong in the custom field as you can see in the screendump.

    Can you share how you accomplished it?

    Thanks,

    Age

  • johnnymestizo
    • HummingBird

    Hi @troycdunn

    I am having fun styling the directory plugin too. Perhaps you could help us with the following?

    1) I have a new page created by the plugin that lists all the listings.

    http://tradr.com/listings/

    I just want to get rid of the Archive / Listings up the top of the page but cant seem to get rid of it by editing any of the source, or moving files into my active theme directory.

    2) The listing page itself.

    http://tradr.com/listing/grind-espresso/

    I cant change the page template to be ‘fullwidth’ which is a theme specific page template.

    From there perhaps I could add another column to move the map up.

    I have google maps auto-generating the map and will add more custom fields in the near future.

    3) How do you add a form to the update-listing so people can specify an address during listing creation?

    This plugin definitely requires extensive customisation work to get it looking professional. Any help would be greatly appreciated.

    Cheers,

    Johnny

  • Arnold
    • El Macho WP

    On 1. That’s coming from your Theme, Probably the archive.php page, possible page.php. The listing loop doesn;t start until the

    <div id="dr_listing_list">

    2. Again it’s coming from your Theme line 387 of bounce/style.css restricts the #content width to 570px.

    3. Add Custom Fields in CustomPress associated with the directory_listing post type and they will show up automatically in the update form.

    Yes there are so many different flavors of Themes and designs all we can do to try to make it fit is do a fairly generic insertion of the data. Then you have to tweek the CSS to get it to look the way you want.

    You can start by copying the directory/ui-front/general/style-directory.css up to your theme directory and you can override and modify things there.

  • johnnymestizo
    • HummingBird

    Hi Arnold

    1. I have removed the ‘Archives / ‘ from the theme’s header.php file. Thanks arnold. However, it still uses a wp_title() and gets the title Listings. Is it possible to change this name?

    2. I want to use the page-template of ‘fullwidth’ which is a page template included with my theme. It is in use at http://tradr.com/thanks/ My theme is responsive so I want use built-in theme page templates. It is possible to specify this page template for listings?

    3. I have added the custom field via custompress. Google Maps can see it and generate a map accordingly. It seems that the directory plugin is not adding it as part of the new listing form for buddypress.

    Feel free to login and do a quick test.

    Thanks

    Johnny

  • johnnymestizo
    • HummingBird

    Also, on top of this listings page ( http://tradr.com/listings/ ) I want to put a

    <?php do_shortcode ('[map query="post_type=directory_listing"]'); ?>

    As I believe this would load up all the directory listings that have a map generated from the custom field.

    I just can’t find where the file is I have to edit to change the output of this listings page…

    PS: There are no registrations. You must login with google, facebook, yahoo…

    Thanks for the help in advance,

    Johnny

  • David
    • WPMU DEV Initiate

    Any way to get the contact form that is on the default directory listing page to show up on a custom page? I have tried pasting in the code from the original single-listing.php, but it just breaks the page. There must be some dependencies on other files or something. Any ideas?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.