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

Display: HEADER

While there are posts do the loop:
    HEADLINE
    Posted on DATE by AUTHOR
    Filed under CATEGORY
    X Comments
    TITLE IMAGE
    POST CONTENT
End of loop

Display: SIDEBAR

Display: FOOTER

in PHP

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




    
    Posted on  by 
    Filed under

styled in CSS

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




    

        

        

            Posted on  by 
            Filed under