How to Create a WordPress Theme Using HTML5, CSS3, and Responsive Design Principles
A WordPress theme is basically the appearance of a website. It works on the layout, design, colours, text, and the overall look of a website. It can be modified to fit your brand’s image, concept, look, and feel.
To achieve the right appearance for your website, you can create a WordPress theme from scratch. Creating it requires some knowledge about hypertext markup language (HTML) coding, so you can configure it appropriately.
To know how to build a theme from scratch, we will teach you how to do it using CSS3 and HTML5 and how to apply the responsive design principles to your created theme.
What Is Responsive Design?
The concept of responsive design is simple: make the usability and readability of your website better on all types of devices without installing more plugins or themes. Creating a theme that is responsive allows your website to adjust its layout smoothly on any screen, resolution, and size. It also places your content correctly on all types of screens without cutting it off or overflowing it, making it look clean.
What are the Principles of Responsive Design?
To understand the responsive design principles, start by asking yourself how you can determine if your website is responsive on all types of screens. To do this, think about the layout of your website as a series of grids. Divide the width of the grids for every section of your content in percentage.
To make the math easier to understand, let us give you an example. Say you have four content section elements (<div>) on your site: the footer, sidebar, main content, and header. Naturally, the width for each element consumes 100% of the space available, so if you want to create four divisions on your website, each <div> gets 25% space.
For your site’s images, you can set them to a 100% maximum width (max-width: 100%) of their actual size. Set their height to automatic. This way, the images’ width and height are automatically adjusted when users view your website on a narrower screen.
It is, however, important to remember that when the screen size is larger, the width and height do not scale up. So, if you have a photo with a 200px width in a <div> that consumes 100% of the screen, its actual width remains the same. This makes a photo with a good syntax.
If you use width: 100%, it causes the photo to take up 100% of the available space, which makes it a bad syntax. Here is a sample of the good versus bad syntax when you create a WordPress theme:
/* GOOD WIDTH */
.inline-text-box {
width: 50%;
}
/* BAD WIDTH */
.inline-text-box {
width: 800px;
}
/* GOOD IMAGE */
img {
max-width: 100%;
height: auto;
}
/* BAD IMAGE */
img {
width: 100%;
height: auto;
}
Understanding the principles of responsive design will come in handy because you will apply them when you create a WordPress theme in the next sections.
Understanding HTML5 and CSS3
Before we give you the steps to create a WordPress theme, let us give you a short background on HTML5 and CSS3.
HTML is the programming language used to build a website. It is the code for creating web pages that browsers read to convert these pages that people can see.
HTML5 is the latest version of it, and it allows websites to show content constantly on any smartphone, tablet, laptop, or computer. It also provides you with a viewport meta tag, which allows you to control what your site displays on each browser viewport. HTML5 has the <meta> tag in the <head></head> tag.
Here is an example of a basic HTML5 document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML5 Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/normalize.min.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<section>
<header>
<h2>My Articles</h2>
</header>
<article>
<header>
<h2>An Article</h2>
</header>
<p class="inline-text-box">Left</p><p class="inline-text-box">Right</p>
</article>
</section>
</main>
<footer>
<p>Copyright © 2019</p>
</footer>
</body>
</html>
The cascading style sheets (CSS) is a style sheet programming language that describes how the HTML elements must be shown on every screen. It can control many web pages’ layout at once, making your work quicker and easier.
Like HTML, CSS has its latest version as well, which is CSS3. It lets you set rules for your web pages and gives you control in terms of how your website is presented or how it behaves on different screen sizes.
Configuring HTML5 and CSS3 to create a WordPress theme helps you create a fully responsive theme.
A Guide to Create a WordPress Theme That Is Responsive on All Types of Screens
Now, let us move on to the steps in creating your own theme from scratch!
Step 1: Store Your Theme Files
You need a place to store your theme files, so you must create a folder in your control panel for this. To do this, log in to your control panel and go to File Manager under the Files section.
Navigate to the public_html folder and go to wp-content and then themes.
From there, click +Folder at the upper left side of the page to create a new folder. Name the folder and make it short and unique.
In our example, we will use my-theme. Click Create New Folder once done.
Step 2: Create the Template Files and the CSS Stylesheet
Creating a WordPress theme only needs two template files: style.css and index.php. These files are used to show posts and pages on your website.
But to create other layouts for your posts and pages or other parts of your site, you must make files that contain PHP and HTML5, which are only applicable to every section created. The name for each template file should be the same as what you can see in the WordPress documentation.
Some of these template files are:
- footer.php – has the HTML tag that is displayed at the bottom of your site.
- comments.php – describes how submissions and the comment text box are shown.
- page.php – displays a page on your website.
- single.php – displays a post on your site.
- header.php – has the HTML tag that is shown at the top of your web pages.
To create template files, you still need to do it in your control panel. Locate the my-theme folder, the one you created in the previous step, and create these PHP files: page.php, single.php, sidebar.php, functions.php, footer.php, index.php, and header.php in the folder.
Enter the folder and click +File at the upper left side of the page to start creating each file. Click Create New File after naming each file.
You must also create a CSS file and name it style.css.
Right click on the CSS file and select Edit. Add the theme’s name, author, version, description, and others to the file. You will see these details in the admin control panel of your WordPress website.
You must write the information as a multi-line CSS comment in the file that looks like this:
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
Click Save Changes at the upper right side of the page.
The lines for License: and License URI: are only necessary if you plan to share the theme you created on WordPress.org. If not, you do not need to add them to the file.
Once you have this correctly, you can already see your theme in the Themes section of your website named My Theme. If you decide to activate it, you will only see an empty homepage because your index.php file is still empty.
To add colour to the theme you created, add a rule to the CSS file. Add the following code after the multi-line CSS comment you created previously, but leave a blank line right after the closing line */:
* {
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}
The asterisk (*) on the first line is extremely important in styling your theme because it matches each class on the HTML document. This means that the height and width of each item on your every page must have a border, padding, and content.
The second line of the code alters the background colour of your theme to white and sets the default font.
Step 3: Add Code to Your sidebar.php and functions.php Files
Adding some coding to these files improves the flexibility of your theme. For the functions.php file, you need to add the normalize.css file by inserting this code:
<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
Follow the same process as before when adding the code to the file.
normalize.css lets browsers display your website’s layout despite their different default settings for padding, page margins, and other related elements.
You will then need to enable sidebar widgets, so you can see the widgets menu link in your control panel. Add this code after the previous code, and again, leave a blank space after the } line:
// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );
To enable a custom navigation menu and use the Appearance and then Menu feature in your website, add this code after the previous code, leaving another blank line right after the last line.
// Register a new navigation menu
function add_Main_Nav() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );
Once you have added all these pieces of code. Click Save Changes at the upper right side of the page to save the changes made.
For the sidebar.php file, you need to enable get_sidebar() to allow widgets and sidebar to your theme. Add this code to your sidebar.php file:
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php endif; ?>
Click Save Changes to save the changes made.
The first line of the code tells WordPress not to display the sidebar HTML if there are no widgets enabled. The second line of tag sets the attributes of the element that has your theme’s widgets, while the third tag is a function in WordPress that shows your widgets.
Step 4: Create Your Theme’s Layout
To create the layout of your theme, you need to configure the style.php, page.php, single.php, footer.php, index.php, and header.php files. We will show you how to modify each file to make it easier for you.
header.php
header.php defines the top of your document. It must contain the following:
- wp_nav_menu () – shows the header’s page navigation menu.
- body_class() function – provides the site’s body with the default CSS classes.
- HTML head elements <head></head> – the place where you keep your metadata.
- language_attributes() function – enters the language code you select during installation.
- DOCTYPE declaration – tells web browsers how the document should be interpreted.
Insert this code under your website’s title, so your site automatically adjusts to small viewports and screen sizes, making it mobile responsive:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
The final header.php file should have these tags:
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="my-logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
</header>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>
You can replace the tag <?php bloginfo(‘name’); ?> with the code of your image if you want a logo to appear as your header.
index.php
index.php defines your homepage and is used as a default layout if certain templates like page.php are not found. You will need to insert (get_footer) for the footer, (get_sidebar) for the sidebar, and (get_header) for the header, so these sections will be in your homepage.
You also need to add these HTML5 semantic elements: <article>, <header>, <main>, and <section>. Some of these elements have classes assigned to them, and you can see them on the style.css file.
You will also need to display your posts with excerpts and more template tags, and this can be done through the WordPress loop. So, the final coding for your index.php file looks like this:
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-loop">
<header>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
By: <?php the_author(); ?>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
Your loop starts with the <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> tag and ends at the <?php endif; ?> tag. To let you understand what is inside the loop, we will explain each tag:
- <?php the_excerpt(); ?> carries out your posts’ excerpts, which are automatically generated if you do not write something on it.
- <?php the_author(); ?> displays the author’s name.
- <?php the_title(); ?> shows your posts’ titles.
- <?php the_title_attribute(); ?> shows your posts’ titles in a safe format for the link’s title attribute.
- <?php the_permalink(); ?> creates the URL of your posts.
Once you save the changes, expect to see a plain-looking page.
footer.php
footer.php defines the footer of your web pages. If you do not have this, the admin bar when you visit your pages, posts, or homepage as an admin is gone. Your footer should have the <footer></footer> HTML5 semantic element and he wp_footer() action hook to make sure the final JavaScript and WordPress code are included.
Your footer code should look like this:
<footer>
<p>Copyright © 2019</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
When you save the changes, any open HTML tag in any template file is automatically closed.
single.php
single.php defines the post’s layout, which can be different from the index.php file. You can use the_content() to show the full post. The final code must be like this:
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>
Once you save the changes, your post will show as a single page without the sidebar.
page.php
page.php handles how the pages are shown on your website, which can be different from the layout of the post and index templates. To let you see the difference, we will add the sidebar to the layout and allow the page content to take 70% of the page width. Use this code on the page.php file:
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
style.css
style.css is the primary style sheet of your website and controls your site’s layout and design. Use this code on your style.css file:
.my-logo,
footer {
width: 100%;
padding-left: 1%;
margin-bottom: 8px;
background-color: #78baff;
border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {
}
footer {
margin-top: 4px;
}
a {
text-decoration: none;
}
/* 'Margin: 0 auto' centers block content on the page */
.wrap {
width: 99%;
margin: 0 auto;
}
.content-area {
display: inline-block;
}
.content-thin {
width: 70%;
}
.content-full-width {
width: 100%;
}
.content-area,
.primary-sidebar {
display: inline-block;
}
.primary-sidebar {
width: 25%;
padding: 1%;
vertical-align: top;
background-color: #ececec;
}
.article-loop {
width: 45%;
text-align: left;
margin: 5px;
padding: 10px;
}
.article-full {
width: 99%;
padding: 1%;
}
.article-loop,
.article-full {
display: inline-block;
vertical-align: top;
background-color: #FFF;
border-radius: 4px;
margin-bottom: 4px;
}
Once saved, you will see boxes with blue borders and a white background.
The stylesheet and templates you created allow you to navigate through your pages and posts easily.
Configuring Your Theme Using Media Queries
Media queries in your CSS stylesheet describe the rules that tell how the page should be presented when there is a change with the viewport. You can configure them for a media type like a div’s width when you open your site on various browsers.
For example, you have two text boxes that consume 50% of the screen. When you open the page on a smaller screen or window, the boxes automatically adjust to consume 50% of the screen. If the screen is too small for the text to show properly, you can set it to 100% of the size of the screen.
We will modify the posts’ width when the window’s browser is under 800px. Each text box will have its own line instead of two posts that are side by side. We will use these media feature rules:
- orientation – shows if the screen is on landscape or portrait mode.
- min-width – tells the visible area’s minimum width.
- max-width – shows the maximum width of the viewable area of the browser.
We will then create a media query that influences the article loop class. So, when the browser’s width is under 800px, the article loop class must use 99% of the space. This means the media query only affects browser windows below 800px.
Under the .article-loop class line, insert this code:
@media screen and (max-width: 800px) {
.article-loop {
width: 99%;
}
}
Save the changes made.
Next, we will create another media query that dictates the sidebar and main content to consume 100% of the space. This also lets the sidebar drop under the main content if the browser window is below 600px wide.
Add this code below the previous code:
@media screen and (max-width: 400px) {
.content-area,
.primary-sidebar {
width: 100%;
}
}
Save the changes made.
What Are Action Hooks, Template Tags, and WordPress Loop?
We mentioned these three WordPress elements earlier, and you might not know what they are exactly. To help you understand these elements better, we will briefly discuss each.
Action hooks are PHP functions that commonly have other functions. It has core functions that allow HTML code on web pages and allow plugins to function on your website. If you do not have action hooks in your theme, plugins cannot function properly, and some code will be gone.
In your header template, wp_head() is the action hook that includes the default HTML header in the <head></head> tag. In your footer section, wp_footer() is the action hook that runs functions attached by plugins and includes the default JavaScript and HTML.
Template tags are also PHP functions, and they can easily add your theme’s template files to another file or display your database’s information. For example, you want the footer to only display on the homepage, then add wp_footer() to the index.php file but not to the page.php file.
Here are some samples of the template files:
- get_footer() – addresses footer.php
- get_sidebar() – calls sidebar.php
- get_header() – includes header.php
WordPress loop is a group of code that brings back requested posts. The HTML written in the loop will be utilized to show each post requested by the loop. The code is constantly looping until it gets to the final post.
The loop has four lines that contain an if-then statement. The first line in the loop tells that when a post is found, the following code in the next lines will be used to show the post. If there is no matching post found, it defines a replacement text.
You can see the loop tag like this:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// HTML and template tags here to define the layout, and what is shown from the post
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
If you want to show one post and its full content, use the_content() in the loop, but if you want to display all the published posts and see just the list, use the_excerpt() instead.
Conclusion
Creating a WordPress theme requires a lot of patience and understanding of the HTML and CSS programming languages. Despite the complex process, you can create a WordPress theme that is more personalized and represents your brand better.
Let us do a quick recap of the steps:
- Storing theme files
- Creating the CSS stylesheet and template files
- Adding code to your sidebar.php and functions.php files
- Creating your theme’s layout
Use our guide to build your own WordPress theme. You will not only create a unique website, but you will also have one that is responsive to any type of screen!