This article was written by Chris Cagle.

Do you want to create a moderated membership directory that showcases your member’s information? Do you want it to be flexible, be very little work after initial setup, and use a world-class open source platform that you are already familiar with?

Your first thought might not be to use Wordpress for such a project, but since it already has an extremely easy way to accept, moderate and update registrations – it’s a perfect candidate.

In this tutorial I will show you how I built a successful membership directory using nothing more than a standard Wordpress 2.3+ install and 2 very powerful plugins.

The Plugin Installs

The heart of the site is powered by two plugins.

First, use the WP User Manager plugin from Dealsway to add new fields to the user profiles. The install and setup is pretty straight forward - just activate the plugin and add any new fields you want via it’s own admin section. The information entered in these fields will become the information that will create the member’s “homepage.”

Secondly, we use the famous Role Manager plugin which restricts what your members can do once they are logged into your site. This is important because in order for a member to be granted their own author page, he or she needs to have made at least one post.

In my case, I didn’t want my members to have the ability to post anything, just to only fill out their profile information. To get around this, I used the Role Manager plugin as-is, but changed the Author role to only have the rights Publish Posts and Read. (The Hide Dashboard capability you see in the screen shot is a function of the IWG Hide Dashboard plugin. It was an easy way to clean up the admin panel for my members.)

Setting Wordpress Options

After you have installed all the plugins, we need to get Wordpress ready for your new registrations.

In your Admin panel, under options, set your New User Default Role to Subscriber. This ensures that a member won’t be given an author page until you “approve” and manually move them to the Author role. (A Subscriber can’t make posts, an Author can.)

Once a member has registered and filled out all the appropriate profile information, we need to “approve” that member. We do this by simply moving that member into the Author role and making a post on his or her behalf. I want each approved member to have made a post in order to create the New Member Feed [example]. To post on behalf of that member, choose that member’s name out of the dropdown list in the Post Author section in the sidebar before publishing their post.

This post doesn’t need to be anything spectacular. On Pittsburgh Designers, I simply write “This business has been added as a member. Please visit their Design Profile.”

There are other ways of doing this to make it slightly simpler, but I do it this way because I want to use Wordpress’s default feed as a New Member Feed.

Your membership management duties are now done.

Creating the Author Page

All that’s left now is the need to create the author.php template to display all this new member profile information that the WP User Manager plugin allowed us to accept.

For the sake of this tutorial, we only added 2 new fields to the member profile page: business_name and business_owner.

At the top of the author.php template we will add this code. Hint: Each new field you add will need to be declared here.

Now right below that, in the body section of your template, we are going to add this data and markup to display it in a structured way:

The next step is to also show some of the default fields that the member entered within their profile. I only want to show the member’s website address and About the user section, so we modify our template to look like this:

Hint: A full list of $curauth-> calls can be viewed in the Wordpress Codex.

Lastly, we want to do some basic error checking.

What would happen if the member didn’t put anything in the business_owner field? In this case, we can just wrap that line in an if statement (…or any variable we want to protect against being blank):

Listing your Members

So how do you list all of your approved members? It is as simple as adding the wp_list_authors to any template file. This is the customized version of that function I use:

Tutorial Wrapup

This tutorial was based on my experiences in building the Pittsburgh Designers community into a thriving, local membership directory for creative types. Mosey on over to the site and take a peek for yourself how what a finished project like this can look like.

You can download the complete finished author.php template here.

About the Author

Chris Cagle is a freelance web designer from Pittsburgh, PA, whose projects include Pittsburgh Designers and AdClustr.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

Second, most free WordPress themes already have an extra page template for an archives page. Look in your theme’s folder for an unused PHP template file. Usually, theme authors name this template archives.php, which is different from your default archive template, archive.php (without the “s”).

Third, you need to know that this tutorial is not the end-all tutorial for create a custom archives links listing page. The structure of each theme is not always exactly the same as the next theme’s structure. All I can show you is the basics and how I did it.

The Steps:

1. Create a new file and name it archives.php

2. At the top of that file, type:

Without those lines above, you won’t be able to use your new archives template file so be sure that you don’t leave that out.

3. Add the loop, title, category listing, and month listing:

4. Tweak the codes above to make it fit in with your current theme. Here’s where different theme structures come into play. I can’t give you my archives template because it might not work with your theme’s structure.

5. Upload it to your theme’s folder.

6. Create a new page and select your newly upload Archives page template for that page.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

Here are some examples: 1, 2, 3.

Regardless of how many different ways you can approach the hover menu to create it, it isn’t easy. In the beginning, you’ll find yourself trying to recreate the hover effect using pure CSS. However, you can always trust Internet Explorer to mess up, which it will.

After the first hour of frustration, you’ll search for Javascript work-arounds on Google. But then, you’ll soon realize that Javascript work-arounds don’t come cheap and you’ll need to purchase a Reseller or Developer license to use that Javascript in projects that you want to redistribute.

After that, you’d probably give up. But luckily, you have the trusty Small Potato (yours truly). I’ll show you the simple way to create a hover menu without having to deal with IE bugs and without having to use

. (Using

usually gives you a flickering hover menu in IE, which is a no-no.)

Here’s an example of using the hover menu via

.

In the example above, the Hover Link 1 and Hover Link 2 will flicker on and off in Internet Explorer. If you don’t see them flicker on and off, try using a hover menu within an image link and you’ll see what I meant. And as you can see, using pure CSS and

to create the hover menu means you have to place the entire menu within one link.

So, how will you create a hover menu without

? Simple, use the

selector on something else. But, Internet Explorer doesn’t support

for… something else? Well, that’s where csshover.htc comes in. It’ll allow you to hover other stuff in IE.

Download it and drop it in your themes folder. Open up the

file and here’s one way to link to this new file you just downloaded:

Do not copy and paste the codes above. Type it out.

Now that you’re armed with the csshover.htc Internet Explorer :hover work-around, you have a lot of options to work with. Below is simply one of many ways you can create a hover menu.

<div class=”hover-wrap”>
Some regular text here that the user sees when viewing the page

<div class=”hover-menu”>
Here’s what the users will see when they move their cursors over this area.
</div>

</div>

Do not copy and paste the codes above. Type it out.

Based on the codes above, here’s what you should have in the

file of your theme.

.hover-wrap{
position: relative;
}

.hover-wrap .hover-menu{
display: none;
}

.hover-wrap:hover .hover-menu{
display: block;
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
white-space: no-wrap;
}

CSS Explanations:

First, I told

or

to position itself relatively, hence,

.

Second, I told

or

to hide itself by using

.

Third, I told

to appear, where to appear, and how to it should appear.

• display: block;

  is for reversing

  display: none;
• position: absolute;

  allows you to position it precisely. It’s important to note that this absolute positioning works hand in hand with the relative positioning of

  .hover-wrap

  .

• top: 10px;

  means it will appear 10 pixels from the top of whatever it’s contained in. In this case, it’s the .hover-wrap box or DIV.

• left: 10px; means it will appear 10 pixels from the left of whatever it’s contained in.
• z-index: 100; allows it to show up without messing up the positioning of anything else on your page. Z-index has to do with layering. Something with a z-index of 100 will appear in front of something else with a z-index of 99.
• white-space: nowrap;

  allows whatever that shows up on hover to extend itself beyond the width of whatever it’s contained in. For example, if you have a 300 pixels box and a 400 pixels hover menu or hover content box, but you don’t want to apply a definite width to that hover box, then use

  white-space: nowrap;

  . Otherwise, get rid of white-space and do something like

  .hover-menu{width:400px;}

  .

But, wait a minute, isn’t the example simply a hover box with some text and not a hover menu with links? Yes, I’m glad you paid attention. From my hover box of text, you can add links to make it a menu. For examples:

Or, you could do something like the following:

Once you are able to recreate the hover menu effect. There’s really no limit to what you can put in it, but don’t go overboard. Have fun and don’t forget to show me your hover menu!

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

First Method: WP-Sticky Plugin

If you publish multiple times per day or simply want to feature the best article of the week then install the WP-Sticky plugin by Lester Chan. It’ll allow you to feature or sticky the article that you want visitors to read first. It does this by letting you to pick which post to sticky then displays that sticky post before all the other posts on your page.

Installation is easy, simply upload to the plugins folder and activate it. Next, go to the edit screen of the post that you want to sticky. Select the Announcement or Sticky option under the Post Sticky Status box. Note, this plugin displays Annoucnement posts before Sticky posts. The Announcement option is there to make one sticky post more important than all other sticky posts.

Second Method: DOMTab

As your blog grows, you’ll find it more and more difficult to feature all the best links in one simple list. There’s simply not enough room, not even in the sidebar. What if there was an organized way to categorize those links and feature them as multiple lists using less space? DOMTab is that solution.

Take a look at this blog and Problogger, both blogs feature a section or block called, “Best of,” which is made up of multiple lists of links, linking to the best content. Both sections of both blogs are powered by DOMTab. Now you know where I got the DOMTab idea from.

DOMTab might look difficult to use, but it really isn’t. On its download page, there are very specific instructions on how to use it and how you can style it to make it your own. If that’s not enough, don’t worry. I’ll also show you how I did it.

Placement of Best Content

But before that, you need to decide where to place this “Best of” section. Unlike Problogger’s layout, which separates this section from the main content, I placed it in between the first and second posts on the home page, in the main content area.

(Why? If I want my best content to be one of the first things new readers come across then why would I place it in the sidebar to let it get lost in sidebar clutter?)

And don’t forget, my first post is a Sticky post so the home page now displays content in this order: Featured Post, Best of Wpdesigner, Recent Posts.

Why not let “Best of” be first? It comes second on this blog because I want to show my recent best content (Sticky post) to the loyal readers first. Readers that have read most of the best content don’t need to see it again and again every time they come back to the home page. Don’t force them to overlook the whole first half of your home page by putting “Best of” first.

How to use DOMTab

If you haven’t already, download the DOMTab Javascript file. To use it, you need to take three steps: link to the Javascript, insert the DOMTab codes with your links, and style it.

Linking to the Javascript: Place the following codes in the head of your header.php file. Don’t try to copy and paste the codes. My blog uses smart quotes when I display codes in a blog post. They will not work properly if you copy and paste.

The codes above assume that you’ve placed the domtab.js file in the root of your theme’s folder.

Inserting DOMTab with your content or links: The following screenshot shows the basic structure of DOMTab.

The structure starts out with a DIV tag named “domtab” or simply an invisible box that does nothing. Under or nesting within it is an unordered-list or UL tag named “domtabs.” Notice the extra s or you’ll have a hard time styling it. Nesting in the UL tag are two LI tags or list-items: Test 1 and Test 2. Notice, both are links, which were named t1 and t2. You can change Test 1, Test 2, t1, and t2 to customize it for your blog.

For my blog, Test 1 is Tutorials and Test 2 is Themes.

Still within the domtab DIV, under the domtabs UL tag are generic or nameless DIV tags surrounding H2 heading links, which were named t1 and t2 to match the list-items within the domtabs UL.

The areas within the brackets are where you can customize and place your own content or list of links. I went with the list of links.

To make it more convenient for me to reuse the “Best of” section throughout my blog, I placed everything in a filed named bestofwpdesigner.php. Every time I need it, I’ll use:

Styling DOMTab: I didn’t do anything special to style it. For the domtabs UL or unordered list of link items, I turned it into a horizontal menu. Here’s how to create a horizontal menu. And here’s my own codes to style the domtabs UL portion of the whole structure:

As icing on the cake, here’s how I made the “Best of” section show up under the first post on the home page.

Open up the index.php file. Place

between if…have_posts and while…have_posts like this:

Before

, add:

If you’re inserting the “Best of” section by including it as a file like I am, change bestofwpdesigner.php to your own file name. If you’re not inserting it by including it as a file then place all the DOMTab codes in between:

and

One more thing, if you want “Best of” to appear under the second post. Change $count==1 to $count==2. Easy huh? Now you know how this blog and how you can put the best content forward. The codes used to place the “Best of” section in between posts were taken from the ProSense theme.

Coming soon are more tutorials on blog design tweaks to improve your blog and the user’s experience.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

Subscribe to this blog’s feed.

Part 3 is similar to my WordPress theme tutorial series, but it covers a lot more of the CSS side of creating a WordPress theme and you end up with a better looking theme than the one in the tutorial series.

Please download it and give it a test run. Any feedback would be helpful. Additionally, check out Part 1 and Part 2.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

In related news: Part 1, How to Design a WordPress Theme, has been updated.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

The next two parts are How to Slice a Wordpress Theme and How to Code a WordPress Theme.

The .zip file is 8.51 MB. Inside, you’ll find a PDF file containing design instructions, a folder of images (step-by-step screenshots), and a PSD file for you to mess around with. To use the PSD file, you’ll need Photoshop. Here’s the PDF file for you to preview, but you should download the screenshots and PSD file for the instructions to make sense.

About the instructions, they assume you have no prior knowledge of Photoshop so it’s pretty detailed. I’d suggest printing all of the instructions (15 pages) before working on this tutorial.

Again, this is a partial release of the entire book on how to create a WordPress theme from scratch. The entire book is still scheduled to be released within this week, but it looks like I’m going to need more time, longer than I originally announced. I’m doing the best I can to release this book as soon as possible (right now is 4:35 am), but I need to make sure it’s something I can be proud of so please hang on for several more days.

Update: I’m using OpenOffice.org to export the tutorial as a PDF file, but I can’t find the PDF security options. If you can show me where to access it, please post your instruction as a comment. Thank you.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

Here’s my default category template. It simply displays excerpts:

Here’s my customize category template for category ID #2. This one is actually a theme gallery template:

So, how do you manipulate category templates? Simple, duplicate your default

template (or

in some cases), add a hyphen and a number to the name of the new file. For example:

. Then, start customizing the template for the new file.

The number attached to the file name should be the ID of the category that you want to target.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

That is especially useful if you publish multiple times per day with the need to feature one important post. You could simply publish the most important post in the morning, sticky it, and continue publishing instead of waiting to publish the most important one as the last post, just so it would be the first blog post your visitors see.

To install it, you simply download, unpack, and upload its folder to your Plugins folder. To use it, while editing or publishing a post, go to Post Sticky Status and select the status.

(There’s an additional feature, Announcement. Announcement posts show up above Sticky posts, which I guess… is useful for highlighting the most important post of all stickied posts.)

Beyond what WP-Sticky was built for, there’s a

function that you can use to mark your stickied posts. By default, that function outputs texts only. For example, it’ll output Sticky or stickied posts and Announcement for announcement posts. You can customize it to output XHTML too.

How is that function useful for you in terms of design? Well, here’s your typical posts listing template:

What if we insert the

function as a CSS selector like this:

After inserting it, you end up with:

Now, you have a conditional CSS selector that will only appear for posts marked as Sticky. That alone gives you lots of options to customize. You can use different background colors, images, and etc. to highlighting Sticky posts. Here’s an example of highlight a sticky post with a background image:

Or, you could simply highlight it by changing the back color like this:

It doesn’t stop there. You can go on to customize post title link color, font size, line-height, and etcetera. Also, you don’t have to use the

function as a conditional CSS selector. Remember I mentioned that you could customize that function to output xhtml too?

Here’s how:

. Everything in the first set of single quotes appear before the word Sticky or Announcement; everything in the second set of single quotes appears after the same word.

For example:

. You would end up with

.

Warning: If you’d like to test this plugin, do not copy and paste my codes. I posted my codes as texts, not actual codes, so copy and pasting will not give you the proper format.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.

Here’s the login form in the sidebar:

Here’s the message after you’ve logged in:

And here’s what a logged in subscriber would see:

So how do you put a login form in the sidebar? Simple, I did the work for you. Copy and paste the code in sidebar_login.txt to your sidebar. The URLs generated by this code is compatible with WordPress version 2.1 and up only. 2.0 and earlier versions are not compatible.

This technique is especially useful if you’re tired of having to go to the login page or if your blog place great importance on getting readers to register for accounts and actually log in.

Source: The original code was from MW WordPress theme by Javier García. I restructured and modified the code for a WordPress-like sidebar structure and valid XHTML.

ShareThis

--------------

Thank you for subscribing to my feed. Download my ebook about how to create a WordPress theme

Copyright © 2007 Wpdesigner.com. All Rights Reserved.