I was thinking to give some help regarding WordPress 3.0 theme development using custom post types and other cool new features so I will show you how to create a custom Wordperss 3.0 portfolio theme.
You will be able to add and manage portfolio items, testimonials, posts thumbnail and more to come.
Warning, design is not included
How to create a WordPress portfolio theme
To do this, you have to get your hands dirty
Alright, what do we need to accomplish this? For the beginning we will need to create the following files:
- header.php
- footer.php
- index.php
- loop-index.php
- style.css
- functions.php
- front-page.php
- page.php
- single.php
- comments.php
- sidebar.php
All these files must be placed in a theme directory.
let’s name our theme.. portfolish
Create a folder in wp-content/themes directory, name it portfolish and place there all the files listed above.
create the header.php file
<?php
/**
* The Header for our theme.
*
* @package WordPress
* @subpackage Portfolish
* @since Portfolish version 0.1
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
<?php // Returns the title based on what is being viewed
if ( is_single() ) { // single posts
single_post_title(); echo ' | '; bloginfo( 'name' );
// The home page or, if using a static front page, the blog posts page.
} elseif ( is_home() || is_front_page() ) {
bloginfo( 'name' );
if( get_bloginfo( 'description' ) )
echo ' | ' ; bloginfo( 'description' );
} elseif ( is_page() ) { // WordPress Pages
single_post_title( '' ); echo ' | '; bloginfo( 'name' );
} elseif ( is_search() ) { // Search results
printf( __( 'Search results for %s', 'portfolish' ), '"'.get_search_query().'"' ); echo ' | '; bloginfo( 'name' );
} elseif ( is_404() ) { // 404 (Not Found)
_e( 'Not Found', 'portfolish' ); echo ' | '; bloginfo( 'name' );
} else if (is_author()) { // author posts
get_the_author(); echo "Author archives "; echo ' | '; bloginfo( 'name' );
// The home page or, if using a static front page, the blog posts page.ci
} else { // Otherwise:
wp_title( ' ' ); echo ' | '; bloginfo( 'name' );
}
?>
</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
// Use our own css file for customization
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/theme.css" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<body <?php body_class(); ?>>
<a href="<?php echo site_url(); ?>" id="web-portfolio">
<?php // Returns the title based on what is being viewed
if ( is_single() ) { // single posts
single_post_title(); echo ' | '; bloginfo( 'name' );
// The home page or, if using a static front page, the blog posts page.
} elseif ( is_home() || is_front_page() ) {
bloginfo( 'name' );
if( get_bloginfo( 'description' ) )
echo ' | ' ; bloginfo( 'description' );
} elseif ( is_page() ) { // WordPress Pages
single_post_title( '' ); echo ' | '; bloginfo( 'name' );
} elseif ( is_search() ) { // Search results
printf( __( 'Search results for %s', 'portfolish' ), '"'.get_search_query().'"' ); echo ' | '; bloginfo( 'name' );
} elseif ( is_404() ) { // 404 (Not Found)
_e( 'Not Found', 'portfolish' ); echo ' | '; bloginfo( 'name' );
} else { // Otherwise:
wp_title( ' ' ); echo ' | '; bloginfo( 'name' );
}
?>
</a>
<ul id="wrapper">
<li>
<a href="<?php echo site_url(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/images/logo.png" alt="My Web Portfolio"/></a>
</li>
<li>
<?php wp_nav_menu(array('menu'=>'Main Menu','container'=>'', 'menu_class'=>'absolute')); ?>
</li>
create the footer.php file
<?php
/**
* The template for displaying the footer.
*
* @package WordPress
* @subpackage Portfolish
* @since Portfolish version 0.1
*/
?>
<li>
<ul>
<li id="copy-design"><span>Copyright © <a href="<?php echo site_url(); ?>">Portfolish</a> 2010 - <?php echo date('Y'); ?> | <a href="<?php echo esc_url( __('http://wordpress.org/', 'portfolish') ); ?>"
title="<?php esc_attr_e('Semantic Personal Publishing Platform', 'portfolish'); ?>" rel="generator">
<?php printf( __('Proudly powered by %s.', portfolish'), 'WordPress' ); ?>
</a></span>
<li>
<?php get_sidebar( 'footer' ); ?>
</li>
</ul>
</li>
</ul>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
</body>
</html>
I will show you in the next chapter how to create the loop for index and how to create custom post types.
