Integration of a Custom WordPress Web Design

Page Contents

WordPress Themes and Required Pages
Theme Resources
Theme Tools
Images and External Files
Header File
Sidebar File
Footer File
Style Sheets – CSS Files
Other Common Files
Body Content

WordPress Themes and Required Pages

There are multiple ways to create a WordPress website. The most common is to choose a free or purchased theme (website design) created and configured by someone else. Another option is to design your own WordPress theme then integrate this custom website design into WordPress. Although the latter requires more time and cost, it is the option selected by companies or people that insist their website design be unique and branded. To many this is the only option, and it is the path we traverse in this tutorial – integration of a custom WordPress theme.

Note that this is only a short summary of the process to integrate a custom WordPress theme. It is not intended as a theme building course. It is included in this tutorial purely so you can add a custom website design into your WordPress installation. If you are creating your own themes then I highly encourage you to follow the links below for a full description of the details needed to create robust WordPress themes.

To integrate your custom design into WordPress you first need the sliced files that include all HTM, images, CSS, flash, javascript, etc. The process described in this document shows you how to integrate them into WordPress. The last link below provides a service that takes your Photoshop (.psd) files and places them into a WordPress theme for you. Note that we haven’t used this service so we can’t vouch for it’s quality.

Required WordPress Pages

WordPress themes require several files to function properly within the WordPress CMS environment. This is a minimal list of the pages required in a WordPress theme. The minimum files required for a WordPress Theme to be recognized are index.php and style.css. More details below.

Entire WordPress Theme

style.css – placed into the root folder of your theme this file contains all CSS. You can add others but this is the default css file.
header.php – contains all info in the tags and more if you choose to add more.
footer.php – contains the code at the bottom of your pages.
sidebar.php – this file contains your widgets and any other content you want on a page.
search.php – only needed if you have a search capability on the site.

Static WordPress Pages

page.php – this is the page that is used as the default template for static pages.
template files – optional – When you create a new page you can select a template for that page. We usually create multiple templates for the home page, interior pages, landing pages, shopping cart page and a blog page. At the top of each of these pages you must have the following code so it will be recognized as a template that you can select:
<?php
*
Template Name: InteriorPage
*/
?>


WordPress Blog Pages

index.php – this is the default page used for blog posts.
category.php – lists posts by category
tag.php – lists posts by tag
archive.php – lists all older posts
functions.php – where you can customize WordPress functions and widget appearances

Theme Resources

We have found these sites very informational regarding WordPress theme creation:
http://wpbits.wordpress.com/2007/08/17/making-wordpress-themes-i-static-basics/
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/
http://www.quickonlinetips.com/archives/2007/11/how-to-widget-enable-wordpress-themes-in-3-easy-steps/
http://codex.wordpress.org/Theme_Development
http://automattic.com/code/widgets/themes/

Theme Tools

These tools will help you in your theme creation efforts:
http://www.psdtowordpress.com/

This tool allows you to test your themes before taking them live:
http://wordpress.org/extend/plugins/theme-preview/

Images and External Files

In order for WordPress to find your files you need to preface the src attribute of all image tags (and external files like .swf files, .js files, etc.) with a WordPress function that determines the correct path to the images.

This is the code that you need to add to all images and external files:
<?php bloginfo('stylesheet_directory') ?>

Here is an example of its use:
<img src="<?php bloginfo('stylesheet_directory') ?>/images/great-photo.jpg" alt="Your Keywords Great Photo" width="400" height="266" />

Header File

The header of your pages must contain the code that will allow WordPress to populate the important sections of the header at runtime.

Here is typical header code for a page that is XHTML 1.0 Strict. Note that it includes all of the code at the top of the page through the </head> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php wp_title(''); ?></title>
<?php wp_head(); ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?php bloginfo('stylesheet_url') ?>" rel="stylesheet" type="text/css" />
</head>


Sidebar File

The sidebar file usually contains code like menu links and widgets. That makes it a very important file for your WordPress blog.

You can use WordPress to list the pages in your site by using the WordPress function wp_list_pages(). More details can be found here:
http://codex.wordpress.org/Template_Tags/wp_list_pages

WordPress has a unique(?) Widget feature that only allows you to add a Widget to one sidebar. If you want your Widgets to appear in specific pages then create a custom sidebar, integrate it into WordPress (code involved) then drag the desired Widgets onto that sidebar in the Widgets section of the WordPress admin.

All sidebars have to be registered in the functions file in order to work correctly.

See this page for info on how to make a WordPress theme widget ready:
http://automattic.com/code/widgets/themes/

Footer File

This file contains the content at the bottom of your page. You can include it into your page.php, index.php or other template files with the following server-side include code:
<?php get_footer(); ?>
or, if you have more than one footer:
<?php include('footer-home.php'); ?>

It is usually in this file where you’ll place analytics code (just above the closing tag), so remember to do this before completely deploying your website. 2 free analytics tools we always use are Statcounter (http://www.statcounter.com) and Google Analytics (http://www.google.com/analytics/).

Style Sheets – CSS Files

The key to style sheets is that you must use full paths to images if they are used in your definitions. Here is an example of the definition without the WordPress modification:
div.home-middle {
background-color: #ffffff;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: right;
}
Here is the same stylesheet with the WordPress modification:

div.home-middle {
background-color: #ffffff;
background-image: url(http://www.YourDomain.com/wp-content/);
background-repeat: repeat-y;
background-position: right;
}images/background.jpg

Sometimes it is difficult to determine where the images are on your site, but you can get the path to these images. See the Images and External Files section above to see how to preface all images in your .php files. Once you do this view the rendered page then right-click an image and copy its path to the clipboard. Use this path in your CSS files.

Other Common Files

When your pages have code that appears in all or a lot of them you need to normalize the code on the pages. This means that you remove this common code and place it into a separate file that is then included in the original files using a PHP server-side include statement. Here is an example of a PHP include statement:
<?php include('header-title.php'); ?>

The Body Content section below shows an example of a real page.php that has several of these includes.

Body Content

In order for your page templates to show the content you add to WordPress you need to add the following code to extract it from the database.

Below is the minimal code called the loop in WordPress that will display the main body content you plug into WordPress page editor:
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

Below is the full code of an example page.php that shows how to integrate all components of a page. Note that all of the common code on the page has been placed into separate files and included in this page with PHP server-side includes. Not much code here.
<?php get_header(); ?>
<body class="homebody" onload="MM_preloadImages('<?php bloginfo('stylesheet_directory') ?>/images/home-consumer-button-on.gif','<?php bloginfo('stylesheet_directory') ?>/images/home-business-button-on.gif','<?php bloginfo('stylesheet_directory') ?>/images/home-catalogs-button-on.gif','<?php bloginfo('stylesheet_directory') ?>/images/home-data-sheets-on.gif','<?php bloginfo('stylesheet_directory') ?>/images/home-steel-button-on.gif','<?php bloginfo('stylesheet_directory') ?>/images/home-electrical-button-on.gif')">
<div class="wrap">
<div class="sub-header"><img src="<?php bloginfo('stylesheet_directory') ?>/images/subpage-header.jpg" alt="Keyword Oriented Alt Text" width="1000" height="163" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="15,39,243,152" href="http://www.MyDomain.com" alt="My Company" />
</map>
</div>
<div class="sub-middle clearing">
<div class="sub-middle-left">
<?php include('menu.php'); ?>
<div class="sub-middle-left-content-wrap clearing">
<?php include('left-links.php'); ?>
<!-- begin content -->
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
<!-- end content -->
</div>
</div>
<?php include('right-box.php'); ?>
</div>
<?php include('footer.php'); ?>