1. Page Templates

Page templates are great because they allow you to make a special type of page that fits your needs, and it’s really simple! All you need to do is place the following code at the top of your document:

<?php
/* Template Name: Your Template Name here */
?>

Everything else on the page behaves just like any other wordpress page. Once you’ve added the template code at the top of the page, save the page as a .php document and add it to your theme directory. Now, when you make a new WordPress page, you can select your template form the template drop-down menu. This is especially helpful if you need to create multiple pages that exhibit a special behavior. Here’s a very simple example:

Let’s say that I want to create a certain template that will display a specific graphic at the top of any page using the template. First I’ll put the template code at the top of my file:

<?php
/* Template Name: Portfolio */
?>

Often it’s good to start with some code to build off of when making your page template. I’m going to paste the code from the page.php file from the default template that comes with WordPress 3.0 (the template is called “TwentyTen”). Here’s the code as it is in the default wordpress theme with my added template code at the top:

<?php

/* Template Name: Portfolio */ 

?>

<?php 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(); ?>>
 <?php if ( is_front_page() ) { ?>
 <h2><?php the_title(); ?></h2>
 <?php } else { ?>    
 <h1><?php the_title(); ?></h1>
 <?php } ?>                

 <div>
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
 </div><!-- .entry-content -->
 </div><!-- #post-## -->

 <?php comments_template( '', true ); ?>

<?php endwhile; ?>

 </div><!-- #content -->
 </div><!-- #container -->

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

This is great as starting code, but I want to add my title image. So I’ll add my <img> tag into the code and place it right after the opening “content” div like so:

<?php
/* Template Name: Portfolio */
?>

get_header(); ?>

 <div id="container">
 <div id="content" role="main">

 <img src="images/title_graphic.jpg" alt="Title Graphic" />

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Now all I need to do is select the Portfolio template from the Page Template drop-down menu:

Any page that has the Portfolio page template selected will show the image I included in the template code. The best thing about this technique is that its implementation is simple, but the level of complexity you can achieve is surprising. You can make pages that extend the functionality of WordPress, but that are very simple to edit for clients!

2. Showing posts from a particular category

Sometimes you want to be able to create a series of individual posts that all fall within the same category and show those posts all on one page. For example, you may have a list of employees for a company that you want to display on a page called “Our Team”. This is possible with the WordPress function query_posts().

Like many great WordPress features, this is a very simple function to use. I’m going to show you how to take the page.php file from the default WordPress theme (twentyten) and alter it to show only posts from a specific category. First Let’s take a look at our page.php code:

<?php 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(); ?>>
 <?php if ( is_front_page() ) { ?>
 <h2><?php the_title(); ?></h2>
 <?php } else { ?>    
 <h1><?php the_title(); ?></h1>
 <?php } ?>                

 <div>
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
 </div><!-- .entry-content -->
 </div><!-- #post-## -->

 <?php comments_template( '', true ); ?>

<?php endwhile; ?>

 </div><!-- #content -->
 </div><!-- #container -->

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

This is the code that controls the content we’re seeing. First, the checks to see if there are in fact any posts. Since this is the page.php code, the code will find the content for the page we’ve created. For example, if you create a page called “Our Team” and write the word “content” in it, this code will find the “Our Team” page and show the word “content”. The code that says “the_title()” and “the_content()” simply pulls the title of the post (or the page in this case) and the content from the post (or page).

We want to change what is displayed, however, by adding the “query_posts()” function before the code that looks for posts. Just as an example, I’m going to create a page that displays all of the posts from the category “Team Members”. Here’s the code:

<?php query_posts('category_name=Team Members'); ?>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <?php if ( is_front_page() ) { ?>
 <h2><?php the_title(); ?></h2>
 <?php } else { ?>    
 <h1><?php the_title(); ?></h1>
 <?php } ?>                

 <div>
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
 </div><!-- .entry-content -->
 </div><!-- #post-## -->

Now that we’ve added this code, the behavior of the page will change. Instead of using our “Our Team” page as the source of the page content, the page will now look to the category called “Team Members” and if that category has posts, its content will be displayed here. For every post in the “Team Members” category, another post will be displayed on the page. This can be extremely useful when you already have an existing posts page and you want another page that displays posts. On my website, for example, I have both a Blog page and a Work page, both of which display posts. Using this technique, I was able to show one set of posts on one page, and another set of posts on another page.

3. The is_page() Function

If you only need to add a small piece of additional content onto your default page.php file, there is a quicker and easier way than using Page Templates. By using the is_page() function and other related functions, you can easily insert small bits of code that will show up only on a specific page. Let’s go back to the earlier example, the one in which I wanted to show a title graphic on only certain pages. This time, we’ll accomplish this using the is_page() function.

Let’s go back to our page.php file from the default TwentyTen WordPress Theme. Let’s say this time, we only want to add a header image for the Portfolio page.

<?php get_header(); ?>

 <div id="container">
 <div id="content" role="main">

<?php if(is_page('Portfolio')) { ?>
 <img src="images/page_header.jpg" alt="Page Header Image" />
<?php } ?>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <?php if ( is_front_page() ) { ?>
 <h2><?php the_title(); ?></h2>
 <?php } else { ?>    
 <h1><?php the_title(); ?></h1>
 <?php } ?>

Now, when a user visits the Portfolio page, the code will execute the code and show the image at the top of the page. If you want to show the image on several pages, this is also possible. Let’s alter the code so that if we’re on the About page or the Portfolio page, we’ll see the image:

<?php if(is_page(array('Portfolio', 'About'))) { ?>
 <img src="images/page_header.jpg" alt="Page Header Image" />
<?php } ?>

By using an array with several values, we can target multiple pages at once. Similarly useful are the is_home() and is_category() functions. In fact, many of the functions that begin with “is_” are quite useful and I highly recommend you look into them!

4. Clean Permalinks

I got this information from this wordpress site: Using Permalinks

It can be unsightly and frankly somewhat confusing to find that all of your WordPress pages are named after their id number and not their page/post name! There’s a quick fix for this! If you go to your WordPress dashboard and click on Settings>Permalinks, you can create a custom permalinks structure. I like to use the one mentioned on the Using Permalinks page I referenced above. In the Settings>Permalinks menu, click on “Custom” and enter the following into the textbox:

/%category%/%postname%/

Now all of your pages will have URL’s named after their page names, and post URL’s will be named after the category they’re in and the name of the post. A post in called “Post 1″ in the category “Posts” will have the URL: http://www.yourdomain.com/posts/post-1

Now isn’t that cleaner!? Looks muuuuch nicer now!

5. Using Custom Fields

Using custom fields can help add extra optional information to your WordPress pages! You can find the Custom Fields input under the content-entry box when creating a page:

If you click “Enter new” you can name a new custom value. For this example, let’s name the field “Mood:” and in the value area, we’ll type “Productive”.

Click “Add Custom Field” to finalize your field and add it to the page. Next we need to find a way to display the Custom Field data. We’re going to use the get_post_meta() function to accomplish this.

With the get_post_meta() function, we need to pass 3 parameters to the function. The first is the id of the post that contains the Custom Field. In this case, we just want the Custom Value from the current page. To get the ID of the current page, you can use $post->ID. Next, we need to specify the name of the Custom Field we want to pull data from. In this case, the Custom Field is called “Mood”. Finally, we can specify whether or not we want one value, or multiple. If we, for example, created two fields on our page called “Mood” with two different values, we could enter “false” as the final function parameter (or leave it blank) to return an array with both of the “Mood” values. However, we only want to show one mood at a time, so we’ll enter “true” for the last of the function parameters, specifying that we only want the first Custom Value, not multiple values.

<?php $mood_value = get_post_meta($post->ID, 'Mood', 'true'); ?>
<?php echo $mood_value; ?>

The above code will output the value of the “Mood” Custom Field. However, we want to make sure that if a Mood isn’t set, then no content will be shown. And if a Mood is set, then we want to display it in a stylish manner. So, let’s add a bit to the code:

<?php if(get_post_meta($post->ID, 'Mood', true)) { ?>

 <?php $mood_value = get_post_meta($post->ID, 'Mood', true); ?>

 <strong id="mood">Mood:</strong> <?php echo $mood_value; ?>

 <?php } ?>

Now, the code first checks to see if the “Mood” field has been filled out. If not, nothing is shown. If the “Mood” field does contain content, then the page will show “Mood: ” followed by the value we entered in the “Mood” field. We’ll see something like this:

Mood: Productive

Using Custom Fields can allow you to easily add optional content to any post you want. It’s a simple way to add extra functionality to your WordPress pages.

Well, I hope this tutorial has shed light on some of the powerful tools available to WordPress users! Feel free to e-mail me with questions or comments on the Contact Page! Until next time…

1. Find and Replace with Regular Expressions

This is by far one of the most powerful tools in TextMate. Regular Expressions allow you to edit very specific selections in your document. Regular Expressions will allow you to find any e-mail address, phone-number, or other specific type of text in your TextMate Document, giving you unprecedented control over your code. You can find some TextMate RegEx reference material here.

Here’s an example of a way to use TextMate’s Regular Expression feature. If you get confused, you can refer to the TextMate documentation (http://manual.macromates.com/en/regular_expressions) which explains all of the Regular Expressions used in TextMate.

So let’s say I want to find any group of letters followed by a colon (for example any css property). First, I want to specify that the string I’m looking for starts with 1 or more letters (but no numbers). Looking at the TextMate RegEx reference, I see that \w denotes a word character (aka letters but not numbers) so we’ll start with that. Next, we know that there needs to be a minimum of one letter before the colon, but there is no maximum amount of letters. Looking at the reference, we can see that the plus sign denotes 1 or more occurrences of a character. So, so far we’ve got the following:

\w+

Next, we know that after the series of letters, we are looking for a colon. In order to denote a colon character, we simply surround the colon in square brackets. In TextMate’s regular expressions, square brackets denote a character class. In this case, we only want the colon character, so we surround just the colon in square brackets. The final result is as follows:

\w+[:]

Go ahead and try it out! Write some text in your document, and include some words followed by a colon. Press Command + F to open the find and replace window. Make sure you have the “Regular Expressions” box checked:

If you’ve entered the above code with Regular Expressions enabled, pressing the “Find Next” button should highlight the next instance of a word followed by a colon in your document. While this is a very simple example, it gives you an idea of the power of TextMate to cut down your work time!

2. Projects

In TextMate, you can create projects that will keep all of the files for a particular website or program organized. All you need to do to create a project is go to File>New Project File.

Next, click on the gear icon on the Project Drawer and select “Add Existing Files”.

You can now select any files or folders you want included in your project. The files can be organized into folders, and any time you open your project, all of the files will be there, ready to edit. Once you’ve added the necessary files and folders, click File>Save Project As to make sure your project is ready anytime you need to get to work. You’ll be surprised how much this improves your workflow!

3. Editing Multiple Lines

There are several ways to do this, and they are all incredibly useful! First let’s cover editing the same column on multiple lines. What do I mean by this? Look at the following block of text:

First, I’m going click right before the first letter of the first line, so the cursor sits just before the letter “A” on the first line. Next I’m going to Shift + Click right before the first letter of the last line. This will select all of the text between the first letter of the first line and the first letter of the last line like so:

Finally, I’ll press the ALT (option) key to place the cursor at the beginning of all three lines. It may be a little faint, but in the next screenshot, you should be able to see the cursor spanning all three rows of text:

Now when I type “<li>” to make these into list items, I only need to type it once and it will appear on all three lines! AWESOME!

Alright, so we managed to quickly and efficiently add the <li> tag to the beginning of each line. Next, we’re going to add the closing </li> at the end of each line at the same time. First, I’ll select the end of the first line. Then, just as we did earlier, I’m going to Shift + Click the end of the last line, selecting the text between the end of the first and last rows of text. Once this is selected, I’ll go to Text>Edit Each Line in Selection:

Now, when I type, whatever I type will appear at the end of each line:

If that’s not a time saver, I don’t know what is! Use this to shave off valuable minutes from your coding. It may be a small amount of time, but use these tools on every project and you’ll ultimately save yourself from hours and hours of wasted productivity!

4. Bundles

With Bundles, you have access to code snippets for many of the most popular programming languages! And what’s better, you can write your own scripts to perform tasks for you! Jonathan Kemp over at www.kempwire.com wrote this article on how to make a Bundle that will delete blank lines in your document! It’s a useful tool if you end up with extraneous formatting when pasting text from another document into TextMate. Jonathan shows you step-by-step how to create the bundle, so I won’t go into detail. This technique serves as a good illustration of the power of even the most basic Bundles in TextMate!

5. Color Coding

Alright, so this may not seem as useful as some of the other features, but you’ll be surprised how much a clear color-coding system helps when coding! Having a sensible color scheme helps you spot mistakes easily and allows you to find important pieces of code in a flash.

For example, any misspelling of CSS properties will result in an oddly colored line of code. Having the right color scheme will allow you to see syntax errors as you make them, leaving less busy work later to correct mistakes. As you can see in the screenshot below, syntax and spelling mistakes become glaringly obvious with a color scheme in place:

Experiment with different schemes until you find the right one. It’s crucial to be able to recognize what colors mean. This will help you avoid a myriad of mistakes and ultimately saves your eyes the effort of looking for a specific line of code buried within a large block of text!

Well that’s all for this article! Please contact me if you have any feedback about this (or other) blog posts! I’m interested to hear what’s working and what’s not! Thanks for reading and I hope these tips save someone many hours of valuable coding time!

I worked with Sean Herman to implement an online shop that allows users to choose their own price! The site was created using WordPress to make it easy to maintain and operate the online store.

The unique “Choose Your Own Price” online store allows users to enter their own price for surplus and defect items. Users can pay however much they think an item is worth, allowing savings for the customer, and a way to get rid of overstock items for Malcolm Fontier! The store was created using the WordPress Shopp plugin.

Karvt is the brainchild of Sean Herman and Kurt Barbee. Karvt’s incredibly popular Macbook, iPhone, and iPad skins have been selling like hotcakes and making everyone’s Mac products look even better! We helped Sean with the development side of things, working with the WordPress Shopp plugin to create a full-featured online shop!

The Karvt online shop allows on-site payment with any major credit card! The shop features an AJAX cart, and the option of inputting credit card info directly, or through Paypal’s website. The store tracks sales and offers shipping estimates based on Zip Code!

Using Sean Herman’s design, we helped build the site and its online shop. The site was created with wordpress, to allow for easy updating of menu items!

The Better Than Mamma’s shop uses the WordPress Shopp plugin to create an online meal-ordering system. Users can order a full months worth of home-cooked meals that are delivered to the door of the customer!

body { background: url('images/bg.jpg')top left #fff no-repeat; }

If you try this code in Safari or Firefox, it will work perfectly. You will see the background image positioned at the top left with no-repeat and with a white background. However, IE6 will render no background! Strange, no? Quite strange. The problem is the lack of a whitespace character between the background url and the position declarations. I became so used to Firefox and Safari’s lax handling of this code that it took me forever to figure out that one little space was causing all of my problems! The following code fixes the problem:

body { background: url('images/bg.jpg') top left #fff no-repeat; }

Hopefully this post will save someone some frustration!

Assisting Sean Herman, I helped create a simple, clean, and informative site for interior design company A Life Well Designed. The site was created in WordPress and features a dynamic image gallery.

Sean Herman designed this site, and we assisted on development. River’s Promise helps orphans in need of beds, food, and other amenities that many of us take for granted. The site is built with WordPress and serves as an informational page and news site for the organization.