Since I use TopStyle for coding, I decided to take the time to make a jQuery Clip Library. It helps me write jQuery code faster in the editor. Download v1 for yourself!

I also made PHP and Miva (if anyone out there is still using miva) clip libraries a while back that are still available for download.

All 3 clip libraries should work in TopStyle v3.x. Don’t forget that TopStyle 3.5 is out if you have not yet upgraded!

I say it’s time to bring back the buttons. Firefox Now, and Get IE7, or Opera Why Not etc. Lets get people to stop using IE6 and to start using the latest versions! As long as we keep supporting it, people will keep using it. It was fine back in the day to ask the user to use a specific browser, but now it’s a scary thing to do… or is it?

Upgrade to IE7, Firefox 2, Opera 9, and Safari 3!!!

Comment Notifier does just that very easily. Now I can put in my clients email so they can be notified about comments on their blog!

Part A - ID Lookup & Create a New Page:
The first thing we need to do is to learn which id numbers go with which categories. Manage » Categories (in the WP Admin) will show you a list of your current categories and their ID numbers. In this example, we will take note of ‘Listings’ with the ID #3. If you navigate to this ‘wp-content/themes/default2′ directory (assuming you downloaded this theme from earlier and are using it), you will find a series of files including page.php. Open ‘page.php’ and save it as ‘category-3.php’. Where 3 is the category id number of the ‘Listings’ category in this example. We will be working on this new ‘category-3.php’ file soon, but first we need to grab a new plugin.

Part B - Install a New Plugin:
Download and install the Get Custom Field Values plugin. We will be using this plugin to display our extra data on our new ‘category-3.php’ file or rather our new Listings page.

Part C - Finding & Adding Code:
Find this line of code: <?php the_meta() ?> in your file and remove it. If you do not find this, make yourself some room right after this piece of code:

<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

by entering some new lines.

Now we can add this code:
<?php echo c2c_get_custom('Price', '<strong>Price:</strong> ', '<span>|</span>'); ?>

Repeat this process for your other custom fields.
Your final category-3.php file may look like the following:

<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php echo c2c_get_custom('Price', '<strong>Price:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Location', '<strong>Location:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Agent', '<strong>Agent:</strong> ', ''); ?><br />
<?php echo c2c_get_custom('Beds', '<strong>Beds:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Baths', '<strong>Baths:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Acres', '<strong>Acres:</strong> ', ' <span>|</span>'); ?> <?php echo c2c_get_custom('Status', '<strong>Status:</strong> ', ''); ?><br />
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Save this page and upload it to your the ‘wp-content/themes/default2′ directory. You should end up with something similar to the screen shot below if you navigate to this address…. ‘yoursite.com/category/listings/’

Tips:

• Visit this page to learn more about the Wordpress template system.
• Make sure all of your new real estate listings are assigned to your ‘Listings’ category when you create a new post.
• Make sure your new category-#.php has the same ID as your ‘Listings’ category and is uploaded to your current themes directory.
• Your new code consists of 3 parts. P1 - the name of your custom field; P2 - the contents before the value of the field; P3 - the contents after the value of the field. <?php echo c2c_get_custom('P1', 'P2', 'P3'); ?>
• Put your questions on the comment section of this post. You might have a similar problem or question that I can post the answer to!

Note: Since I last posted, Wordpess 2.2 was released. The techniques I’m showing you should work fine in Wordpress 2.1 or 2.2. With that being said, lets get started.

1. Download and install the Custom Field GUI plugin on your site. (Don’t forget to activate it)
2. Download this file, extract the conf.ini file and upload it to your wp-content/plugins/rc-custom-field-gui/ directory
3. That’s it! You should now end up with the screenshot below when you go to write a post.

It looks a lot nicer doesn’t it? Now you have form fields for price, agent, bedrooms etc. It is possible to create an an unlimited number of fields and the plugin also offers the ability to create dropdowns, radio buttons, and text area boxes. I simply made this basic one to show you what’s possible. Please comment with your suggestions so I may improve it the next time around.

Move on to Part 3 - Templates.

1. Write » Posts » and then enter a title… “Two Bedroom Ranch with a View”
2. You might also want to add a new category called “Listings” if you haven’t already.
3. In the post box, add a description about your property, upload some photos etc.
4. Enter a new key… “Price” and a value… ” $150,000″ » click Add Custom Field
5. Repeat Step 4 for each value. For example, you might want to add Agent, Status, Beds, Baths etc. Then publish your post when you’re done.

Tip: Every time you add custom field (key), it will appear in the dropdown box the next time you add a post/listing. You don’t need to type it in again!

Now all we need to do is get the information to display on your site. I have made available a modified version of the default theme in wordpress. Simply download this theme, extract the files, upload it to your wordpress themes directory and activate it. It’s called ‘Wordpress Default 2′.

Keep checking back as future articles will discuss how to make these custom fields more visually appealing both in your admin and on your live site.

Move on to Part 2 - Admin.

Install Yahoo Go on your Blackberry device, and now your mail and contacts are backed up and synced online (providing you setup your Yahoo Mail account on your device). It’s simply a great solution, I only wish I could sync my calendar with Yahoo as well.

Every site I create uses Wordpress for several reasons. Clients are able to easily update their content, friendly urls are easy to create (great for search engines) , and all of your content can be searched from within your site!

If you design many sites, or run your own personal site, I recommend using Wordpress for your needs. Your clients will love it and you’ll love it!

In the coming weeks, I plan to highlight some great plugins I use for Wordpress along with other tips and tricks.

If you have a Blackberry, be sure to visit mobile.blackberry.com. You can only access the content on your device, however it is a great resource. There are several new themes, wallpapers, ring tones, and games to download for free!

Example 1:
.boxa { text-align: right; float: left; }
.boxb { text-align: left; float: left; }
.boxc { text-align: left; float: right; }

The above example works ok, but lets say you start to add more elements to your page. If they don’t fit within the already written styles, you need to add onto your style sheet or edit your current styles.

Example 2:
.boxb, .boxc { text-align: left; }
.boxa { text-align: right; }
.boxa, .boxb { float: left; }
.boxc { float: right; }

Example 2 is somewhat better, however then you’ll run into the problem of having a bunch of .boxb classes everywhere in your style sheet.

Example 3:
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.floatleft { float: left; }
.floatright { float: right; }

I find this to be the best solution. It keeps your style sheet size down and it makes it easier to get your layout just right. For example, you have this tag:

‹div›Information and Text Go Here‹/div›

Now we can start applying styles to it very easily:

‹div class=”floatleft right”›Information and Text Go Here‹/div›

We can easily change the float from left or right, or change the text alignment. Take some other common styles like:

.bold { font-weight: bold; }
.italic { font-style: italic; }
.fonta { font-size: 1em }
.fontb {font-size: 1.25em }

Styles can be applied or changed right from within the HTML document. There’s no need to constantly go back and forth to the style sheet. You also don’t have to remember… did .boxa class have bold in it? Did .boxc class have a float right? Now you can just type bold , floatright, or center in your div tag. It’s like using the ‹center› tag, but making it XHTML compliant!

Lately I’ve been thinking about what blogs I read, which sites I visit etc. What did I figure out? Promotion of web development and design services can be said only so many ways. The same message comes out… We design websites. Need one? Contact Us Today! Well… that same message is getting old and boring. Why not make Zurnet more interactive I thought? Why not keep it fresh with new articles and information? This is exactly what I’m going to do.

I want to reference Nick Bradbury’s blog as an inspiration for The New Zurnet. I enjoy Nick’s blog for several reasons. One being that HomeSite was my first real web development product. Another is that Nick keeps his site fresh by discussing several topics across the board. Finally, clearly I just wanted to rip him off, but Matt Zur’s Blog seemed too obvious.