We have been thinking about a directory page. One way to increase website traffic is by ‘Reciprocal links’, a sort of mutual link site to site.

We had a Google for a WordPress directory page and plugins, the pages in nearly all cases come with a theme. We did not want a theme, just the contents, since the plugins are few and far between. We tried one which was not very good, so what else could we use?

We have the WordPress Portfolio Plugin which we know is well supported by Dan Harrison as we asked him to add an inner page function for the Shrink The Web images that the plugin now uses.

The plugin has groups, is easy to use, and can be styled so it is almost good ‘enough out the box’, as we are only looking at about 40 links. The thumbnails will be a nice feature and the only extra we wanted was a two column display for our Twenty Ten child theme. We looked at the documentation, had a drill down into the code and come up with a way to have the groups in columns.

All we needed was two files a new ‘WordPress 3′ template page and a template part. We copied the plugin styles to our styles.css and made some changes. The files are in the download but please read down past the code as there are some setup changes to do.

Download Support Files: 2010 Simple Directory (832)

Stylesheet

In the changes folder find the file called directory-style.css. This is the code below and should be added to our theme or child themes style.css file.

/* Start Two Column Support */
.column-left
{
float: left;
position: relative;
margin-right: 20px;
width: 310px;
}

.column-right
{
float: left;
position: relative;
width: 310px;
}
/* End Two Column Support */

/* Start Directory Page Stylesheet */
.portfolio-website {
border: solid 1px #f1f1f1;
padding: 10px;
margin-bottom: 10px;
height:130px;
overflow: hidden;
}

.website-thumbnail {
margin: 0;
}

.website-thumbnail img {
float:left;
border: 1px solid #555;
padding: 0;
}

.website-name {
font-size: 12pt;
font-weight: bold;
margin-bottom: 3px;
}

.website-name a,.website-url a {
text-decoration: none;
}

.website-name a:hover,.website-url a:hover {
text-decoration: underline;
}

.website-url {
font-size: 9pt;
font-weight: bold;
}

.website-url a {
color: #777;
}

.website-description {
margin-top: 15px;
}

.website-clear {
clear: both;
}

.portfolio-paging {
text-align: center;
padding: 4px 10px 4px 10px;
margin: 0 10px 20px 10px;
}
.portfolio-paging .page-count {
margin-bottom: 5px;
}
.portfolio-paging .page-jump b {
padding: 5px;
}
.portfolio-paging .page-jump a {
text-decoration: none;
}
/* End Directory Page Stylesheet */

The only differences here to the style offered by the plugin are the left and right columns, and we have added a fixed height and border to the directory link container.

Loop Directory

Next, we created a new template part in the theme folder called loop-directory.php. This loops through the Portfolio Groups and returns the links. We adapted this code from the plugin code and added a couter which switches between the left and right columns. This file is in the download and should be copied to the themes folder.

<?php
global $wpdb;
$table_name = $wpdb->prefix . TABLE_WEBSITE_GROUPS;
$SQL = "SELECT * FROM $table_name ORDER BY groupname";
$groups = $wpdb->get_results($SQL, OBJECT);

if ($groups) {
foreach ($groups as $group) {
$counter+=1;
if($counter % 2) : ?>
<div  class="column-left">
<?php else: ?>
<div  class="column-right">
<?php endif;
if (function_exists('WPPortfolio_getAllPortfolioAsHTML')) { echo WPPortfolio_getAllPortfolioAsHTML($group->groupid);}
?>
</div>
<?php
}
}?>

All we are doing here is creating a query to return the groups if there are groups then loop through and return the entries for each group into the left or right columns.

Directory Page

Next, we created a new template page in the theme folder called page-directory.php. This file is applied to a page as a template and is in the download and should be copied to the themes folder.

<?php
/**
* Template Name: Directory Page
*
* A custom page with two Directory Columns .
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
get_header(); ?>

<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div  class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php endwhile; ?>

<?php get_template_part( 'loop', 'directory' ); ?>
</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

All we are doing here is creating a template page, which will output the page contents followed by two columns of links. Notice the get_template_part which calls our loop-directory.php file.

WP Portfolio Options

To have the thumbnail links you will need a free account with shrink the web, refer to the plugins options page. Create two groups and add in some links, delete any empty groups and set the thumbnail size to the smallest.

In the WP Portfolio > Layout Settings delete the template CSS and Paging CSS as you have added them to the style.css file, in the website HTML Template adjust the lines in the order of this screenshot.

Directory Page

In the Admin > Pages add a new page, enter some text if you want and apply the template to the page and save. Add the page to the menu and you are ready to go.

Here is our directory page. Notice how using a fixed height has a nice even look to the page.