Er zijn twee veel voorkomende manieren om content te plaatsen met WordPress: door middel van berichten (posts) of door middel van pagina’s (pages). In dit voorbeeld kijken we naar het plaatsen van berichten.
Voor het plaatsen van berichten moet WordPress in de database kijken of er berichten zijn. Daarvoor gebruikt WordPress een while-loop. Een loop is een opdracht die steeds herhaalt wordt.
<body>
<?php while () :?>
<?php endwhile; ?>
</body>
WordPress gebruikt de while-loop om te kijken of er een bericht is in de database.
<body>
<?php while ( have_posts() ) : ?>
<?php endwhile; ?>
</body>
Als dat zo is wordt het bericht geladen. Daarna kijkt WordPress of er meer berichten zijn om te laden enz. De loop stopt pas als alle berichten geladen zijn.
<body>
<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
</body>
WordPress laadt alle berichten uit de database, maar ze zijn nog niet zichtbaar. Laten we de content van de berichten zichtbaar maken door ze in een div met id “berichten” plaatsen. Ieder bericht wordt in een nieuwe p-tag geplaatst.
<body>
<div id=”berichten”>
<?php while ( have_posts() ) : the_post() ;?>
<p><?php the_content();?></p>
<?php endwhile; ?>
</div>
</body>
Als WordPress de gegevens van het bericht geladen heeft met de opdracht ‘the_post()’ kunnen we verschillende delen van de content laden. In bovenstaand voorbeeld wordt de content geladen met de opdracht ‘the_content’. Behalve de content kan ook de titel van het bericht geladen worden. In onderstaand voorbeeld wordt de titel van het bericht geschreven in een h2-tag:
<body>
<div id=”berichten”>
<?php while ( have_posts() ) : the_post() ?>
<h2><?php the_title?></h2>
<p><?php the_content();?> </p>
<?php endwhile; ?>
</div>
</body>
Tenslotte kunnen we de content nog wat beter ordenen door de titel en de content samen in een div met de class-naam ‘bericht’ te plaatsen.
<body>
<div id=”berichten”>
<?php while ( have_posts() ) : the_post() ?>
<div class=”bericht”>
<h2><?php the_title?></h2>
<p><?php the_content();?></p>
</div>
<?php endwhile; ?>
</div>
</body>