Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PSD to WordPress


Published on

WordCamp Columbus 2012 Presentation

PSD to WordPress

  1. 1. By Nile Flores @blondishnet
  2. 2.  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
  3. 3. Please note that we will assume that you alreadyknow how PSD, HTML, and CSS. You are familiarwith how to at least translate a PSD over to HTMLand CSS.You do not have to know HTML and CSS by heartand you can use a web page editor program, but youshould learn enough code to do what is necessaryso you do not have to lean on a program as a crutch.
  4. 4.  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:
  5. 5. Visualizing the technical structure of yourtheme is extremely important. You cannoteven begin to code without knowing whatareas of your theme belong where,especially code-wise.
  6. 6. <!-- 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>
  7. 7. <!-- 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>
  8. 8. /wp-content /themes /yourthemename /images /js file file file etc…
  9. 9. • 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
  10. 10. If you have pages and posts that need to be individuallythemed, you can definitely theme them. Just name the templatewith either of the following: page-{id}.php page-{slug}.php post-{id}.phpLabel page template with:<?php /* Template Name: Your Template Name */ ?>Label post template with:<?php /* Template Name Posts: Your Post Name or Even ID */?>
  11. 11. calls your content to a post, page or evencustom post type. Whatever you type in thebackend will populate where you put andcustomized your loop.It goes in theme files like your index.php,single.php, and page.php- just to name a few.
  12. 12. <?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 &raquo;); ?>
  13. 13. <?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>
  14. 14. <?php else : ?> <h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking forsomething that isnt here.</p> <?php get_template_part(searchform); // Navigationbar (searchform.php) ?> <?php endif; ?>
  15. 15.  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 )); ?>
  16. 16. This is normally the template that is for individualposts and differs from the index.php because itincludes the php call to the WordPress commenttemplate.<?php comments_template(); ?>
  17. 17. <?php if ( post_password_required() ) : ?> <?php /* Stop the rest of comments.php frombeing processed, * but dont kill the script entirely -- we stillhave * to fully load the template. */ return; endif; ?><!-- You can start editing here. -->
  18. 18. <?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; ?>
  19. 19. <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 ?>
  20. 20. The functions.php file acts much like a plugin to giveyour theme dynamic functionality. It is themespecific, meaning if you change to a different themeand the functions are different, then you will losethat functionality unless you put that same code inthe new theme.
  21. 21. <?php // all functions will go here?>
  22. 22.  Add Custom Menu(s)// Register menusif ( function_exists( register_nav_menus ) ) { register_nav_menus( array( primary => __( Primary Navigation ), secondary => __( Secondary Navigation ) ));}
  23. 23.  Add Sidebar// Register sidebarif ( 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>, ));
  24. 24.  Text Domain// Text domainload_theme_textdomain(‘yourthemenamehere); Content Width// Specific Content Widthif ( ! isset( $content_width ) ) $content_width = 625; Feed Support// Add default posts and comments RSS feed links to <head>. add_theme_support( automatic-feed-links );
  25. 25. You can consult the Functions Reference in theCodex for more awesome functions.
  26. 26. Your functions.php is, as I said earlier somethingtheme specific. Plugins can work across themes.It is your decision on what you want to be themespecific, but ALWAYS remember that if you changeyour theme and wonder why you are missing adynamic function… well, go back to the previousfunctions.php and get the code.Otherwise put together a plugin to retainfunctionality from theme to theme.
  27. 27. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"""><html xmlns="" <?phplanguage_attributes(); ?>><head profile=""><meta http-equiv="Content-Type" content="<?phpbloginfo(html_type); ?>; charset=<?php bloginfo(charset); ?>" />
  28. 28. <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>
  29. 29. <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(); ?>>
  30. 30. Some people include in their header.php all code upto where the content itself begins. It is up to you onhow you want to document and organize your code.Keep in mind that if you are designing for a client orthat your theme will be handled by anotherdeveloper, that you try to make your code fairly easyto decipher.The wp_head call MUST be in your header.phpbefore the ending head tag in your theme template.
  31. 31. To call the header.php file from an individualtemplate file like index.php, page.php, single.php,etc, the general php call for the header is fine-<?php get_header(); ?>
  32. 32. Of course, this is where you will beautify yourtheme. You can change the typography, the colors,and anything to your hearts wish. Just make sure todocument each area for easier developing later on.
  33. 33. Make sure your style.css starts with the followingwhether you are designing for a client or for a freetheme to give out in the WordPress ThemeRepository.
  34. 34. /*Theme Name: Your Theme NameTheme URI: Link to Example ThemeDescription: Brief Theme DescriptionVersion: 1.0Author: Your NameAuthor URI: Your LinkTags: two-columns, blue, pink, gray, threaded-comments, full-width-template, custom-menuLicense: GPLLicense URI:*/
  35. 35. In your sidebar.php, you need to put a code to callwhat 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 codingthat will not be controlled by the custom widgets in theWordPress backend.
  36. 36. To call the sidebar.php file from an individual template file likeindex.php, page.php, single.php, or even within the footer(wherever you want your widgets to be), the default sidebarwould 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 ); ?>
  37. 37. Remember when we put covered the Functions.phpof your theme? Well, this is an example of how tocall that custom menu to wherever you put it in yourtheme.<?php /* Our navigation menu. If one isnt filled out, wp_nav_menufalls back to wp_page_menu. The menu assiged to the primaryposition is the one used. If none is assigned, the menu with the lowestID is used. */ ?><?php wp_nav_menu( array( theme_location => primary ) ); ?>
  38. 38. This is used for your theme’s search when you call it toyour 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>
  39. 39. To call the search form in your searchform.php,place the follow call to your theme templatewherever you wish your search form to display-<?php get_template_part(searchform); // Navigation bar(searchform.php) ?>
  40. 40.  404.php Archives.php Image.php Author.php
  41. 41. <?php wp_footer(); ?></body></html>The footer file can contain footer widgets orwhatever you like. The wp_footer php call must bein the footer before the ending body tag in yourtheme template.
  42. 42. To call the footer.php file from an individual templatefile like index.php, page.php, single.php, etc, thegeneral php call for the footer is fine-<?php get_footer(); ?>
  43. 43.  Theme Development - Digging Into WordPress -
  44. 44. Nile FloresSite: http://blondish.netTwitter: @blondishnetFacebook: