Introduction

WordPress themes are a set of files that define the layout of your site. A theme includes HTML, PHP and CSS, and also often uses JavaScript / jQuery.

In this WordPress tutorial, you will learn how to create a WordPress theme using HTML5, CSS3 and responsive design principles. You will also learn how to separate the different parts of your theme into “templates”.

Themes,  like plugins, are separate from the main WordPress code. Themes allow your website to have a consistent layout for each page and article and can be edited quickly to change the look of your site. To display information from WordPress or the content of an article, you must use template tags provided by WordPress, and this will be explained in this tutorial.

After completing this tutorial, it is recommended to follow the tutorial on how to create a WordPress child. The theme you create in this tutorial will give you a good foundation to use in the child-themed tutorial.

Summary

  • What you will need
  • What is HTML5 and why should you use it?
  • What is responsive design?
  • Step 1 – Save your theme and files
  • Step 2 – Creating Template Files and CSS Style Sheet
  • Step 3 – Before you start developing
  • Step 4 – Creating a layout with templates
  • Understand WordPress template tags and action hooks
  • Conclusion

What you will need

  • Text editor
  • FTP access to your hosting account
  • A functional WordPress installation

To complete the steps of this WordPress theme development tutorial, you will need a text editor such as  Notepad ++  or NetBeans. You will also need FTP access to your hosting account and a  functional WordPress installation running.

It is also recommended to download the CSS cheatsheet and consult it since in this tutorial you will edit the style.css WordPress file.

What is HTML5 and why should you use it?

HTML5 is the latest version of the HTML Web markup language and offers an excellent set of modern features that make it easier to display your content on any computer, laptop, tablet or mobile phone.

The biggest change is that there is a new set of semantic HTML elements. For example, the footer of any HTML page can now be set using the <footer> </ footer> element, which tells the browser that the content is in the footer/footer of the page. page. In older versions of HTML, footer content was created using generic elements such as  <div> </ div>  .

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> Year Article </ h2> 
          </ Header>
          <p class = "inline-text-box"> Right </ p> <p class = "inline-text-box"> Right </ p>
        </ Item>
      </ Section>
    </ Main>
    <Footer>
        <p> Copyright & copy; 2017 </ p>
    </ Footer>
  </ Body>
</ Html>

What is responsive design?

A responsive design means that your website is automatically displayed in the best format for the visitor depending on the size of its screen. The layout of the page “responds” literally to the available space on the visitor’s screen. The content is placed perfectly so that nothing is cut off, nothing overflows the screen, and your website is as clean as possible.

What is responsive design?

You should think of the layout of your website as a series of grids and give the content a percentage of the grid’s width. For example, a div could take up 50% of the available space, rather than having a width of 800 px. A fullscreen page width takes up 100% of the available space, so if you want to have four equitable online divs, each will get 25% of the space.

For images, you can set them to have a  maximum width of  100% of their actual size and set the height to  auto . When the image container is minimized, the image automatically decreases in width and height.

For images, using the width: 100%  instead of the max-width: 100%  will cause an image to occupy 100% of the available space instead of stopping at its actual width in pixels. If the image is 200px wide, but in a div that takes up 100% of the screen, the maximum width means that the image will never be larger than 200px wide.

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

For the WordPress theme to be fully responsive, you can also use a CSS3 function called media queries (or media queries). In media queries, you can optionally define a  media type to assign (screen, print, etc.) at least one media function (max-width, orientation, etc.). The media features can be chained using the word key and.

/ * Media Type and Media Feature and Media Feature * /
@media only screen and (max-width: 400px) and (max-width: 800px) {
  .inline-text-box {
    width: 100%;
    display: block;
  }
}
/ * Media Feature Only * /
@media (max-width: 1200px) {
  .inline-text-box {
    width: 50%;
  }
}
  • In the first example, the CSS will be applied to any screen (monitor, phone, etc.) that has a visible width (the area inside the browser, not the entire window) between 400px and 800px.
  • The second example will be applied to any type of media.
  • Another type of media is “print”, which means that CSS is only applied if the user is looking at a print preview of your page.

A complete list of media types and multimedia features is available on the  Mozilla Developer Network website  .

In your CSS style sheet, you define the rules for changing the content, what content is changed, and how that content is changed. You can change any CSS attribute in this way, such as the width of a text box or the background color of a div. Some examples of priority media feature rules:

  • max-width – the maximum width of the visible area of ​​the browser, wider than this one and the rule will not be applied
  • min-width  – the minimum width for the visible area, less than this, and the rule is not applied
  • orientation  – if the screen is in portrait or landscape mode

A common example is when you have two boxes of text side by side so that each takes 50% of the screen. <