Theme design, where it all starts

Part 2. The static HTML design and styles

Buy the book

These articles are excerpts from the book's manuscript draft. You can read the book here or in an easier-to-read format and finalized by purchasing the finished book.

Table of Contents

Before coding a new WordPress theme, we need to have a mockup or a model of the page/site we want to transform into a theme. It is much easier to have code for the theme than start with an empty file. Or, we’ll start with an empty file, but we will have code to paste into it. And if we have a static HTML version of the site, it is easy to compare the WordPress version to it as we develop our theme.

What goes into a theme?

In a real-world case, I would have a static HTML version of the site or at least a version of every page template I will implement in WordPress. That is:

  • front-page
  • a common allrounder page
  • contact page
  • about page
  • single article page
  • article category/archive page (blog)
  • 404 page
  • product page

What you need depends on the site you are creating. In all cases, you will need at least an index page for an allrounder, a single article page for posts, a category or archive page, and a 404 page.

Site design for this tutorial

For the sake of simplicity, I start with one page at a time. So, as the tutorial evolves, there will be new pages and new designs that I introduced when needed. The point of my tutorials is to concentrate on small isolated topics to make it easier for you to understand and not confuse readers with showy designs and complex implementation. So, I’ll keep it simple.

What do these tutorials not teach?

I will not get into CSS layouts and planning and designing a page. Later on, I may write articles about such topics. These tutorials are about WordPress development.

The site the theme is designed for

Let’s make a site for a small design company that provides web design and photography services and custom WordPress development. The company name is WP Smithy, and the domain is https://wpsmithy.com (don’t bother checking, it is one of my domains, but there is no content as of writing this article).

First step, plan and design

Start by creating a simple HTML page for the site. The first page we create is the home page of the site. Later on, we’ll expand the design and create other pages, but this first page already has the header and footer areas common to all pages to come. Only the content will change. This one page gives us a good starting point for our theme.

A static HTML version of the design

Below you can find a picture of the site design. Or not the site but the front page. This page has the elements we need to start our theme. These include 

  • the header
  • logo and navigation
  • hero image and site title
  • main content area
  • footer
  • areas that will be widgetized inside the footer

With these implemented as a static HTML file with CSS styling, we can take the next step towards transforming the design into a theme.

Screenshot of the demo site this tutorial will design.

Notice that I have not designed the main content. Instead, I allow the end-user to use Gutenberg blocks to create content on the page. So they can do their unique design.

If you want to follow along, the HTML code is here for you to copy. Then, you need to provide your own images, and you are good to go.

html code to download

				
					<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web design and custom web development - WP Smithy</title>
	
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Raleway:wght@100;300;700&display=swap" rel="stylesheet"> 

	<link rel="stylesheet" href="_css/styles.css">
</head>
<body>
	<a class="skiplink" href="#main">Jump right to the content</a>
	<div class="top-bar">
		<div class="limited-width top-bar-content">
			<a href="mailto:info@wpsmithy.com">info@wpsmithy.com</a>
		</div>
	</div>
	<header class="page-header">
		<div class="limited-width">
			<div class="header-content">
				<div class="header-logo">
					<img decoding="async" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="_imgs/wpsmithy-logo-blackbg.png" alt="WP Smithy company logo"><noscript><img decoding="async" class="lazyload" src="_imgs/wpsmithy-logo-blackbg.png" alt="WP Smithy company logo"></noscript>
				</div>	
				<nav class="site-nav">
					<ul>
						<li><a href="#" class="nav-link">page 1</a></li>
						<li><a href="#" class="nav-link">page 2</a></li>
						<li><a href="#" class="nav-link">page 3</a></li>
					</ul>
				</nav>
			</div><!-- .header-content -->
		</div><!-- .limited-width -->
	</header>

	<div class="hero">
		<h1>WPSmithy<br>Your trusted companion in web development</h1>
	</div>

	<main id="main" class="limited-width">
		<h2>This is sample content</h2>
		<p>This mockup page content does not really matter as all this content will be replaced by WordPress loop (the page content). And all the content is created using Gutenberg blocks.</p>
		<h3>Gutenberg blocks as content</h3>
		<p>Because Gutenberg let us create columns and rows of content with varying content, we do not need to design fixed content structure as of now. All the content would anyway be replaced by Gutenberg blocks. At the moment I have only designed the page structure, the layout and CSS styling that is needed for the page. I'll get into the block styles as we get to that point in theme design.</p>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, fugiat temporibus eligendi eos. Veniam error in similique impedit temporibus commodi, et ipsam amet beatae fugiat unde dolorum, laudantium aut rem.</p>
	</main>

	<footer class="page-footer">
		<div class="limited-width">
			<div class="footer-content">
				<div class="footer-section">
					<h2>Site links</h2>
					<ul>
						<li><a href="#" class="footer-menu-link">link 1</a></li>
						<li><a href="#" class="footer-menu-link">link 2</a></li>
						<li><a href="#" class="footer-menu-link">link 3</a></li>
						<li><a href="#" class="footer-menu-link">link 4</a></li>
					</ul>
				</div>
				<div class="footer-section">
					<h2>section 2</h2>
					<p>These footer sections will be "widgetizeds" i.e. User can place a Gutenberg Block into the section area to create a footer for his or her liking.</p>
				</div>
				<div class="footer-section">
					<h2>section 3</h2>
					<p>This is the third content block in footer. No content is mandatory so it is a free design that the end user can do.</p>
				</div>
			</div><!-- .footer-content -->
		</div><!-- .limited-width -->
	</footer>
	<div class="bottom-line">
		<p>@ 2022 WP Smithy</p>
	</div>
</body>
</html>
				
			

CSS code to download

Below is the CSS code.

				
					
/**
 * Simple CSS reset
 * 
 */

* {
	box-sizing: border-box;
}


html,
body {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}


/* ============================================= */

/**
 * Colors etc. properties
 */

:root {
	--limited-max-width:  70rem;
	--main-bg-color:  hsl(198, 100%, 2%);
	--highlight-color: hsl(49, 67%, 43%);
}

/* ============================================= */

body {
	font-family: 'Raleway', sans-serif;
	display: flex;
	flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Playfair Display', serif;
}

.skiplink {
	position: absolute;
	top: -10000px;
	height: 0;
}
.skiplink:focus {
	top: 10px;
	height: auto;
	background: #ff6600;
	color: #FFF;
	outline: 1px solid red;
	padding: .5rem 1rem;
}

.top-bar {
	background: var( --highlight-color );
	color: var( --main-bg-color );
	padding: .2rem 2rem;
}

.top-bar-content {
	text-align: right;
}

.top-bar-content a {
	color: var( --main-bg-color );
}

.page-header,
.page-footer {
	padding: .2rem 1rem;
	background: var( --main-bg-color );
}

.header-logo {
	max-width: 80px;
}

.limited-width {
	max-width: var( --limited-max-width );
	margin: 0 auto;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-nav ul li {
	display: inline-block;
}

.nav-link {
	display: inline-block;
	padding: .3rem 1rem;
	color: #FFF;
	text-decoration: none;
	font-size: 1.2rem;
}


.hero {
	min-height: 50vh;
	background: url(../_imgs/bg-anvil.jpg);
	background-position: center center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 2rem;
}

.hero h1 {
	font-size: 5rem;
	font-weight: 400;
	text-align: center;
	line-height: 1;
	max-width: 1200px;
	color: #FFF;
}

main {
	padding: 3rem 1rem;
	flex-basis: fit-content;
}

.footer-content {
	display: flex;
	justify-content: space-evenly;
	padding-bottom: 1rem;
}

.footer-section {
	width: 33.33%;
	margin: 1rem;
	color: #FFF;
}

.footer-section a {
	color: #FFF;
}

.bottom-line {
	background: var( --highlight-color );
	padding: 1px;
	text-align: center;
}


				
			

What next

The following tutorial explains setting up the development environment and creating a new empty theme. Then I go through theme requirements and explain how to structure the theme files etc.

Picture of Kari Selovuo

Kari Selovuo

Leave a Reply

Your email address will not be published. Required fields are marked *