How to Create a WordPress Theme Using HTML5, CSS3, and Responsive Design Principles
access_time
hourglass_empty
person_outline

How to Create a WordPress Theme Using HTML5, CSS3, and Responsive Design Principles

A WordPress theme allows you to have a consistent layout for your webpages and posts. It can also be modified to change your entire website’s look and feel. To get your dream website, you can create a WordPress theme from scratch instead of installing one from the official theme directory.

As such, this tutorial will discuss how to create a WordPress theme using HTML5 and CSS3. What’s more, we’ll be applying the responsive design principles to your theme. So let’s get started!

Getting to Know Responsive Design

Responsive design means that your website is automatically displayed in the best format for the visitor based on the size of their screen.

The page layout literally ‘responds’ to the available space, and the content is placed correctly so that nothing is cut off, overflowing, and your website looks as clean as possible.

To measure a responsive alignment for your design, you should think of your website’s layout as a series of grids rather than pixels (px). Then, divide the grids’ width for every content section in percentage (%).

Let’s say you want to have four content division elements (<div>) on your site – header, main content, sidebar, and footer. The width of each div takes 100% of the available space. So, if you want to create four divs within it, each one gets 25% of the allocated space.

For images, you can set them to have max-width: 100% of their actual size and set the height to auto. The width and height of the image will be automatically adjusted when its container’s size is narrowed. However, it will not scale up if the container is widened.

So, if you place a 200px width image inside a div that takes up 100% of the screen, it will remain displayed in its actual width.

Whereas, using width: 100% will cause the image to take up 100% of the space available instead of stopping at its actual width in pixels.

Here’s an example of a good vs. bad syntax to build a responsive design:

/* 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;
}

Let’s apply the above responsive principles to create a WordPress theme with HTML5 and CSS3.

Steps to Create a Responsive WordPress Theme Using HTML5 and CSS3

HTML5 is the latest version of the web markup language HTML that allows you to display your content consistently on any computer, laptop, tablet, or mobile phone.

What’s more, HTML5 offers a viewport meta tag feature. It lets you control the display of your website on every browser viewport with the <meta> tag inside the <head></head> tag.

A basic HTML5 document will look like this:

<!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 &copy; 2019</p>
    </footer>
  </body>
</html>

To make a fully responsive WordPress theme, you can also use the CSS3 media queries feature. It allows you to set specific rules and can control how your site will behave and present on various screens or window size.

Here, we’ll apply both of the viewport meta tag and the media queries while building our theme. Read on to learn how to create a WordPress theme!

1. Storing Your Theme and Its Files

Before we continue, create a new folder for the theme components within your WordPress themes folder.

Do so by accessing the File Manager on your hPanel. Then, head over to public_html -> wp-content -> themes and create a new folder. Keep in mind that it should have a unique, descriptive, and short name. Don’t use numbers or spaces.

Here, we’ll use my-theme as an example.

The folder name shouldn’t be the same as another theme. If you plan on sharing your work, check that there’s no theme with the same name on the WordPress.org Theme Directory.

Once you have a folder to store the theme, you need to create some essential WordPress template files.

2. Creating the Templates Files and the CSS Stylesheet

WordPress themes can be created with just two template files — index.php and style.css. They will be used to display every page and post on your site.

To make different layouts for your posts, pages, and other parts of your website, you have to create separate files containing the HTML5 and PHP that applies only to each section.

Each template file must use the correct name as defined by the WordPress documentation.

Some of the template files beyond index.php are:

  • header.php – contains any HTML that goes at the top of your pages, starting from <!DOCTYPE html>.
  • single.php – displays a single post from your blog.
  • page.php – is used to display a single page from your blog.
  • comments.php – defines how the comment text box and submissions are displayed.
  • footer.php – contains the HTML that goes at the bottom of your website, including </html>.

Find the complete list of template files on the WordPress theme development handbook.

If you wish to use custom post types, you can create templates that only apply to posts of that type. But, if you want posts from a specific category to have different styles, use the if-then statements inside the loop.

Follow these steps to create your WordPress template files:

  1. In the my-theme folder, create the PHP files – header.phpindex.php, footer.php, functions.php, sidebar.php, single.php, and page.php.
  2. Then, generate a new CSS file named style.css.

    The main stylesheet must be called style.css.

    Creating template files folder on your File Manager to store your new theme.
  3. Add necessary information (theme’s name, version, description, author, etc.) to the top of the style.css file. WordPress will display them in the admin control panel.

    The information must be written as a multi-line CSS comment, each header on its own line, starting with a keyword. Find the full list of header keywords for themes on the WordPress Codex – File Header page.

    The format for headers is Keyword: Information.

    /*
    Theme Name: My Theme
    Author: Hostinger
    Author URI: http://www.hostinger.com/tutorials
    Description: My first responsive HTML5 theme
    Version: 1.0
    License: GNU General Public License v3 or later
    License URI: http://www.gnu.org/licenses/gpl-3.0.html
    */

    The seventh and eighth lines are required if you plan on sharing your theme on WordPress.org. If you’re going to use the theme for your own website, you won’t need to include them.

    At this point, your theme is already visible in the dashboard’s theme section. You will see it — My Theme, with a white and gray checker box image. Once you’ve finished creating your WordPress theme, you can take a screenshot to be shown here.

    the dashboard preview after you create a wordpress theme folder

    If you activate the theme, you will get a blank homepage as your index.php is empty, and there are no templates.

  4. Add a single rule to the CSS file that changes the background color of the page. Insert a blank line after the comment closure */ on the 10th line. Then, write the following syntax below it:
    * {
      box-sizing: border-box;
    }
    
    body {
        background-color: #f9f9f9;
        font-family: Helvetica;
    }

    The first entry is an important part of responsive styling. * is a wildcard and matches every single class that’s found in the HTML document.

    It states that the final width and height of every item on the page should include content, padding, and border. This rule effectively adds the padding inside the box instead of outside it.

    The second entry just changes the background color to white and set the default font, which will be used in our theme.

3. Before Creating Your WordPress Theme

Prior to the development process, it’s highly recommended to add a few pieces of code to your function.php and sidebar.php to enhance your theme’s flexibility.

functions.php

  1. First, include a CSS file named normalize.css on your functions.php file by inserting the following 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");
    }

    Different browsers have different default settings for elements like the page margins and padding. normalize.css allows browsers to consistently display your site regardless of those elements.

  2. Next, enable the sidebar widgets by adding the following code after the previous function:
    // 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' );

    If you don’t include this, the widgets menu link will not be visible in the admin control panel, and you won’t be able to add any widgets.

  3. Then, register a custom navigation menu to allow the use of the Appearance -> Menu feature. Type the following code after the previous ones:
    // 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' );
  4. Save & Close the file.

sidebar.php

get_sidebar() allows the sidebar and widgets to appear in your theme wherever. Do so by inserting the following code on the sidebar.php file. Then, save the changes.

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

The first line tells WordPress that if no widgets are enabled, the sidebar HTML must not be shown. The second sets the attributes of the element that contains the widgets. The third line is the WordPress function to display the widgets. The last line closes the initial if statement.

To easily navigate between posts and pages, open the admin control panel and add the Pages and Recent Posts widgets to the sidebar.

4. Building A Layout with Templates

Now we will move on to creating the layout of your WordPress theme by modifying the header.php, index.php, footer.php, single.php, page.phpstyle.php files using the media queries.

header.php

header.php will define the very top of our document. It should have:

  • The DOCTYPE declaration – tells your web browser how to interpret the document.
  • The language_attributes() function – enters the code for the language you picked during installation on the opening of the <html> tag.
  • HTML head elements <head></head> – It’s where you store your meta data. They are the <title></title> tag and the is_front_page() as well as the bloginfo() functions within it, the <meta></meta> tag, the <link></link> tag, and the wp_head() action hook.
  • The body_class() function – gives your body the default CSS classes as set by WordPress.
  • The wp_nav_menu () – displays the page navigation menu on your site’s header.

Using Meta Tags

Insert this following meta tag syntax under your title so your website will automatically adjust to smaller screen sizes and viewports.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Once added, you’ll have a cross-browser compatible and mobile responsive site.

So, the final header.php file looks like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo('name'); ?> &raquo; <?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' ) ); ?>

If you want to use a logo as the header, replace <?php bloginfo(‘name’); ?> with your image code inside the <header> tags.

index.php

The index.php file defines the homepage. It’ll also be used as the default layout if specific templates such as single.php and page.php are not found.

Use template tags to make sure the header (get_header), sidebar (get_sidebar), and footer (get_footer) code are included on your homepage.  You need to insert the HTML5 semantic elements <section>, <main>, <header> and <article> as well.

Some of the elements will have classes assigned to them, which will be written on the style.css file.

<header></header> tags can be used multiple times on any page and do not specifically refer to the page header. Sections and articles should have the header elements if there’s text inside <h1>,<h2>, etc. If a section or article has no header text, they can be left out.

To display a list of posts and their excerpts with more template tags, you’ll need to use the WordPress loop. So, the final syntax on the index.php file should look 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(); ?>

From the code above, the loop starts at <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> and ends at <?php endif; ?>. The following template tags are used inside the loop:

  • <?php the_permalink(); ?> – outputs the correct URL of the actual post.
  • <?php the_title_attribute(); ?> – displays the title of the post in a safe format for the title attribute of the link.
  • <?php the_title(); ?> – shows the title of the post.
  • <?php the_author(); ?> – outputs the name of the author.
  • <?php the_excerpt(); ?> – carries out the excerpt of the post, which is auto-generated if you don’t write your own.

Once you’ve saved the file, you will see a very plain looking page when you reload your site.

A plain page of your website after the basic theme template files are applied.

We’ll learn more about WordPress template tags and loop later.

footer.php

Here is where you should define the footer of every page. It closes any <body> and <html> tags that are still open from the header.php file. If you don’t create a footer.php file, you will notice the admin bar is missing when you visit your homepage, posts, or pages as an admin.

Define your footer using the HTML5 semantic element <footer></footer>. To ensure any final WordPress code and JavaScript is added to the page, it must include the wp_footer() action hook as well.

<footer>
      <p>Copyright &copy; 2019</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

Once you’ve saved the footer.php file, any open HTML tags in other template files are closed.

We’ll learn more about the action hook later at the end of this tutorial.

single.php

The single.php file dictates the layout of a single post on your website. It can be completely different from the index.php.

Here, we will use the_content() function to display the full post. However, we will not add the sidebar to the posts and will remove the link on the title as well.

The full code should look 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 saved, you’ll see that your posts will be displayed as a single page without a sidebar.

page.php

page.php delivers the way pages are displayed. It can be different from the index and the post layout, as well.

Remember that if the page.php file doesn’t exist, the index.php template is used instead. Your website pages will not use the same layout as the one used in the single.php file.

To make the differences more visible, we will once again add the sidebar to this layout, and make the page content takes 70% of the page width. Add the following code to your 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(); ?>

Once saved, you’ll have a dedicated layout for your pages.

style.css

This file is the main stylesheet for your WordPress site. It aims to control the design and layout of your website. Add the following syntax to the bottom of the 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, this will make various boxes to have a white background and blue border.

Experiment by changing the CSS styles and widths. Then, see how your theme responds to various situations.

Now that you have the necessary templates and a stylesheet, you can easily navigate through your posts and pages. Your newly created WordPress theme should look like this.

The final preview of the theme after applying some CSS rules.

Using Media Queries

The media queries feature in your CSS stylesheet, define the rules that dictate the page presentation when the viewport is changed. You can set it for any media type, such as the width of a div when opened on different browsers.

Let’s say you have two side-by-side text boxes that take up 50% of the screen. As the browser window gets smaller, the boxes automatically adjust to take up 50% of the window instead of disappearing off the side.

If the browser window gets too small to display all the text in those boxes properly, you can make them take up 100% of the window size and show one on top of the other.

Since our basic layout has two inline boxes on the front-page, we can easily change the way they behave when the browser window is too small to display the text.

So, we will change the width of the posts when the browser window is below 800px. Instead of having two side-by-side posts, each one will have its own line.

For this purpose, we’ll use some media-feature rules, such as:

  • max-width – dictates the maximum width of the browser’s viewable area
  • min-width – determines the minimum width of the visible area
  • orientation – tells whether the screen is in portrait or landscape mode

See the full list of media features on the Mozilla Developer Network website.

We will first write a media query that affects the .article-loop class. It’ll state that if the width of the browser window is smaller than 800px, the .article-loop class should use 99% of the available space. So, the media query should only affect screens and browser windows that are 800px or less in width.

Under the end of the .article-loop class, write the following:

@media screen and (max-width: 800px) {
  .article-loop {
    width: 99%;
  }
}

Once saved, go to the homepage of your website. Change the size of your browser window, and as it passes 800px in width, you will see the boxes for each post change and drops one below the other.

The next media query we will add is similar to the one above. It tells the main content and the sidebar to take 100% of the available space, and the sidebar will drop below the main content when the browser window is smaller than 600px wide. This would be an appropriate layout for a mobile device where space is limited.

Here’s how the syntax should look like:

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

You can place media queries anywhere in the stylesheet – put all of them at the bottom, or write specific media queries to particular items right below the original definition. However, if they affect different classes that are in different places, it’s recommended to place it at the bottom of the stylesheet.

Save the style.css file. Then, go back to your homepage and resize the browser window until you see the content take up 100% of the width and the sidebar drop below the main content.

Change the rules for the media queries to fit your needs, and see if there are better rules that can be defined.

Understanding WordPress Template Tags, Loop, and Action Hooks

To fully integrate your theme with WordPress, you must use template tags, loops, and action hooks.

Template Tags

Template tags are PHP functions provided by WordPress to easily include template files from your theme in another file or to show some information from the database.

Let’s say you want to show the footer on the home page but not on any other page, add get_footer() at the bottom of the index.php file, but not in the page.php file.

Below are two brief lists of some essential template tags to give you an idea of the ones that are available.

Template tags to include template files:

  • get_header() – includes the header.php template
  • get_sidebar() – calls the sidebar.php template
  • get_footer() – addresses the footer.php template
  • get_search_form() – includes the searchform.php template

Template tags to display information from the database:

  • bloginfo() – displays information requested as a parameter, such as bloginfo(“name”) that shows the name of your website.
  • single_post_title() – presents the title of the currently viewed post when used in single.php
  • the_author() – shows the author of the currently viewed post
  • the_content() – outputs the main text of a post or page
  • the_excerpt() – displays the excerpt of any posts or pages

See the full list of WordPress template tags on the official WordPress codex.

Some template tags must be used in the loop.

The WordPress Loop

WordPress Loop is a set of code that retrieves any requested posts. The HTML that you write within the loop will be used to display every post requested by the loop on one single page – either it’s a single post or all of your published posts. The code continues looping until it reaches the final post.

The loop is a multi-line shorthand if-then statement made up of four lines of code. The first line states that if a post is found, use the following code to display the post.  If no matching post is found, you can define a replacement text instead.

The default WordPress example looks like this, and the commented line is where your HTML and template tags are written:

<?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; ?>

Let’s say you want to display one post, use the the_content() template tag inside the loop to show the content of the post. Meanwhile, if you want to display a list of all published posts, you can use the_excerpt() inside the loop, so that the entire post content is not shown.

Action Hooks

Action hooks are PHP functions provided by WordPress that usually have other functions attached to them. It has some core WordPress functions that add other HTML code to pages and allow plugins to attach their own functions as well.

In your theme’s header template, the wp_head() action hook is called to include the default HTML WordPress header inside the <head></head> tags. In your themes footer section, the wp_footer() action hook is called to include the default HTML and JavaScript, and run any functions attached to it by plugins.

If you do not use the action hooks when you create a WordPress theme, some important core code will be missing, and plugins will not be able to function correctly.

For example, not calling wp_footer() in your footer.php template will stop the top Admin bar from appearing when you are logged in as an admin. The core WordPress code that shows the admin bar is attached to the wp_footer() action hook, and the attached functions can’t run if the action hook doesn’t exist.

Once you’ve successfully built a theme, try to create a WordPress child theme for it.

Conclusion

WordPress themes allow you to modify your website’s looks. If you know how to code, you can make your own theme that suits your needs.

Let’s recap the steps to create a Responsive WordPress theme for your website:

  1. Storing Your Theme and Its Files
  2. Creating the Templates Files and the CSS Stylesheet
  3. Customizing the functions.php and sidebar.php Before Starting the Development
  4. Building A Layout with Templates

Make sure you use meta tags and media queries to create a responsive design. What is more, integrate your theme with WordPress template tags, loop, and action hooks to generate your website’s information.

Congratulations! You have just created your first responsive WordPress theme!

The Author

Author

Liam Carberry / @liamcarb

Liam is a WordPress fanatic that loves to write about web development and coding. When he's not working, he likes to help people create websites and applications. In short, his job is also a hobby!

Related tutorials

Author

Patrick Reply

September 12, 2018

Hi Liam, Clear tutorial. Just one (minor) thing: You are not triggering/executing the add_normalize_CSS function. So adding that to functions.php is quite useless now. ;-)

Author

Imam Uddin Reply

April 21, 2019

Really useful post especially for the beginner. Thanx a lot.

Author

Mayur Hirani Reply

August 27, 2019

Thanks much to you for such an awesome blog. Thanks for your valuable information about wordpress theme. Feel free to visit to know more information about best premium wordpress themes and wordpress theme So Please Visit Our Website: https://www.beingwp.com/

Author

MLA Web Designs Reply

December 05, 2019

well worth a read, got great insights and information from your blog. Thanks!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a part of Hostinger now!

More in WordPress
How to Translate WordPress Websites: A Step-By-Step Guide
Close