How to Use Wordpress as a Membership Directory

pghdesigners.jpg

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. (more…)

How to Create An Archives Page

In another effort to de-clutter the sidebar and begin your initiation for The Organization for the Organized, here’s how to create an archives page for archive links listing by categories and months. First of all, check out the Wpdesigner’s archives page to see what you’ll be adding to your blog.

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:

<?php
/*
Template Name: Archives Page
*/
?>

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:

<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<ul><?php wp_list_cats(’sort_column=name&optioncount=1′) ?></ul>
<ul><?php wp_get_archives(’type=monthly&show_post_count=1′) ?></ul>
<?php endwhile; ?>

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.

Do-It-Yourself WordPress Hover Menu

hover.jpg Also as known as Pop-up Menu Layer, HoverExtended, or Tooltip Links, a hover menu is simply a list of links that appears when you move your mouse over a certain part of a web page. Why does it have many different names? Because there are different ways to create a hover menu, the name depends on the technique.

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. (more…)

How to Put Your Best Content Forward

Don’t let your best content get lost in the archives. Use them to impress first-time readers. Here are two ways to put your best content forward.

First Method: WP-Sticky Plugin

post-sticky-status.gif 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. (more…)

Part 3 - How to Code a WordPress Theme

I recently finished the third part of my free e-book on how to create a Wordpress theme from scratch. The third part is How to Code a WordPress Theme and I’m releasing it to beta-testers and subscribers. Yes, if you are subscribed to this blog’s RSS feed and are reading this from a feed reader then you will find a download link at the bottom of this post. (more…)

How to Slice a WordPress Theme

How To Slice A WordPress Theme is part two of my e-book on how to create a WordPress theme from scratch. (Check out part one.) It shows you how to merge all layers and save the areas that you want to use as images.

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

How to Design a WordPress Theme

This is the unofficial 33% release of my upcoming ebook. This part is called How to Design a WordPress Theme.

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.

How to manipulate category templates

One of my favorite WordPress template features is the ability to customize category templates to cater specific categories of your choice.

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

category-default.png

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

category-custom.png

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

category.php

template (or

archive.php

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

category-2.php

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

Style featured posts with WP-Sticky plugin

WP-Sticky is a plugin by Lester Chan, used to sticky blog posts that you want more attention for. If you sticky a post, it’ll stay at the top of your blog page, regardless of its published date.

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.

stick-status.png

(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

post_sticky_status()

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:

<div class=”post”>
<h2><?php the_title(); ?></h2>
<div class=”entry-content”>
<?php the_content(); ?>
</div>
</div>

What if we insert the

post_sticky_status()

function as a CSS selector like this:

<div class=”post <?php post_sticky_status(); ?>”>
<h2><?php the_title(); ?></h2>
<div class=”entry-content”>
<?php the_content(); ?>
</div>
</div>

After inserting it, you end up with:

<div class=”post Sticky”>

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:

sticky-styling.png

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

.Sticky{
background: #fbfbfb;
}

sticky-styling-2.png

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

post_stick_status()

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

Here’s how:

<?php post_sticky_status(”,”); ?>

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

<?php post_sticky_status(’<span>’,'</span>’); ?>

. You would end up with

<span>Sticky</span>

.

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.

How to place a login form in the sidebar

Skip the login page. Want to log in through the front page? If yes then this tutorial is perfect for you. First, let’s see how it actually looks like. I tested it with my Lust WordPress theme on two local WordPress installs, version 2.1 and 2.2.

Here’s the login form in the sidebar:

sidebar login.png

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

admin logged in

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

user_logged.png

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.

Using Custom Fields Part Two - Styling Per Post

Now we are going to get into the really exciting things that can be done with custom fields! If you haven’t already taken a look at Part One, give it a quick read to bring yourself up to date with the rest of us. In this post (and the posts to come!) we are going to look at some more advanced techniques involving the use of custom fields.

The end of the last post directed readers to take a look at the advanced section of the guide on custom fields in the Wordpress codex. Give it a quick read if you haven’t. The advanced section introduced us to this function:

get_post_meta($post_id, $key, $single)

.

What does this function allow us to do?

  1. It allows us to call up a custom field from a specific post.
  2. It allows us to call up a specific key value.
  3. And it allows us to control how the resulting data is displayed. (In other words whether the data is displayed as an array or a single value.)

In this lesson we are going to focus on number two from the list above. Using the following simple function to call up a specific key value:

<?php echo get_post_meta($post->ID, ‘your key name here‘,true) ?>

Lets run through how we can use this function to create flexible custom layouts on a per post basis.

Complete the following steps:

  1. In your Wordpress admin go to Presentation: Theme Editor: Select the theme you wish to edit in the drop down menu: then select the Main Index Template.
  2. In the Index Template find the area in the image below that is highlighted (located in the The Loop):
    area.jpg
  3. Now replace “post” with
    <?php echo get_post_meta($post->ID,’post’, true) ?>
  4. We are done editing the Index Template make sure to save it. Next go to a create a new post. While writing a new post go down to custom fields to create a new key and value labeled like in the image below, click the add Custom Field button when complete:
    customarea.jpg
  5. After adding the Custom Field you should see something like this:
    aftercustom.jpg
  6. Now type up a simple post. And publish it. If you look at the source code after publishing you should see something like this for the class of your new post:
    <div class=”default” id=”post-1″>
  7. To style it simply create a new styling attribute in your CSS similar to the following:
    .
    default {background: #114433; font-family: Verdana, Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;}
  8. Now when publishing a normal post make sure to add the custom field with the key name “post” and to then type in default. This will be the default style. If you want to change the styling just type in a different class name in the value area. Make sure to do this with your single template as well if you wish.

Simple and elegant I think. The possibilities are endless. The only negative is that this is something you need to do at the start of a new blog or risk the need to create custom fields for every post you have published. There is a way around this issue that I will cover in a future post. Next in the custom fields tutorial series we will look at using custom fields to create a custom image per post. (ie. a category icon)

Follow this Custom Fields tutorial series from the beginning.

Using Custom Fields Part One - The Basics

Custom fields offer a lot of flexibility for Wordpress users. And the flexibility goes well beyound posting the status of your current mood or the latest book you are reading. Over a course of a number of posts, we are going to take a look at what can be done with custom fields. (which is a lot!) My hope is to offer a good resource of learning material for those wishing to utilize custom fields to their full extent. Now instead of jumping immediately into things, lets start things slow and work our way up.

The best place to start when first attempting anything new and unfamiliar in Wordpress is to consult the documentation. With that in mind its unfortunate that the available documentation and examples regarding custom fields is lacking. Not to mention scattered. Few seem to have a good understanding of custom fields. Which is why we will attempt to fill in the gaps and unify a few of the basic things to start. Lets go over the document page I referenced.

The docs label the information presented by custom fields as meta-data, (Wikipedia has an interesting article on understanding the term metadata) the important thing to note about this meta-data is the key and value relationship of the data. The easiest way to think of the terms is that a key is the label, or name of the information, while a value is actual information related to the key. It is worth noting that any keys you create are accessible later via a drop down menu available when writing a post, the value however is entered per post. Lets look at the interface where custom field information is entered:

custom.jpg

The red box is the drop down menu we talked about a moment ago. The green box is where new keys are entered. The blue box is where a value is entered. And all of this is can be found beneath your main post writing area under the bar labeled custom fields. Easy enough. Lets go through a quick example. Start a new post, enter in any key and value you wish and publish the post. Make sure to keep in mind the difference between a key and a value.

If your current theme doesn’t have meta-data preconfigured, nothing will display. If that is the case, how do we get the information to display? We use the

the_meta

tag as illustrated in the documentation on using custom fields. Just place

<?php the_meta(); ?>

somewhere within The Loop and Wordpress will display the information you entered into the key and value areas of your post at that location.

And as shown in the docs Wordpress will then output source similar to the following:

<ul class=’post-meta’>
<li><span class=’post-meta-key’>Curently Reading:</span> Calvin and Hobbes</li>
<li><span class=’post-meta-key’>Today’s Mood:</span> Jolly and Happy</li>
</ul>

And of course styling is as simple as editing the styling attributes for the UL and SPAN classes:

post-meta {font-variant: small-caps; color: maroon; }
.post-meta-key {color: green; font-weight: bold; font-size: 110%; }

That about covers the basics. We’ll look at some advanced custom field concepts the next lesson. Including finally how to style per post. If you’d like to do some homework, read the advanced techniques for custom fields from the codex.

Complete Lessons Listing:
Part Two Styling Per Post

Close
Powered by ShareThis