PSD to WordPress

By Nile Flores
@blondishnet
http://blondish.net

 Explain how to take an image like a PSD and
convert it over to WordPress
 Cover whether you can use an existing
framework, code with a Web page editor
program or if it is best to code from scratch
 Reveal some tricks to making the process easier

Please note that we will assume that you already
know how PSD, HTML, and CSS. You are familiar
with how to at least translate a PSD over to HTML
and CSS.

You do not have to know HTML and CSS by heart
and you can use a web page editor program, but you
should learn enough code to do what is necessary
so you do not have to lean on a program as a crutch.

 If you have designed a theme in layers using PSD
(or the equivalent in another graphic editor
program), no layers should be merged
 Visualize how your theme will look
 Designate main areas in your theme with HTML
elements as followed:

Visualizing the technical structure of your
theme is extremely important. You cannot
even begin to code without knowing what
areas of your theme belong where,
especially code-wise.

<html>
<head>
<title>YOUR SITE NAME</title>
<link rel="stylesheet" href="LINK TO YOUR STYLE SHEET" type="text/css"
media="screen" />
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

<html>
<head>
<title>YOUR SITE NAME</title>
<link rel="stylesheet" href="LINK TO YOUR STYLE SHEET" type="text/css"
media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="header"></div>
<div id="menu"> MENU CODE HERE</div>
<div id="content">THE WORDPRESS LOOP IN HERE</div>
<div id=“sidebar"> SIDEBAR CODE HERE</div>
<div id="footer"> FOOTER CODE HERE</div>
<?php wp_footer(); ?>
</body>
</html>

/wp-content
/themes
/yourthemename
/images
/js
file
file
file
etc…

• 404.php
• archives.php Optional
• comments.php
• footer.php • author.php
• functions.php • category.php
• header.php • content.php
• images.php • content-single.php
• index.php • content-gallery.php
• page.php • tag.php
• search.php
• searchform.php
• single.php
• sidebar.php
• style.css

If you have pages and posts that need to be individually
themed, you can definitely theme them. Just name the template
with either of the following:

 page-{id}.php
 page-{slug}.php
 post-{id}.php

Label page template with:
<?php /* Template Name: Your Template Name */ ?>
Label post template with:
<?php /* Template Name Posts: Your Post Name or Even ID */
?>
http://codex.wordpress.org/Template_Hierarchy

http://codex.wordpress.org/The_Loop

This calls your content to a post, page or even
custom post type. Whatever you type in the
backend will populate where you put and
customized your loop.

It goes in theme files like your index.php,
single.php, and page.php- just to name a few.

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

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

<h2><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php if ( function_exists('the_title_attribute'))
the_title_attribute(); else the_title(); ?>"><?php the_title();
?></a></h2>

<?php the_content('Read the rest of this entry »'); ?>

<?php endwhile; ?>

<div class="navigation">
<?php if(!function_exists('wp_pagenavi')) : ?>
<div class="alignleft"><?php next_posts_link('Previous')
?></div>
<div class="alignright"><?php previous_posts_link('Next')
?></div>
<?php else : wp_pagenavi(); endif; ?>
</div>

<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for
something that isn't here.</p>
<?php get_template_part('searchform'); // Navigation
bar (searchform.php) ?>

<?php endif; ?>

 Meta info
<?php the_author() ?>
<?php the_time('m-d-Y') ?>
<?php the_category(', ') ?>
<?php the_tags(); ?>

 Link and number to post comments
<?php comments_popup_link(__('0 Comments', ‘yourthemename'),
__('1 Comment', ' yourthemename '), __('% Comments', '
yourthemename ')); ?>

This is normally the template that is for individual
posts and differs from the index.php because it
includes the php call to the WordPress comment
template.

<?php comments_template(); ?>

<?php if ( post_password_required() ) : ?>
<?php
/* Stop the rest of comments.php from
being processed,
* but don't kill the script entirely -- we still
have
* to fully load the template.
*/
return;
endif;
?>

<?php if ($comments) : ?>
<h2 id="comments">Comments <?php comments_number('(0)',
'(1)', '(%)' );?></h2>
<div class="commentlist">
<ol>
<?php wp_list_comments(); ?>
</ol>
</div>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>

<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>

<div class="navigation">
<?php paginate_comments_links(); ?>
</div>
<?php if ('open' == $post->comment_status) : ?>
<div class="respond">
<h3 id="respond_title">Write a comment</h3>
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-
login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a>
to post a comment.</p>
<?php else : ?>
<?php comment_form(); ?>
<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>

The functions.php file acts much like a plugin to give
your theme dynamic functionality. It is theme
specific, meaning if you change to a different theme
and the functions are different, then you will lose
that functionality unless you put that same code in
the new theme.

<?php
// all functions will go here
?>

 Add Custom Menu(s)
// Register menus
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus( array(
'primary' => __( 'Primary Navigation' ),
'secondary' => __( 'Secondary Navigation' )
));
}

 Add Sidebar
// Register sidebar
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'description' => 'This is the primary sidebar.',
'before_widget' => '<li id="%1$s" class="widget
%2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

 Text Domain
// Text domain
load_theme_textdomain(‘yourthemenamehere');
 Content Width
// Specific Content Width
if ( ! isset( $content_width ) )
$content_width = 625;
 Feed Support
// Add default posts and comments RSS feed links to <head>.
add_theme_support( 'automatic-feed-links' );

You can consult the Functions Reference in the
Codex for more awesome functions.
http://codex.wordpress.org/Function_Reference

Your functions.php is, as I said earlier something
theme specific. Plugins can work across themes.

It is your decision on what you want to be theme
specific, but ALWAYS remember that if you change
your theme and wonder why you are missing a
dynamic function… well, go back to the previous
functions.php and get the code.

Otherwise put together a plugin to retain
functionality from theme to theme.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php
language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php
bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'darkdream' ), max( $paged,
$page ) );
?></title>

Some people include in their header.php all code up
to where the content itself begins. It is up to you on
how you want to document and organize your code.

Keep in mind that if you are designing for a client or
that your theme will be handled by another
developer, that you try to make your code fairly easy
to decipher.

The wp_head call MUST be in your header.php
before the ending head tag in your theme template.

To call the header.php file from an individual
template file like index.php, page.php, single.php,
etc, the general php call for the header is fine-

<?php get_header(); ?>

Of course, this is where you will beautify your
theme. You can change the typography, the colors,
and anything to your hearts wish. Just make sure to
document each area for easier developing later on.

Make sure your style.css starts with the following
whether you are designing for a client or for a free
theme to give out in the WordPress Theme
Repository.

/*
Theme Name: Your Theme Name
Theme URI: Link to Example Theme
Description: Brief Theme Description
Version: 1.0
Author: Your Name
Author URI: Your Link
Tags: two-columns, blue, pink, gray, threaded-comments, full-
width-template, custom-menu

License: GPL
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

In your sidebar.php, you need to put a code to call
what you put in your widgets.
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() )
: ?>
<li>Static Content</li>
<?php endif; ?>
</ul>

The static content is if you want to add your own coding
that will not be controlled by the custom widgets in the
WordPress backend.

To call the sidebar.php file from an individual template file like
index.php, page.php, single.php, or even within the footer
(wherever you want your widgets to be), the default sidebar
would be called to the page as-

<?php get_sidebar(); ?>

Other sidebar widgets can be called like-

<?php /* A sidebar in the footer? Yep. You can can customize
* your footer with three columns of widgets.
*/
if ( ! is_404() ) get_sidebar( 'footer' ); ?>

Remember when we put covered the Functions.php
of your theme? Well, this is an example of how to
call that custom menu to wherever you put it in your
theme.

<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu
falls back to wp_page_menu. The menu assiged to the primary
position is the one used. If none is assigned, the menu with the lowest
ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

This is used for your theme’s search when you call it to
your theme’s template

<form method="get" id="searchform" action="<?php echo home_url();
?>/">
<div><input type="text" value="<?php the_search_query(); ?>"
name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

To call the search form in your searchform.php,
place the follow call to your theme template
wherever you wish your search form to display-

<?php get_template_part('searchform'); // Navigation bar
(searchform.php) ?>

 404.php
 Archives.php
 Image.php
 Author.php

<?php wp_footer(); ?>
</body>
</html>

The footer file can contain footer widgets or
whatever you like. The wp_footer php call must be
in the footer before the ending body tag in your
theme template.

To call the footer.php file from an individual template
file like index.php, page.php, single.php, etc, the
general php call for the footer is fine-

<?php get_footer(); ?>

 Theme Development -
http://codex.wordpress.org/Theme_Development
 Digging Into WordPress - http://digwp.com/
 WPRecipes.com
 WPBeginner.com
 JustinTadlock.com
 WPCandy.com
 WPHacks.com
 Blondish.net

Nile Flores
Site: http://blondish.net
Twitter: @blondishnet
Facebook: http://fb.com/NileFlores
SlideShare: http://slideshare.net/blondishnet

PSD to WordPress

More Related Content

What's hot (19)

Similar to PSD to WordPress (20)

More from Nile Flores (20)

Recently uploaded (20)

PSD to WordPress