From blank page to launch, how to develop a WordPress theme

If you can code a simple HTML webpage then with a few extra lines of code you can create a powerful content managed WordPress website.

Index

Getting Started

The first step is to code your HTML template as a static page. It helps if you have dummy content in each of the blocks here so you can test the layout.

Below is a very simple website layout with a header, navigation bar, content area, sidebar and footer.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WordPress Theme Demo</title>
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    </head>
    <body>
        <div id="wrapper">
            <header id="header">
                <h1>WordPress Theme Demo</h1>
            </header>
            <nav id="mainnav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
            <section id="content">
                <article>
                    <h1>This is the page title</h1>
                    <p>This is the page content</p>
                </article>
            </section>
            <section id="sidebar">
            	<div class="sidebox">
                	<h1>Sidebox Title</h1>
                    <p>Sidebox content</p>
                </div>
            </section>
            <footer id="footer">
                 &copy; 2014
            </footer>
        </div>
    </body>
</html>

And the css to make it more like a modern site:

* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
#wrapper {
    width: 900px;
    margin: 0 auto;
}
#mainnav ul li {
    list-style-type: none;
    display: inline-block;
    margin-right: 15px;
}
#content {
    float: left;
    width: 600px;
}
#sidebar {
    float: right;
    width: 270px;
}
#footer {
    clear: both;
}

We now have our base (if not a little bare) site ready to convert to a fully dynamic content managed WordPress website.

Basic Site Demo

About the author Daniel Taylor

Dan Taylor is the founder and owner of Tailored Internet marketing. With more than 5 years in SEO Dan has worked with and for brands such as MoneySupermarket, JJB Sports, ManUtd.com and others. Dan is a father of two, and avid Everton FC fan.

Comments are closed.