May 13
WordCamp Toronto 2009 Recap
As requested by some attendees at the WordCamp Toronto 2009, I’ve uploaded my presentation slides: "Various Ways of Using WordPress." The slides can be downloaded at SlideShare and I’ve also embedded them in this post. If you missed the event, this post is a quick recap of my presentation. You will learn how I use WordPress to manage my sites: Web Designer Wall (blog), Best Web Gallery (gallery), and IconDock (eCommerce/blog). Get ready and learn more about WordPress theme coding.
Things You Should Know:
Example 1: Using WordPress As A Blog (WebDesignerWall)
Displaying A Post Image Using Custom Fields
The following sample code will show you how to use custom field to display a post image as seen on Web Designer Wall.
To add a custom field, go to Admin > Write a new post, scroll down to find the Custom Fields panel, enter the custom field name (Key) and the Value (the URL of the image location).
Open the theme index.php file, in between The Loop, enter the following code where you want to display the custom post image.
<?php $postimage = get_post_meta($post->ID, 'post_image', true); ?>
<?php if ($postimage != "") { ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo $postimage; ?>" /></a>
<?php } ?>Displaying a Dynamic <title> Tag
The following sample code will show you how to display a dynamic <title> tag depending on the page the visitor is viewing. For example: if it is home, display the blog name; if it is 404, display "404 Not Found"; and so on.
<title>
<?php if (is_home()) {
echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');
}?>
</title>Example 2: Using WordPress As A Gallery (BestWebGallery)
Managing Posts With Custom Fields
There are three custom fields: thumb, large image, and url.
To make life easier, I use the plugin Custom Write Panel to manage the posts. With this plugin, I can create a custom write panel where all custom fields are in one panel.
Theme Switcher
I use the Theme Switcher plugin to allow visitors to choose their layout preference: thumbnail, large preview, and details mode.
Below is the overview of the themes. The "master" theme is the thumbnail mode which is the default theme. It has most of the template files: CSS, JS, images, and PHP files, etc.
Since the header, sidebar, footer, page, 404, and single template file are the same, I use PHP include to get the files from the "master" theme.
Below is a sample code of the "full" and "details" theme index.php file.
<?php if (is_page()) {
include ('./wp-content/themes/master/page.php');
} elseif (is_404()) {
include ('./wp-content/themes/master/404.php');
} elseif (in_category(8)) {
include ('./wp-content/themes/master/category-8.php');
} elseif (is_single()) {
include ('./wp-content/themes/master/single.php');
} else {?>
<?php include ('./wp-content/themes/master/header.php'); ?>
<div>. . . display posts (The Loop here). . . </div>
<?php include ('./wp-content/themes/master/sidebar.php'); ?>
<?php include ('./wp-content/themes/master/footer.php'); ?>
<?php }?>
The style.css file in the "full" and "details" theme is used for the theme naming purpose.
/*
Theme Name: Details Mode
*/
Example 3: Using WordPress As A Shop (IconDock)
Displaying The 5 Latest Posts
The following tutorial will demonstrate on how to display the 5 latest posts as seen on the homepage of IconDock.
I use query_posts to get the 5 latest posts from the database. Notice I have a "loopcounter". If the counter is less than or equal to 1, display the full content (which is the first post). Else, display the last 4 posts in a <ul> list.
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); $loopcounter++; ?>
<?php if ($loopcounter <= 1) { ?>
<div> first post content </div>
<ul class="recent-post">
<?php } else { ?>
<li> last 4 post links </li>
<? } ?>
<?php endwhile;?>
</ul>
<?php else : ?>
<?php endif; ?>
Conditional Tags
On the IconDock blog page, notice there are two version of post data (under the blog post title)?
I use the Conditional Tags to check what category the post is stored in. If the post is stored in category 28 (which is the free icon category), display the credits and rating stars. Else, display the regular post data.
<?php if (in_category('28')) { ?>
<p>credits</p>
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
<?php } else { ?>
<p>regular post data</p>
<? } ?>Managing Free Icon Posts With Custom Fields
Again, I’m using custom fields to manage the free icon posts.
The plugin I use to manage the posts is Flutter. It is basically similar to Custom Write Panel, but for newer version of WordPress.
Getting Rid Of The Category Base
By default, WordPress requires a category base in the URL structure. To get rid of that, create a blank Page and a custom Page template to query the posts from the category. Visit the Icon Blog and Free Icons page to see the result.
Below is a sample code of a Page template. I use query_posts to get posts from category 28, which is the free icon category. I set the posts_per_page -1, this means get all posts.
<?php
/*
Template Name: Template - Free Icons
*/
?>
<?php get_header(); ?>
<?php $page_num = $paged;
if ($pagenum='') $pagenum =1;
query_posts('cat=28&posts_per_page=-1&paged='.$page_num); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div> display post here </div>
<? endwhile; endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Then create a blank Page and assign the Page template to it.
WP E-Commerce Plugin
The shopping cart at IconDock is powered by WP E-Commerce plugin. Head over to Instinct website for more details or download the plugin.
The current version I’m using now is modified by the developers at Instinct. I’ve heard they are working on a template engine which will be release soon. The template engine will work similar to the WordPress template tags. So, look out for their new releases.
More WordPress Examples
Here are five great examples of using WordPress for different purposes.
45royale Inc.
Creative Depart
Typographica
FlickOut
Jeff Finley
As promised at the conference, below is the code that Jeff Finley use to display the related posts with custom field. The plugin he used is Yet Another Related Posts Plugin. This code should go to the single.php file.
<?php $results = $wpdb->get_results(yarpp_sql(array('post'),array())); foreach ( (array) $results as $_post ) : ?>
<a href="<?php echo get_permalink($_post->ID); ?>"><img src="<?php echo get_post_meta($_post->ID, 'post_img', true); ?>" /></a>
<?php endforeach; ?>
Presentation Slides
Maximize the Use of Hover 30 Untypical WordPress Sites
Comments
There are 35 comments (+Add)
Loading ...
35 sbobet http://www.sbobet-th.com
March 4th, 2010 at 12:00 am
I pity to see it soon. Your site has articles with much of substance.
34 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:48 am
喜欢你们的设计与技术，常来看看
33 Mamaduka http://facebook.com/mamaduka
November 2nd, 2009 at 10:08 am
Hello, I really like this tutorials. I’m going to use WP for my online music magazine. If there is some tutorials about this please write link.
32 Barbara80 http://link
October 22nd, 2009 at 7:02 pm
Links to stuff we talked about:Apologies again for problems with audio quality, including, but not limited to, my cat who kept opening the creaky door. ,
31 bagsin http://handbagsurf.com
September 10th, 2009 at 8:09 pm
A pleasure read your blog.
30 Luby http://fashionow.net
September 4th, 2009 at 4:18 am
Amazing job. Thanks for sharing.
29 Derek Hildenbrand http://newviewit.com
August 8th, 2009 at 8:30 pm
Wordpress is a fantastic CMS for basic websites… but with all the new features coming up it looks like their entering a whole other level
28 cennetevi http://www.cennetevi.gen.tr
August 8th, 2009 at 6:13 am
these are awesome!
thanks for putting in the effort to get this list together http://www.cennet.gen.tr
27 Ray Acosta http://www.rayacosta.com/
August 5th, 2009 at 6:02 pm
Hi Nick! Thanks for shearing!
Let me tell you that You´re very talented! I mind it! I think that you have a beautiful taste for design and an incredible understanding of coding with Wordpress!
How you can do that? I´m a designer as well but not coder nor programmer. So, congrats again!
Ok, about this post, I tried the Custum Field technique but it didn´t work. As a Designer if a miss a semicolon, a perior, anything can create unexpedted results.
Can you (or anyone) give some light in this one:
Background:
In the example of displaying a Post Image Using Custom Fields you write the word post_image under the Key field in the Edit Post in the administrator.
But in the code, I saw a PHP variable called: $postimage.
I don´t get it. Why the variable it´s different? Wordpress has a reserved word to postimages that you´re invoking?
I don´t understand the Codex too much. It´s like ActionScript3.0 help. They use programmers jargon like:
“If you want you can import the MovieClip Class and invoke it´s methods and properties”… A-ha, then what? How can I build a custom preloader? Reading things like: “you could create customs properties”… A-ha… so?
He-he, well, I feel that I’m in the same page here. In the Codex about Custom Fields it talks about meta-data nor inserting a image in our post. So, I’m kind of lost here.
I appreciate some light about it.
Many thanks,
R
26 php coder http://www.byantivirus.com
June 23rd, 2009 at 5:34 am
very good