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. As the browser window goes down, the checkboxes automatically adjust to 50% of the width of the window instead of disappearing to the side. If the browser window becomes too small to display all the text in these boxes correctly, you can tell them to take 100% of the size of the window and display it on top of each other. You can also hide the content entirely if this is more appropriate.

Step 1 – Save your theme and files

Making minor changes to a theme can cause errors and make your site unusable. A common problem is that after making changes to your code, you try to load your website and you end up facing WSOD … a blank page what !  Debugging the blank page can be difficult but never impossible.

To avoid disruption to your website, it is important to test all changes on an offline version. Once your changes are complete, you can  download the working version to your website online  . You can learn how to create a  local WordPress development server on Windows here  , a tutorial on how to run WordPress on Docker (any OS) can be found here  .

Let’s start the real tutorial and learn how to create a WordPress theme!

WordPress themes are stored in their own folder in the wp-content / themes folder.

In the wp-content/themes folder, create a new folder named  my-theme  . The folder you have created requires a unique, descriptive, short name so that it can be easily identified.

Note: Theme folder names  must not  contain numbers or spaces. Your theme should not have the same folder name as another theme. If you plan to share your theme, you must verify that another theme with that name has not already been uploaded to the  WordPress.org thematic directory  .

WordPress themes  can  be created with just two files – index.php and style.css – and WordPress will use them to display all the pages and publish on your site.

Realistically, you want articles, pages, and other sections of your website to have their own layout. Each section of your website has a clean file to hold HTML and PHP, which applies only to this section – each file is then called “template”.

If you use custom item types, you can create templates that only apply to items of this type. If you want items in a specific category to be designed differently, you can do it using if … then … in a loop.

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

Some of the template files (other than  index.php )  :

  • header.php  – contains any HTML code at the top of your pages after  <! DOCTYPE html>
  • single.php  – used when displaying a single  Article  of your blog
  • page.php  – used when displaying only one  page  of your blog
  • comments.php  – defines how comments and comment text box appear
  • footer.php  – contains all the HTML that is at the bottom of your pages, including  </ html>

For a complete list of templates, visit the  WordPress Theme Development Manual.

Now that you have a folder to store the theme, you need to create basic template files.

Step 2 – Creating Template Files and CSS Style Sheet

In the my-theme folder, create the following PHP files:

  • header.php
  • index.php
  • footer.php
  • functions.php
  • sidebar.php
  • single.php
  • page.php

In addition to PHP files, create a new CSS file named  style.css  (the main style sheet should be called style.css).

Create WordPress theme filesThe first step after creating all the files is to add information at the top of  style.css,  which WordPress will read and display 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 header keyword.

There are a number of header keywords available to define information such as the author (your name), the author’s website, a description of the theme, the name of the theme, the version of the theme, etc. For the full list of header keywords for themes, visit the  WordPress Codex – File Header page  .

The format for writing headers is  wordkey: 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
URI License: http://www.gnu.org/licenses/gpl-3.0.html
* /

NOTE:   The seventh and eighth lines are only needed if you plan to share your theme on WordPress.org. If you use the theme on your own website, you can skip these two lines and close the comments section.

At this point, your theme is already visible in the theme section of the admin control panel. You will see a white and gray checkered image with  My Theme  written below. Once your theme is complete, you can display a screenshot to display here.

New theme in WordPress admin areaIf you activate the theme at this point, you will get a blank homepage because your  index.php  is empty and no templates exist.

Now, we will add a single rule to the CSS file that changes the background color of the page.

Add a blank line  after  closing comment  * /  on line 10.

On the next line, line 11 of the file, write the following.

* {
  box-sizing: border-box;

}

body {
    background-color: # f9f9f9;
    font-family: Helvetica;
}

The first entry is an important part of the responsive style. *  is a wildcard and corresponds to each class that is in the HTML document. It indicates that the final width and height of each element on the page should  include  content, padding, and a border. If you do not define this and you have two 50% wide boxes that are side by side with a padding or a border, they will not be side by side because their actual size is greater than 100%. A 100% wide box with 1% padding is actually 102% wide, as 1% padding is added to the left and right. This rule actually adds the padding inside the box instead of taking it out.

The second entry simply changes the background color of the blank so that we can quickly see if the style sheet is used. We also define the default font that will be used in our theme.

Step 3 – Before you start developing

Before you start creating your WordPress theme layout, you need to add a few pieces of code to different files to give you a good starting point to support. These steps are not required but are strongly recommended.

These steps will have brief explanations so you can quickly move on to building a layout.

First, we will include a CSS file named  normalize.css. Different browsers have different default settings for page margins and padding. normalize.cs explicitly defines a number of attributes to ensure that all browsers display your page the same way. If you do not use a style sheet to set these default values, a common problem is that when you try to start your main header at the top left of your page, there will actually be a blank space above it. the header.

functions.php

Open  functions.php  and paste the following code

<? Php
// This function queries 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");
}

Then you have to activate the widgets of the sidebar. If you do not include this code, the widget menu link will not be visible in the admin control panel and you will not be able to add widgets. While still in functions.php, below the previous function, add the following code:

// 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');

Now we need to register a custom navigation menu to allow the use of the  Appearance -> Menu function in the admin panel. Below the previous code, add the following:

// 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');

Save  functions.php  and upload it to your theme directory.

sidebar.php

Now open the sidebar.php file and paste the following code. This brings up the sidebar and widgets in your theme wherever  get_sidebar ()  is called.

<? 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 widget is enabled, the HTML sidebar should not be displayed. The second line defines the attributes of the element that contains the widgets. HTML5 provides the ‘aside’ element for sidebars. The third line is the WordPress function to actually display the widgets. The last line closes the initial if statement.

Save and download  sidebar.php  in your theme directory.

To facilitate navigation between articles and pages, open the administration control panel and add the Pages and Recent Articles widgets to the sidebar. Now, let’s move on to the construction of the layout.

Step 4 – Creating a layout with templates

header.php

header.php will define the top of our document, starting with the DOCTYPE declaration.

All HTML documents must begin with a DOCTYPE declaration that tells your browser how to interpret the document. The HTML5 doctype is just  html  . The opening <html> tag needs a language attribute, and WordPress provides a function to enter the correct language code for the language you chose during installation –  language_attributes ()  .

In the title field, you use a line of code that displays the name of your site, followed by an if … then … short-form statement to display your website’s slogan or the title of the current page or article. that you consult.

The character ? is a PHP conditional operator named ternary operator. In this line of code,  is_front_page ()  is a WordPress function that returns  TRUE  if you look at the home page, or  FALSE  if you look at an article or page. The function before the colon is used if  TRUE  has been returned and the function after the colon is used if  FALSE  is returned.

As you will see later, the bloginfo () function is used repeatedly with different settings to get different information from the WordPress database. Before the <head> tag is closed with  </ head>, you will need to include the wp_head () action hook to make sure that all the functions attached to it are executed.

The body_class () function   gives your body the default CSS classes defined by WordPress. The last line displays the navigation menu, if created, in the administration control panel. The last file,  header.php  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 header, replace <? Php bloginfo (‘name’); ?>  the code of your image in the <header> tags   .

Save header.php and upload it to your theme folder.

index.php

index.php  sets the home page and will also be used as the default layout if specific templates (ie  single.php  ,  page.php  ) are not found.

We will use template tags to ensure that the header code (  get_header  ), sidebar (  get_sidebar  ) and footer (  get_footer  ) are included in our homepage.

The WordPress loop will display a list of messages and their snippets with more template tags. We will also use HTML5 semantics  <section>  ,  <main>  ,  <header>,  and  <article>  . Some of our elements will have classes assigned to them and classes will be written when we get to the style.css 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-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 (); ?>
      </ Item>
<? php endwhile; else:?>
      <Article>
        <p> Sorry, no posts were found! </ p>
      </ Item>
<? php endif; ?>
  </ section> <? php get_sidebar (); ?>
</ Main>
<? php get_footer (); ?>

The loop starts at <? Php if (have_posts ()): while (have_posts ()): the_post (); ?>   and ends at <? php endif; ?> Inside the loop, the following template tags are used: 

  • <? php the_permalink (); ?> – output the correct URL of the current article
  • <? php the_title_attribute (); ?> – display the title of the article in a secure format for the title attribute of the link
  • <? php the_title (); ?> – displays the title of the article
  • <? php the_author (); ?> – displays the name of the author
  • <? php the_excerpt (); ?>  – output the excerpt from the message, which is generated automatically if you do not write yours

<Header> </ header> tags   can be used multiple times on any page and do not refer specifically to the header of the page.
Sections and articles  should  have header elements where any text inside  <h1>  ,  <h2>  , and so on. is used. If a section or article does not have header text, they  may  be excluded.

Save  index.php  and upload it to your theme directory. If you visit your site now, you will see a very simple page.

A simple aspect of the new theme created by WordPressHowever, you can see that the title of the tab is the name and slogan of your website. The top of the page has the title of your website (or your logo if you use it instead). All messages that exist have their title, author and excerpt displayed. Although the page is displayed correctly, you should always close the  <body>  and  <html>  tags open in  footer.php  .

footer.php

footer.php  defines the footer of each page and must close all open HTML tags in other template files. In our case,  <body>  and  <html>  are always open from  header.php  .

It must also include the wp_footer () action hook to ensure that any final WordPress and JavaScript code is added to the page. If you were logged in as an administrator when you visited your homepage, articles, or pages, you will notice that the admin bar is missing. The code that displays the admin bar hangs on the wp_footer () action hook.

We will also add the HTML5 <footer> </ footer> semantic element to explicitly define our footer.

<Footer>
      <p> Copyright & copy; 2017 </ p>
    </ Footer>
    <? php wp_footer (); ?>
  </ Body>
</ Html>

Save  footer.php  and upload it to your theme directory.

single.php

single.php  sets the layout when viewing a single article on your site. It can be completely different from  index.php  .

In this case, we will not add the sidebar to the articles simply to highlight the layout difference.

The main content takes the full width of the page as we have given it the full-width class of content of the style sheet. The link has been removed from the title because it is not needed here. The function to view the full article is  the_content ()  :

<? 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 (); ?>
      </ Item>
<? php endwhile; else:?>
      <Article>
        <p> Sorry, no post was found! </ p>
      </ Item>
<? php endif; ?>
  </ Section>
</ Main>
<? php get_footer (); ?>

page.php

page.php  defines how pages are displayed and may be different again relative to index and layout.

Remember that if templates do not exist, the template  index.php  is used instead. If you do not create  page.php  , it will not use the same layout as  posts.php  .

To make the difference more visible, we will once again add the sidebar to this layout and make the page content take up 70% of the width of the page.

<? 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 (); ?>
      </ Item>
<? php endwhile; else:?>
      <Article>
        <p> Sorry, no page was found! </ p>
      </ Item>
<? php endif; ?>
  </ section> <? php get_sidebar (); ?>
</ Main>
<? php get_footer (); ?>

Save  page.php  and upload it to your theme directory.

style.css

Add the following code at the bottom of the style sheet. This will ensure that the different boxes have a white background and a blue border, to allow to visualize the amount of space that each one of them takes.

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

* {
  box-sizing: border-box;

}

body {
    background-color: # f9f9f9;
    font-family: Helvetica;
}
.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;
}

at {
  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%;
}

.A-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

Save  style.css  and upload it to your theme directory.

Now that you have basic templates and a style sheet, you can easily navigate through your articles and pages. Your newly created theme should look like this.

WordPress Thematic Tutorial - Final Theme Look

Using media queries

Since our basic layout has 2 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 correctly.

For this WordPress theme tutorial, we will change the message width in the message list when the browser window is less than 800px. Instead of having 2 messages side-by-side, each article will have its own line. We will do it by adding media queries. If you need a media queries update, see  “What is responsive design?” In  this tutorial before continuing.

When writing media queries, you can write them anywhere in the style sheet. You can put all media queries at the bottom of the style sheet or write specific queries for specific items just below the original definition. It’s just a question of what you think is the most logical thing to do.

We will first write a media query that affects the .article-loop class   , which is 49% wide by default. We will write it directly below the initial definition. Media queries indicate that if the browser window is less than 800px wide, the  .article-loop class  should use 99% of the available space instead.

Next, we’ll write a media query that, when the browser window is less than 600px wide, pushes the sidebar below the main content and extends the main content and sidebar to take 100% width. This would be a much more appropriate layout for a mobile device where space is limited.

Also in  style.css,  find the article loop should be at line 73. below the class .A-loop, write the following:

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

The first line indicates that the media query should only affect the screens (ie not the print preview mode) and only affect browser windows with a width of 800px or less. Save and download  style.css  in your theme directory. Go to the home page of your website. Change the size of your browser window and, as it exceeds 800px wide, you will see the boxes for each change in width and drop one below the other.

Continue to reduce the width of the browser window until it is as small as possible. You will see that all the text becomes harder to read because it has too little space, but at no time does it disappear from the screen. If the widths were defined as widths in pixels instead of percentages, as soon as the window would become too small, the sidebar would disappear and require horizontal scrolling.

The next media query we will add will be similar to the one above. It tells the main content and the sidebar to take 100% of the available space, and the sidebar will fall below the main content.

NOTE:   Since this affects different classes that are in different places in the style sheet, it should be placed at the bottom of the style sheet.

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

Save  style.css  and upload it to your theme directory. Return to your home page and resize the browser window until the content resumes 100% width and the sidebar falls below the main content.

Using the sidebar, click on any available page and you will see that the sidebar is also below the content of the page, and everything fits well.
Understand   WordPress template tags  and  action hooks
To fully integrate your theme with WordPress, you must use template tags and action brackets. These are two distinctly different things.
tags

Template tags are PHP functions provided by WordPress to easily include template files (such as  header.php  ) from your theme into another file or to display certain information from the database.

For example, to display the footer on the home page, but not on another page, add  get_footer ()  at the bottom  of index.php  , but not in page.php.

Below are two brief lists of some important template tags to give you an idea of ​​the available tags.

Tags to include template files:

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

Tags to display database information

NOTE:   Some template tags must be used in the loop. The loop is explained later in the tutorial, and simply means the code that retrieves the requested messages.

  • bloginfo ()  – displays the requested information as a parameter, ie bloginfo (“name”) shows the name of your site as defined in the Administrator Control Panel (  see the list of parameters  )
  • single_post_title () –  display the title of the currently displayed article when used in single.php
  • the_author () –  display the author of the currently displayed article
  • the_content ()  – display the main text of an article or a page
  • the_excerpt ()  – the excerpt from the message or page

The full list of WordPress template tags can be found here.

Action hooks

Action hooks  are PHP functions provided by WordPress that usually have other functions attached to them. Some brackets do not have default functions and exist for plugins. Action brackets allow plugins to attach their own functions and make them work at different times when a page is loaded.

In the template header of your theme, the wp_head () action hook is  meant  to include the default WordPress HTML header in the <head> </ head> tags   . It has some main functions of WordPress to add HTML to the page and allows all the functions that are attached to it by the plugins to execute.

In the footer section of your themes, the wp_footer () action hook is called to include HTML and JavaScript by default, and performs all the functions attached to it by plugins.

If you do not use the action brackets when creating the WordPress theme, an important main code will be missing and the plugins will not work properly.

For example, not calling  wp_footer ()  in your template  footer.php  prevents the top admin bar from appearing when you are logged in as an administrator. The main WordPress code that causes the administration bar to appear is attached to the wp_footer () action hook and the attached functions can not be executed if the action hook does not exist.

For a full explanation of action brackets, read the Actions and Action Hooks section of the WordPress plugins service.

The WordPress loop

The loop is used to display messages. It can be used to display a single article or all your posts on one page. The HTML code you write in the loop will be used to display each item requested by the loop. The code continues in a loop until it reaches the final article.

If you are viewing an article, use the the_content () template tag in the loop to view the content of the article. If you are viewing a list of all published posts, you can use  the_excerpt ()  in the loop instead so that the entire article is not displayed.

The loop is a multi-line shortcut if … then … a statement consisting of four lines of code. The first line indicates that if an item is found, while the item is available, use the following code to view the item. If no matching part is found, you can define a replacement text instead. The default example of WordPress looks like this and the commented line is where your HTML tags and templates 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; ?>

Conclusion

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

Now that you understand the templates and template tags, you should take a look at the list of templates and WordPress Codex template tags , and experiment with adding new sections to the layout. Experiment with changing CSS styles and widths and see how your browser responds to different situations. Modify the rules for media queries and check for better rules that can be set.

if you want to get the wordpress theme development services then feel free to contact with us