In WordPress all the magic happens inside a mysterious thing called “The Loop”. What sounds strange at first is a pretty straight forward thing. You have to imagine you website to be assembled of 4 parts:

  1. The header – usually the top of the website containing the logo and the main navigation
  2. The content
  3. The sidebar – usually secondary navigation and home of optional widgets
  4. The footer

The content is where the loop comes into play. Since a blog consists of multiple entries, we need a way to show them. Fortunately each post is assembled of the same parts – so the same “construction plan” can be used over and over again. Lets have a look onto the content part. This part is stored in the index.php in the root of your template folder.

The Loop

In plain English

in PHP

Now you just need to replace the plain English with PHP and WordPress functions:

styled in CSS

Now your template already works. Now just apply your CSS styles to the elements: