How to Create Basic Templates in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

You create a new WordPress theme by using some of the basic WordPress templates. The first steps you need to heed to pull 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 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.

  4. Create a theme functions file 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.

  5. Create a Sidebar template file 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 and then save it with the filename footer.php.

  7. Create the stylesheet file and then save it with the filename style.css.

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

Here is the code to create the Header template.

<!DOCTYPE html>
    <html <?php language_attributes(); ?> class=“no-js”>
    <head>
    <meta charset=“<?php bloginfo( ‘charset’ ); ?>“>
    <link rel=“stylesheet” type=“text/css” media=“all” href=“<?php bloginfo( ‘stylesheet_url’ ); ?>“ />
    <?php wp_head(); ?>
    </head>
    <body <?php body_class() ?>>
    <header class=“masthead”>
    <h1><a href=“<?php bloginfo( ‘url’ ); ?>“><?php bloginfo( ‘name’ ); ?></a></h1>
    <h2><?php bloginfo( ‘description’ ); ?></h2>
    </header>
    <div id=“main”>

Now, check out the code to create the theme functions file.

<?php
    add_theme_support( ‘title-tag’ );
    if ( function_exists( ‘register_sidebar’ ) ) register_sidebar( array( ‘name’=>‘Sidebar’,
    ));
    ?>

Next, you need to add the code for the sidebar.

<aside class=“sidebar”>
    <ul>
    <?php if ( !function_exists( ‘dynamic_sidebar ‘) || !dynamic_sidebar( ‘Sidebar’ ) ) : ?>
    <?php endif; ?>
    </ul>
    </aside>

Then, you need to add the footer. Here is the code to do just that.

<footer>
    <p>&copy; Copyright <a href=“<?php bloginfo( ‘url’ ); ?>“><?php bloginfo( ‘name’ ); ?></a>. All Rights Reserved</p>
    </footer>
    <?php wp_footer(); ?>
    </body>
</html>

Finally, you need to add the code for the stylesheet file.

/*
    Theme Name: My Theme
    Description: Basic Theme from WordPress 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: #ffffff;
    }
    header.masthead {
    width: 950px;
    margin: 0 auto;
    background: black;
    color: white;
    padding: 5px;
    text-align:center;
    }
    header.masthead h1 a {
    color: white;
    font-size: 28px;
    font-family: Georgia;
    text-decoration: none;
    }
    header.masthead h2 {
    font-size: 16px;
    font-family: Georgia;
    color: #eee;
    }
    header.masthead nav {
    background: #ffffff;
    text-align: left;
    height: 25px;
    padding: 4px;
    }
    header.masthead nav ul {
    list-style:none;
    margin:0;
    }
    #main {
    width: 950px;
    margin: 0 auto;
    padding: 20px ;
    }
    #main section {
    width: 500px;
    float:left;
    }
    #main .hentry {
    margin: 10px 0;
    }
    aside.sidebar {
    width: 290px;
    margin: 0 15px;
    float:right;
    }
    aside.sidebar ul {
    list-style:none;
    }
    footer {
    clear:both;
    width: 960px;
    height: 50px;
    background: black;
    color: white;
    margin: 0 auto;
    }
    footer p {
    text-align:center;
    padding: 15px 0;
    }
    footer a {
    color:white;
    }