psd to wordpress
DESCRIPTION
WordCamp Columbus 2012 PresentationTRANSCRIPT
PSD To WordPressBy 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
Objective
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.
WAIT A MINUTE
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:
Handling the PSD
Layout Concepts to Visualize
More layout concepts to visualize
One more layout concept…
Some Live Examples
The Trick
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.
<!-- Your DOC TYPE INFO --><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>
The General Coding
<!-- Your DOC TYPE INFO --><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>
Where WordPress Is Inserted
/wp-content/themes
/yourthemename/images/jsfilefilefileetc…
WordPress Theme File Structure
Basic Yet, Necessary Templates in WordPress
• 404.php• archives.php• comments.php• footer.php• functions.php• header.php• images.php• index.php• page.php• search.php• searchform.php• single.php• sidebar.php• style.css
Optional
• author.php• category.php• content.php• content-single.php• content-gallery.php• tag.php
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
Fun With Templating
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.
The WordPress Loop
<?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 »'); ?>
The Loop – General Code
<?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>
The Loop – General Code (2)
<?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; ?>
The Loop – General Code (2)
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 ')); ?>
Other Common Loop Elements
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(); ?>
Single.php
<?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;?>
<!-- You can start editing here. -->
Comment.php
<?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) : ?><!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?><!-- If comments are closed. --><p class="nocomments">Comments are closed.</p>
<?php endif; ?><?php endif; ?>
Comment.php (2)
<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 ?>
Comment.php (3)
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.
Functions.php
<?php // all functions will go here?>
General functions.php file
Add Custom Menu(s)// Register menus
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus( array(
'primary' => __( 'Primary Navigation' ),
'secondary' => __( 'Secondary Navigation' )
));
}
Necessary Theme Functions
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>',
));
Necessary Theme Functions (2)
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' );
Necessary Theme Functions (3)
You can consult the Functions Reference in the Codex for more awesome functions.http://codex.wordpress.org/Function_Reference
More Functions info
Also, take a look
at the Twenty
Eleven Theme
for a great
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.
Functions.php vs Plugins
<!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'); ?>" />
Header.php
<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>
Header.php (2)
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Header.php (3)
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.
Header.php (4)
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(); ?>
Header.php (5)
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.
Style.css
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.
Style.css (2)
/* Theme Name: Your Theme NameTheme URI: Link to Example ThemeDescription: Brief Theme Description Version: 1.0Author: Your NameAuthor URI: Your LinkTags: two-columns, blue, pink, gray, threaded-comments, full-width-template, custom-menu
License: GPLLicense URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
Style.css (3)
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.
WordPress Sidebars/ Widgets
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' ); ?>
WordPress Sidebars/ Widgets (2)
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' ) ); ?>
Call Custom Menu to Theme
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>
Searchform.php
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) ?>
Search - continued
404.php Archives.php Image.php Author.php
Other Templates To Discuss
<?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.
Footer.php
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(); ?>
Footer.php (2)
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
Resources
Any Questions?
Nile FloresSite: http://blondish.netTwitter: @blondishnetFacebook: http://fb.com/NileFloresSlideShare: http://slideshare.net/blondishnet