WordPress Transient API

set_transient(), get_transient(), delete_transient()

This is a function set very similar to get_options() and update_options() which helps to easily store and retrieve data in your options database table. The big difference here is that you also pass a time parameter which acts as expiration date for the database entry.

Once the time has expired the data is removed. This is especially useful if you want to cache data or query results for a short amount of time. An example would be a twitter widget which retrieves data from the twitter api, but since twitter is down pretty often it would be wise to save that data for a few minutes. That also would speed up the site for subsqequent page requests since you don’t need to connect to an external API.

It works pretty easy: the function set_transient accepts 3 parameters:

set_transient($transient, $value, $expiration);

so saving a value to your database for an hour would look like this:

set_transient('the_name', $special_query_results, 60*60);

getting the value like this:

$value = get_transient('the_name');

http://codex.wordpress.org/Transients_API

WordPress “Cron Jobs”

wp_schedule_event(time(), 'hourly', 'my_schedule_hook');

Schedules a hook which will be executed by the WordPress actions core on a specific interval, specified by you. The action will trigger when someone visits your WordPress site, if the scheduled time has passed.

So if you want to execute some code on a regular base, like checking an RSS Feed, doing a database backup or reseting database values this function will do it for you. Unfortunatley its not as easy to use as transient but here is a short article on how it is done:
http://themocracy.com/2010/02/wp-cron-automating-scheduling/
http://codex.wordpress.org/Function_Reference/wp_schedule_event

WordPress HTTP API

wp_remote_get( $url, $args = array() );

An easy to use function if you want to retrieve the content of a Webpage. The function stores the result within an easily accessible array. Not only do you get the result content of the webpage, you also get header informations and response codes. This function is also capable of retrieving feed content which also makes it useful if you want to create a twitter plugin or an rss reader with wordpress.

http://codex.wordpress.org/HTTP_API
http://codex.wordpress.org/Function_API/wp_remote_get

Easily Fetch an RSS Feed with WordPress

$feed = fetch_feed( $uri );

fetch_feed is another simple wordpress method to get feed content. It also has the added benefit that it uses the SimplePie and FeedCache functionality for retrieval and parsing and automatic caching.

http://codex.wordpress.org/Function_Reference/fetch_feed

WordPress mail function

wp_mail()
wp_mail( $to, $subject, $message, $headers, $attachments );

Example:

$to = 'kriesi@gmail.com';
$subject = 'Hello Kriesi!';
$message = 'This message was sent by wordpress'

$mail = wp_mail($to, $subject, $message);

if($mail) echo 'Mail delivered';

An incredible useful and exceptional easy to use function that also allows you to send headers and attachments, allows plain text sending and html messages and quite a few other options!

http://codex.wordpress.org/Function_Reference/wp_mail

WordPress Human Time

human_time_diff( $from, $to )

A feature to mimic twitter like time display. Instead of outputting the time in a basic format you can display it like this:

Kriesi posted 13 hours ago

http://codex.wordpress.org/Function_Reference/human_time_diff

WordPress get comments

get_comments()

Sometimes its neccessary to retrieve the comments outside of the comments loop like I did with the Avia Feedback Box Plugin, where comments are displayed via ajax. This function helps you in doing so

http://codex.wordpress.org/Function_Reference/get_comments

WordPress validation of strings

wp_kses($string, $allowed_html, $allowed_protocols);

wp_kses is a very usefull function when it comes to sanitizing untrusted user input. This function makes sure that only the allowed HTML element names, attribute names and attribute values plus only sane HTML entities will occur in $string.

http://codex.wordpress.org/Function_Reference/wp_kses

WordPress text transformation

wptexturize()

A text transformation function that converts commonly used strings into the typographical correct signs. Used for dashes, ellipsis etc and will also add typograpic quotes to certain phrases.

http://codex.wordpress.org/Function_Reference/wptexturize

wpautop()

The last text transformation tool on the list is used by wordpress to ad <p> tags to a string by replacing double <br/> tags

http://codex.wordpress.org/Function_Reference/wpautop

WordPress Shortcode API

add_shortcode(), do_shortcode()

add_shortcode() is an easy way to create macros for your post content. for example lets say you want to wrap some content inside the post area within a div with some additional classes and ids that allows you to create multiple columns. you could of course just switch to the html editor and enter

<div class='one_third'>Content goes here</div>

Easier and more convenient especially if you are dealing with customers who dont know html would be a shortcode solution within your functions.php file:

function column_shortcode( $atts, $content = null ) {
   return '<div class='one_third>' . $content . '</div>';
}

add_shortcode('one_third_column', 'column_shortcode');

You could then use this shortcode in your post content:

[one_third_column]Content goes here[/one_third_column]

If you would like to nest shortcodes within each other you would need to make sure to add the do_shortcode method to your function like this:

column_shortcode( $atts, $content = null ) {
   return '<div class='one_third>' . do_shortcode($content) . '</div>';
}

http://codex.wordpress.org/Shortcode_API

Create WordPress post with a php function:

wp_insert_post()

This function inserts posts pages and custom post types in the database. It sanitizes variables, does some checks, fills in missing variables like date/time, etc. very handy when you need to create and insert posts by user input. This function fits perfectly if you have a front end form for example and users can suggest posts.

http://codex.wordpress.org/Function_Reference/wp_insert_post

Create WordPress comment with a php function:

wp_insert_comment()

Similar to wp_insert_posts this function inserts a comment. Might also come in handy

http://codex.wordpress.org/Function_Reference/wp_insert_comment

WordPress Object Cache:

wp_cache_add(),  wp_cache_set(),  wp_cache_get(),  wp_cache_delete, wp_cache_replace(), wp_cache_flush

WP_Object_Cache is WordPress’ class for caching data which may be computationally expensive to regenerate, such as the result of complex database queries. If you care for theme and plugin performance you should definitley read the wordpress codex entry for this topic!

http://codex.wordpress.org/Function_Reference/WP_Cache

Kill wordpress execution:

wp_die()

An appropriate end for this post: the wp_die function

wp_die kills the WordPress execution and display HTML message with error message.

A call to this function complements the die() PHP function. The difference is that HTML will be displayed to the user. It is recommended to use this function only when the execution should not continue any further.

http://codex.wordpress.org/Function_Reference/wp_die

Habitat for example (my latest blog theme) uses it. Just scroll down the front page and you will see those little paginated buttons.

Why should you use them?
Because they are easier to navigate and the user instantly knows how many posts and pages are available. Its simply good user experience

Using a plugin for this task may be an overkill since you really only need to add a few lines of php and css to your theme which I will show you now:

The function

If you just want to copy/paste the function into your theme feel free to do so, a more detailed description can be found bellow:

function kriesi_pagination($pages = '', $range = 2)
{  
     $showitems = ($range * 2)+1;  

     global $paged;
     if(empty($paged)) $paged = 1;

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   

     if(1 != $pages)
     {
         echo "<div class='pagination'>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
         echo "</div>\n";
     }
}

How to use  & Step by Step description

Displaying the pagination links on a default index page is rather easy. Call

kriesi_pagination();

and you are done.

As you can see we got 2 optional parameters to pass:

function kriesi_pagination($pages = '', $range = 2)

The first one is the number of pages: passing this is only necessary if you are using a custom loop, something I will explain a little bit later.

The second parameter sets the number of links to display. Range tells the script how many links before and after the current page should be displayed before it only shows the small arrows. For example with the default range of 2, if you are currently visiting the first page the script would display the 2 following pages, the next page button and the last page button:

if we would visit page number 4 the script would show page 4 as the current page, would directly link to page 2 and 3 as well to 5 and 6. All other would be hidden:

For easier arithmetic operations afterwards we also store the max number of items to display in a separate variable:

$showitems = ($range * 2)+1;

Next we need access to the global variable $paged. WordPress uses this variable to store which page we are currently viewing. If that variable is empty we set it to 1. Why do we need to know it? The page we are currently at should not be linked, it should be displayed as “active”.

global $paged;
if(empty($paged)) $paged = 1;

Now we know which page we are currently viewing, but we also need to know how many pages we got. We are still asuming that we are not using a custom loop and that the $pages variable (dont mix up with $paged) was not set when we called the script. If thats the case we can once again  make use of a global variable to get that number:

if($pages == '')
{
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages)
    {
        $pages = 1;
    }
}

Now for the “Brainfuck” ;D

As you can see,  appart from a little bit of  logic and arithmetic we only need a single wordpress specific function. Its called get_pagenum_link() and allows us to fetch the url of a wordpress page by passing the number of the page: get_pagenum_link(2) would get the link to blog overview page 2 in my afforementioned Habitat theme.

What is done now is a check based on quite a few if statements that asks which items to display, based on the variables we retrieved and set before. I usually do explain everything in detail but I think it wouldn’t make much sence in this case. if you are really interested in deciphering all of the if statements feel free to do so, you now know which value is stored within each variable so it shouldn’t take all too long

The CSS

The CSS Part of our pagination is rather simple. By default we would get an HTML output similar to this:

<div class='pagination'>
 <span class='current'>1</span>
 <a href="http://www.kriesi.at/blog/page/2">2</a>
 <a href="http://www.kriesi.at/blog/page/3">3</a>
 <a href="http://www.kriesi.at/blog/page/2">›</a>
 <a href="http://www.kriesi.at/blog/page/12">»</a>
</div>

We only need a few css rules to style this

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}

.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}

.pagination a:hover{
color:#fff;
background: #3279BB;
}

.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

Advanced: Custom Loops

You might probably want to use a so called custom loop anywhere on a page, a loop that is not stored in the default global $wp_query object we used to retrieve the number:

 $pages = $wp_query->max_num_pages;

If thats the case you need to call the kriesi_pagination() function with the first parameter set.

So lets assume you are using a simple custom loop on your site:

<?php $additional_loop = new WP_Query("cat=1,2,3&paged=$paged"); ?>

<?php while ($additional_loop->have_posts()) : $additional_loop->the_post(); ?>
 <!-- Show loop content... -->
<?php endwhile; ?>

You could then call the pagination function that way:

kriesi_pagination($additional_loop->max_num_pages);

Feel free to use this function within any personal or commercial template, any attribution is appreciated but of course not required

How to display the content of the wordpress menu description field

As you can see, instead of a simple list we got the menu item name and below that name is a small description of that menu item. This is currently a rather popular style that unfortunatley can’t be done out of the box by wordpress.

As you may already know, once you have created a menu at your wordpress backend at Appearance > Menus you can use a wordpress function called wp_nav_menu() within your template files to display those menus.

The problem is, the basic output would look something like this:

<ul id="menu-main">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

With a basic unordered list like that its almost impossible to create such a menu. So we need to change the output to get this:

<ul id="menu-main">
     <li><a href="#"><strong>Home</strong><span>Starting the journey</span></a></li>
     <li><a href="#"><strong>About</strong><span>What to expect</span></a></li>
     <li><a href="#"><strong>Contact</strong><span>Get in touch!</span></a></li>
     <li><a href="#"><strong>Blog</strong><span> Latest storys</span></a></li>
</ul>

The <strong> tags wrap arround the title whereas the description is put into the <span> tags. Those can be styled easily with CSS later on to create this special menu style.

Preparing the backend

The first thing we need to do is to setup the menu properly in our backend. WordPress already comes with the option to add a description to each menu item, but it is hidden by default.

When you are at the Appearance > Menus Site you need to look at the top right and you will notice a “Screen Option” tab. Click it and you will get the option to display several other input fields for each menu item, among them a checkbox to show the description.

Once that is done,  if you start editing your items you will notice that you can now enter a description for each menu item.

By default wordpress adds a rather long description to menu items that are created by pages, I would recommend to just delete those enourmous novels and just add a few words just like I did.

Now that we have setup the data to display in our backend, its time to prepare the frontend to show that data.

Editing the output by using a custom walker

WordPress uses a special “Walker” class that iterates over each data record and then displays this record accordingly. The cool thing about that is that we can simply create our own custom walker extending that PHP class. That way we dont need to care about fetching the stuff from the database or preparing the data arrays. We only need to extend the part of the wordpress code that outputs the list. So open your functions.php file and add the following code:

class description_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

           $class_names = $value = '';

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';

           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;

            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}

So what does this Class do? This is basically the walker that wordpress is using (I just copied the source code) and added a few lines in the lower third for a better output: The walker now checks if a description is set, and if thats the case it wraps the description into a span tag and appends it to the navigation title.

The walker also checks if we are currently iterating over a sub menu item or a top level item, since our sub menu items do not need to display a description.

The Function Call

Now that we have created a custom walker we only need to tell wordpress that it should use our walker instead of its own. This can be easily done by calling the wp_nav_menu() with the walker parameter set:

wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new description_walker())
 );

Thats it. Once that is done your menu will be output with a completly different code structure that you can easily style with CSS to fit your needs. Here is a short snippet to get you startet:

.nav{
height:50px;
padding-left:13px;
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
}

.nav a{
display:block;
float:left;
line-height:18px;
outline:medium none;
padding:2px 10px;
text-decoration:none;
width:95px;
min-height: 35px;
}

.nav li a strong {
display:block;
font-size:14px;
font-weight:normal;
}

.nav li a span {
display:block;
font-size:10px;
line-height:14px;
}

I hope you can utilize this knowledge to push the boundaries of beautiful wordpress generated menus

After searching the web for an adequate plugin, the only Breadcrumb navigation I could find was Breadcrumb NavXT. The plugin is basically the only one which supports nested pages as well as nested categories. It has a ton of options… to my mind there are way to many. After testing the plugin on a blank installation my Database query count went from 17 to 59 even if I was on the starting page where no breadcrumb navigation was displayed. So I decided to code a lightweight version for myself.

What you will learn here, are the basics of creating a simple breadcrumb navigation. This tutorial doesn’t offer a complete script, just some snippets to experiment with =)

First of all here is the whole script:

function my_breadcrumb() {
         if ( !is_front_page() ) {
		echo '<p class="breadcrumb"><span class="breadcrumb_info">You are here:</span> <a href="';
		echo get_option('home');
		echo '">';
		bloginfo('name');
		echo "</a> &raquo; ";
		}

		if ( is_category() || is_single() ) {
			$category = get_the_category();
			$ID = $category[0]->cat_ID;
			echo get_category_parents($ID, TRUE, ' &raquo; ', FALSE );
		}

		if(is_single() || is_page()) {the_title();}
		if(is_tag()){ echo "Tag: ".single_tag_title('',FALSE); }
		if(is_404()){ echo "404 - Page not Found"; }
		if(is_search()){ echo "Search"; }
		if(is_year()){ echo get_the_time('Y'); }

		echo "</p>";

          }

I am using WordPress conditional Tags to check which section/post or page we are currently viewing. As you can see at the top, I don’t want to display the breadcrumb on the starting page. If we aren’t viewing the starting page, the first level – a link to the starting page – will be displayed.

if ( is_category() || is_single() ) {
	        $category = get_the_category();
		$ID = $category[0]->cat_ID;
		echo get_category_parents($ID, TRUE, ' » ', FALSE );
		}

This is the trickiest part of the whole script since it uses some uncommon WordPress functions. It basically asks WordPress to display all parent categories of the current category/post. This way we can handle nested categories as well

If you want more information on get_the_category and get_category_parents just check the WordPress Documentation =)

if(is_single() || is_page()) {the_title();}
if(is_tag()){ echo "Tag: ".single_tag_title('',FALSE); }
if(is_404()){ echo "404 - Page not Found"; }
if(is_search()){ echo "Search"; }
if(is_year()){ echo get_the_time('Y'); }

This one is pretty straight forward: We are using conditional comments again to handle some of the various scenarios like post, pages, tag and year archives, 404 sites etc.

If you want to create a script that can handle all possible scenarios you should check the conditional tags reference to see which cases need attention.

These short snippets should invite you to experiment a little bit since they can build the foundation to a complete lightweight breadcrumb script. It is far from complete now (nested pages don’t work, nested categories need a few tweaks, attachment handling is missing etc) but I guess its enough to start with
I am currently scripting a complete Breadcumb Navigation for my own and I am pretty satisfied with the outcome. It only needs some more minor tweaks to be ready for the public, but I dont’t know if I can spare some time in the upcoming future so I wanted to share these basics now, just in case you need them =)

What you can expect when my script is complete: a very lightweight breadcrumb script with little to no options but the possibilty to tweak it easily with little php knowledge, and the power to display a breadcrumb navigation without stressing your database (The NavXT-plugin uses about 40 queries, mine will use about 0-4)

Thanks to Frank Bültge for the inspiration

While CSS 3 is capable of doing this on its own with the new Grid Position Module, a lot of browsers do not support this functions yet, so I needed to add a little extra markup to the output which is generated via the_content() to get the following result:

To get this result we need to filter the_content() before output with a custom function and add 2 divs to the output, which we style with CSS later on. So Ladys and Gentleman please open the functions.php file of your current WordPress Theme.

What functions.php does is let you create functions you can reuse in your theme. It works similar to a plugin file, being loaded when the theme is first loaded.

First of all: here you can see the whole code we need to filter our content, step by step description follows:

function my_multi_col($content){
$columns = explode('<h2>', $content);

$i = 0;

	foreach ($columns as $column){
	if (($i % 2) == 0){
		$return .= '<div class="content_left">' . "\n";
		if ($i > 1){
		$return .= "<h2>";
	} else{
		$return .= '<div class="content_right">' . "\n <h2>";
	}
		$return .= $column;
		$return .= '</p></div>';
		$i++;
	}

	if(isset($columns[1])){
	    $content = wpautop($return);
	}else{
	    $content = wpautop($content);
	}
	echo $content;
}
add_filter('the_content', 'my_multi_col');

What we do first is define a delimiter and split the whole content at specific points. I wanted to create a new column whenever a h2 tag was found.

$columns = explode('<h2>', $content);

The result is stored in an array which we will use to create a new $content string. To access each array item we will use a foreach loop:

        $i = 0;

	foreach ($columns as $column){
        $i++;
	}

You should have noticed the variable $i by now, we will use it to check if the current content part should be stored in a left column or right column div. To accomplish this we simply use the modulo operation ( $i % 2).

The modulo operator divides the first integer by the second and returns the remainder. Since we divide by 2 there are only 2 possible values to return: 0 and 1. If zero is returned we need a left content div, if 1 is returned a right content div:

        $i = 0;
	foreach ($columns as $column){
            if (($i % 2) == 0){
                $return .= '<div class="content_left">' . "\n";
            }else{
                $return .= '<div class="content_right">' . "\n";
            }
        $i++;
	}

Since the explode function we used earlier strips away our <h2> opening tags we need to add them to the code again, but we must be careful were to add them: We always need an opening tag in the right column and always need an opening tag in the left column except for the first time!

$i = 0;

	foreach ($columns as $column){
	if (($i % 2) == 0){
		$return .= '<div class="content_left">' . "\n";
		if ($i > 1){
		$return .= "<h2>";
	} else{
		$return .= '<div class="content_right">' . "\n <h2>";
	}

	}

After adding the opening tags we simply put in the exploded $content parts and close the current <p> (automatically generated by WordPress) and <div> tag. After creating our new content string which is currently stored as a whole in $return we pass it to the wpautop which automatically adds formating to the string, store it in $content and then output it with echo, but ONLY if there was an h2 tag found. Otherwise we don’t need a second column and display the_content() without modifications.

$i = 0;

	foreach ($columns as $column){
	if (($i % 2) == 0){
		$return .= '<div class="content_left">' . "\n";
		if ($i > 1){
		$return .= "<h2>";
	} else{
		$return .= '<div class="content_right">' . "\n <h2>";
	}
		$return .= $column;
		$return .= '</p></div>';
		$i++;
	}

        if(isset($columns[1])){
	    $content = wpautop($return);
	}else{
	    $content = wpautop($content);
	}	echo $content;
}

Last but not least we have to tell WordPress when to activate our function. This is simply done with “add_filter”

add_filter('the_content', 'my_multi_col');

Now whenever $content contains any h2 items they will be put in different divs . Just add some basic CSS and you are done:

.content_right, .content_left{
float:left;
width:45%;
}

.content_left{
padding-right:5%;
}

The function we created is far from perfect, but the main goal of this tutorial is to show you how you can modify the output of the WordPress generated content in an easy way. Have fun doing so

These fields are really flexible in use and make it possible for developers and theme-authors to create stunning sites, far beyond from normal blog design.

In case you have never noticed it: to access these fields just head over to the write post/page site down to the Advanced Options Tabs. There you will find  the Custom Fields Tab which looks something like this:

Custom fields consist of two parts: A key and a value.

There are different options to display those fields, the one thing they all got in common: you have to call them inside the loop.

<?php the_meta(); ?>

This is the easiest way to display the data. The template tag automatically puts the entire meta-data into a CSS style called post-meta. The key is in a span called post-meta-key.

All of this is showcased in an unordered list:

<ul class='post-meta'>
<li><span class='post-meta-key'>mood:</span> happy</li>
<li><span class='post-meta-key'>Weather:</span> fine</li>
</ul>

You might want to use these custom informations in a more sophisticated way then displaying unordered lists with your mood and the current weather. Especially if you want to display a post in a way that doesn’t remind the visitor of a typical blog post, custom fields come in very handy.

Just take a look at my porfolio page, or if you want to see a whole site based around custom fields, head over to BestWebGallery. Each post is stuffed with a lot of meta data which is used to display the posts in an unique way.

To display the data in a superior way we use the function

 get_post_meta($post_id, $key, $single);

The parameters we need to pass are explained fast:

• $post_id is the ID of the post which stores the meta data. Most of the time it is the current post and we use: $post->ID
• $key is a string containing the name of the meta value you want.
• $single can either be true or false. If set to true then the function will return a single result, as a string. If false, or not set, then the function returns an array of the custom fields.This is needed if you have different $keys with the same name. We will set this to true for our example.

So lets say we have a custom field named “image” which contains the URI to the image:

we could easily display this image the following way:

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

<img src="<?php echo $image; ?>" alt="" />

There are many ways to use custom fields, another one would be to add  a different class to some of your posts:

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

<div class="my_post <?php echo $additional_class;?> ">
the_content();
</div>
?>

The possibilitys are nearly endless, so let your creative juices flow and enhance your site with custom fields

The one thing I really missed was an explanation on how to separate comments from trackbacks. Discussing on a blog with tons of trackback posts between the ongoing discussion is really annoying.

So here is my little addition to the NETTUTS tuorial:

How to separate comments from trackbacks in WordPress

First thing we need is a working peace of basic comment code, I’ll take the one from NETTUTS: (if you need any explanation on this piece of code, just read the aforementioned article)

<?php if($comments) : ?>
<ol>
    <?php foreach($comments as $comment) : ?>
        <li id="comment-<?php comment_ID(); ?>">
            <?php if ($comment->comment_approved == "0") : ?>
            <p>Your comment is awaiting approval</p>
        <?php endif; ?>
        <?php comment_text(); ?>
            <cite><?php comment_type(); ?> by <?php comment_author_link(); ?> on <?php comment_date(); ?> at <?php comment_time(); ?></cite>
        </li>
    <?php endforeach; ?>
</ol>
<?php else : ?>
    <p>No comments yet</p>
<?php endif; ?>

Now we will use the function get_comment_type(); to check which kind of comment this is. The function returns one of three possible values: pingback, trackback or a comment.
Our first target is to display only the comments. This is easily accomplished with an additional if statement:

<?php if($comments) : ?>
<ol>
    <?php foreach($comments as $comment) : ?>
       <?php if(get_comment_type() == "comment") : ?>
            <li id="comment-<?php comment_ID(); ?>">
                <?php if ($comment->comment_approved == "0") : ?>
                <p>Your comment is awaiting approval</p>
            <?php endif; ?>
            <?php comment_text(); ?>
                <cite><?php comment_type(); ?> by <?php comment_author_link(); ?> on <?php comment_date(); ?> at <?php comment_time(); ?></cite>
            </li>
        <?php endif; ?>
    <?php endforeach; ?>
</ol>
<?php else : ?>
    <p>No comments yet</p>
<?php endif; ?>

If you don’t want to display trackbacks you are done now. In case you want to show them, you have to call the comment loop a second time, this time only displaying the comment, if get_comment_type() returns pingback or trackback.

<?php if($comments) : ?>
<ol>
    <?php foreach($comments as $comment) : ?>
        <?php if((get_comment_type() == "pingback") || (get_comment_type() == "trackback")) : ?>
            <li id="comment-<?php comment_ID(); ?>">
                <?php comment_author_link() ?></li>
            </li>
        <?php endif; ?>
    <?php endforeach; ?>
</ol>
<?php endif; ?>

Thats it, not that hard to master and a big improvement in readability for your ongoing discussions.

The final result would look something like this on a WordPress default installation:

So what we want to display is:

1. An input field for user name
2. An input field for password
3. A checkbox for remembering the user
4. A hidden field which tells WordPress where to redirect the User after login took place
5. A Submit Button
6. 2 Links: One for password recovery, one for new registration

Since we want to make the form work in every template we will make use of the function get_option(‘home’) which gets the the full path to your WordPress installation.

<h3>Login</h3>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">

    <p><label for="log">User</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> </p>

    <p><label for="pwd">Password</label><input type="password" name="pwd" id="pwd" size="20" /></p>

    <p><input type="submit" name="submit" value="Send" class="button" /></p>

    <p>
       <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
       <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
    </p>
</form>
&s
<a href="<?php echo get_option('home'); ?>/wp-register.php">Register</a>
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>

Into the hidden field, we put the URL of the page the user used to log in, so he is redirected to this page again after authentication.

Since we only want to show this code if the user is not already logged in, we use the function current_user_can() , with a parameter of level_0. (in case you dont understand what that means check my last tutorial about current_user_can)

<?php if (!(current_user_can('level_0'))){ ?>
    <h3>Login</h3>
    <form code from above etc>
<?php } else { /*next to come*/}?>

The next thing to do is writing the code for logged in users. For this purpose I just take a slightly modified version of last weeks tutorial (mentioned above) and put it in the else condition. Here is how the whole thing looks like, just in case you only want to copy/paste it

<?php if (!(current_user_can('level_0'))){ ?>
<h3>Login</h3>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">

    <p><label for="log">User</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> </p>

    <p><label for="pwd">Password</label><input type="password" name="pwd" id="pwd" size="20" /></p>

    <p><input type="submit" name="submit" value="Send" class="button" /></p>

    <p>
       <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
       <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
    </p>
</form>

<a href="<?php echo get_option('home'); ?>/wp-register.php">Register</a>
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
<?php } else { ?>
        <ul class="admin_box">
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write new Post</a></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Write new Page</a></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log out</a></li>
        </ul>

<?php }?>

Voila, your front page login is ready to use

Update for wordpess 2.7

If your are using wordpress 2.7 you have to exchange the old logout link with the new version:

<a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>logout</a>

Here are 2 screenshots of the right top of my header graphic. The first one is what everybody else sees.
And this is what I see as long as I am logged in:
This is easily done with the WordPress function current_user_can()

As a parameter for the function you just have to add the expected user level and wrap the whole function call in an if statement.

<?php
        if (current_user_can('level_10')){
        /*do something*/
        }
?>

The /*do something*/ code would now only be added/executed if the user has a status of level 10, thus is an administrator. To get more information on User Levels check the WordPress Documentation.
Here is a short list of the user capabilities, just in case you don’t really care and only want to add a menue for a specific user group:

• Subscriber : level_0
• Contributor: level_1
• Author: level_2
• Editor: level_3 – level_7
• Administrator: level_8 – level_10

Last but not least a short example of how an admin menu could look like:

<?php
    if (current_user_can('level_10')){ ?>
        <ul class="admin_box">
            <?php wp_register(); ?>
            <li><?php wp_loginout(); ?></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write new Post</a></li>
            <li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Write new Page</a></li>
            <li>do something</li>
            <li>do something</li>
        </ul>
<?php }?>

Have fun creating your own user related menus

This is easily accomplished by using the query_posts() function of WordPress which i won’t discuss in detail since the documentations are pretty comprehensive.

The problem I recently encountered is that the WordPress generated rss feed must be modified as well, otherwise it will display every post in each category. A user subscribing to my blog feed doesn’t want to be bothered with portfolio entrys, so I searched for a way to exclude categories from the main feed. There are basically two solutions I could find:

1. Exclude the Categories via URL
2. Exclude the Categories through using a small function

Both ways are really simple:

If you want to exclude a category you first have to know the ID of course. In WordPress versions prior to 2.5 you could just get it in your admin panels “manage” -> “categories” section. Post 2.5 versions do not display the category ID anymore but you can get it by hovering over the category name and extracting it from the link URL. Its the cat_ID attribute.

Say you want to exclude category 20 you just append ?cat=-20 to your feed url.

Example:

• normal feed: http://www.kriesi.at/feed
• modified feed: http://www.kriesi.at/feed?cat=-20
• want to exclude more categories: http://www.kriesi.at/feed?cat=-20&cat=-21&cat=-22

Well these URLs are not what i would consider beautiful so you might use a service like feedburner to create a nice looking feed out of it. But beware, feedburner expects a slightly different syntax; insted of using ampersands you have to use commas:

So if you want to exclude a WordPress category from the Feedburner feed do it this way:

http://www.kriesi.at/feed?cat=-20,-21,-22

If you dont’t like this way of excluding you can use a small function instead. Just add the following code anywhere to your templates functions.php:

function my_cat_exclude($query) {
    if ($query->is_feed) {
        $query->set('cat','-20,-21,-22');
    }
    return $query;
}

add_filter('pre_get_posts','my_cat_exclude');

This function will strip the categories you define out of your RSS Feed without the need of adjusting your url.
A clean and simple way but not as flexible as using URLs if you want to provide more than one feed.

Hope this helps you if you ever need to modify your feed.