How to Create Basic WordPress Templates - dummies

How to Create Basic WordPress Templates

By Lisa Sabin-Wilson

You create a new WordPress theme by using some of the basic WordPress templates. So, it makes sense that you will need to start with the template. The first steps in pulling everything together are as follows:

  1. Connect to your web server via FTP, click the /wp-content folder, and then click the /themes folder.

    This folder contains the themes currently installed in your WordPress site.

  2. Create a new folder and name it mytheme.

    In most FTP programs, you can right-click and choose New Folder. (If you aren’t sure how to create a folder, refer to your FTP program’s help files.)

  3. In your favored text editor, such as Notepad (Windows) or TextMate (Mac), create the Header template with the code and then save with the filename header.php.

    When typing templates, be sure to use a text editor, such as Notepad or TextMate. Using a word processing program, such as Microsoft Word, opens a whole slew of problems in your code. Word processing programs insert hidden characters and format quotation marks in a way that WordPress can’t read.

    <!DOCTYPE html>
    <html <?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 bloginfo( 'name' ); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?>
    <?php wp_title(); ?></title>
    <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() ?>>
    <div id="page">
    <header id="header">
    <h1><a href="<?php bloginfo(‘url’); ?>"><?php bloginfo(‘name’); ?></a></h1>
    <h2><?php bloginfo(‘description’); ?></h2>
    </header>
    <section>
  4. Create a theme functions file with the code and then save with the filename functions.php.

    The theme functions file registers the widget area for your site so that you can add widgets to your sidebar using the available WordPress widgets on the Widgets page on the Dashboard.

    <?php
    if ( function_exists('register_sidebar') ) register_sidebar(array('name'=>'Sidebar',
    ));
    ?>
  5. Create a Sidebar template file with the code and then save with the filename sidebar.php.

    The code here tells WordPress where you want the WordPress widgets to appear in your theme; in this case, widgets appear in the sidebar of your site.

  6. Create the Footer template file with the code and then save it with the filename footer.php.

    </div>
    <footer id="footer">
    <p>&copy; Copyright <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All Rights Reserved</p>
    </footer>
    <?php wp_footer(); ?>
    </body>
    </html>
  7. Create the stylesheet file with the code and then save it with the filename style.css.

    This example gives you just some very basic styling to create your sample theme.

/*
Theme Name: my Theme
Description: Basic Theme from WordPress web Design For Dummies example
Author: Lisa Sabin-Wilson
Author URI: http://lisasabin-wilson.com
*/
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size:16px;
color: #555;
background: #eee;
}
#page {
width: 960px;
margin: 0 auto;
background: white;
border: 1px solid silver;
}
#header {
width: 950px;
height: 100px;
background: black;
color: white;
padding: 5px;
}
#header h1 a {
color: white;
font-size: 22px;
font-family: Georgia;
text-decoration: none;
}
#header h2 {
font-size: 16px;
font-family: Georgia;
color: #eee;
}
section {
width: 600px;
float:left;
}
#side {
width: 220px;
margin: 0 15px;
float:left;
}
#footer {
clear:both;
width: 960px;
height: 50px;
background: black;
color: white;
}
#footer p {
text-align:center;
padding: 15px 0;
}
#footer a {
color:white;
}