Category: wordpress

WordPress verkort bericht met een thumbnail

Met WordPress is het mogelijk om een overzicht van verkorte berichten weer te geven. Dat kan bijvoorbeeld door de opdracht ‘the_excerpt()’ te gebruiken in plaats van ‘the_content()’ om de eerste paar woorden van een bericht te laden in plaats van het hele bericht.

Een andere manier is om van een bericht alleen een (door de schrijver geselecteerde) afbeelding te laden. Bij het schrijven van een bericht kan aangegeven worden welke afbeelding gebruikt moet worden als ‘thumbnail’. Standaard is deze optie niet aanwezig in WordPress. Om deze optie te activeren hebben we een extra php-bestand nodig: ‘functions.php’.

In ‘functions.php’ worden alle aanvullende functies beschreven die niet standaard bij een thema horen. We maken een nieuw (leeg) php bestand en slaan dat op als ‘functions.php’.

In ‘functions.php’ schrijven we de opdracht om thumbnails te ondersteunen:

<?php add_theme_support( ‘post-thumbnails’ ); ?>

Nu kunnen we in onze homepage (index.php) de thumbnails gebruiken. Eerst hebben we de standaard post-loop nodig om alle bericht informatie te laden. In onderstaand voorbeeld worden de berichten geladen een div met id-naam ‘berichten’.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
           the_post(); 
           endwhile; ?>
     </div>
</body>

Als het bericht geladen wordt willen we alleen de titel van het bericht en de door de schrijver geselecteerde thumbnail zien. Omdat de gebruiker de mogelijkheid moet hebben om door te kunnen klikken naar het volledige bericht, plaatsen we de titel en de thumbnail samen in een a-tag met de class-naam ‘bericht_thumbnail’. We gebruiken de WordPress opdracht ‘the_permalink()’ om te linken naar het bijbehorende bericht.

Let op! We gebruiken nu html en php door elkaar. Vergeet dus niet de php-tags op de juiste plaats te openen en te sluiten. Eerst maken we de knop (a-tag).

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post(); ?>
          <a class=”bericht_thumbnail” href=”<?php the_permalink(); ?>”>
          </a>
     <?php endwhile; ?>
     </div>
</body>

Vervolgens plaatsen we in de knop een h4-tag met daarin de titel van het bericht en een thumbnail (die automatisch in een img-tag geplaatst zal worden).

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post(); ?>
          <a class=”bericht_thumbnail” href=”<?php the_permalink(); ?>>
               <h4><?php the_title(); ?></h4>
               <?php the_post_thumbnail() ?>
          </a>
     <?php endwhile; ?>
     </div>
</body>

We hebben nu een aanklikbare thumbnail. Als de thumbnail aangeklikt wordt, wordt de gebruiker doorverwezen naar het volledige bericht. Standaard gebruikt WordPress het bestand ‘index.php’ om het bericht te tonen. Om het bericht een eigen opmaak te geven is het bestand ‘single.php’ nodig.

WordPress bericht in aparte pagina vertonen

Single post layout

In WordPress wordt content vaak geplaatst door gebruik te maken van posts/berichten. Bij het plaatsen van veel korte berichten is dat geen probleem, maar als je regelmatig langere berichten wilt plaatsen wordt je website al snel onoverzichtelijk. WordPress heeft daarvoor de oplossing om berichten verkort weer te geven. Er wordt een verkorte weergave van het bericht geplaatst met een link naar het volledige bericht. Het volledige bericht wordt als een aparte pagina geladen.

Er is maar een kleine aanpassing nodig om in plaats van een volledig bericht een verkort bericht te laden. In plaats van de functie ‘the_content()’te gebruiken voor het plaatsen van het volledige bericht, wordt de functie ‘the_excerpt()’ gebruikt voor het plaatsen van de verkorte tekst.

In onderstaand voorbeeld plaatsen we de volledige berichten in een div met de id ‘berichten’.

<body>
 <div id=”berichten”>
          <?php while ( have_posts() ) :
                    the_post(); ?>
                    <div class=”post”>
                         <h1><?php the_title(); ?></h1>
                         <p><?php the_content(); ?></p>
                    </div>
               <?php endwhile; ?>
     </div>
</body>

Om in plaats van volledige berichten, verkorte berichten te plaatsen is een kleine aanpassing nodig: We vervangen de functie ‘the_content()’ voor de functie ‘the_excerpt()’:

<body>
 <div id=”berichten”>
          <?php while ( have_posts() ) :
                    the_post(); ?>
                    <div class=”post”>
                         <h1><?php the_title(); ?></h1>
                         <p><?php the_excerpt(); ?></p>
                    </div>
               <?php endwhile; ?>
     </div>
</body>

Als we een verkorte weergave van het bericht gebruiken hebben we ook een link naar de volledige versie nodig. Hiervoor gebruiken we de titel van het bericht. In de h1-tag plaatsen we een a-tag die linkt naar het volledige bericht. Het link adres naar het volledige bericht laten we WordPress zelf maken met de functie ‘the_permalink()’.

<body>
 <div id=”berichten”>
          <?php while ( have_posts() ) :
                    the_post(); ?>
                    <div class=”post”>
                         <h1><a href=”<?php the_permalink(); ?>” ><?php the_title(); ?></a></h1>
                         <p><?php the_excerpt(); ?></p>
                    </div>
               <?php endwhile; ?>
     </div>
</body>

Bij het aanklikken van de de titel wil WordPress de volledige post op een aparte pagina vertonen. De opmaak voor die pagina moet  wel omschreven worden. Standaard wordt voor de opmaak van het enkele bericht gebruik gemaakt van ‘index.php’. Om een bericht een eigen opmaak te geven kunnen we een nieuw php-bestand maken met de naam ‘single.php’.

Omdat we nu een enkel bericht laden is de post-loop niet langer nodig. Alleen het gevraagde bericht wordt vertoond:

<body>
     <div id=”enkel_bericht”>
              <? php the_post(); ?>
               <h1> <?php the_title(); ?> </h1>
               <p> <?php the_content(); ?> </p>
     </div>
</body>

Het complete thema bestaat nu uit 3 bestanden: ‘index.php’, ‘single.php’ en ‘style.css’.

WordPress post-loop filteren

We hebben in een ander voorbeeld gekeken hoe we berichten verschillend vorm kunnen geven door de categorie van het bericht te gebruiken als css-class. Dat geeft al aardig wat mogelijkheden voor het vormgeven van de berichten, maar het is erg lastig om met die methode berichten op verschillende plaatsen binnen een pagina te plaatsen.

Standaard maakt WordPress gebruik van een opdracht die alle berichten uit de database haalt en ze binnen je pagina plaatst. In onderstaand voorbeeld worden alle berichten binnen een div geplaatst met de class ‘post’. De titel van het bericht wordt binnen een h1-tag geplaatst en de content van het bericht binnen een p-tag.

<body>
<div id=”content”>
     <div id=”producten”>
          <?php while ( have_posts() ) : 
                    the_post(); ?>
                    <div class=”post”> 
                         <h1><?php the_title(); ?></h1>
                         <p><?php the_content(); ?></p>
                    </div>
               <?php endwhile; ?>
     </div>
</div>
</body>  

Als we een filter toevoegen aan de opdracht om berichten te plaatsen is het mogelijk om niet alle berichten te plaatsen, maar een selectie van berichten te maken. In onderstaand voorbeeld worden alleen berichten geplaatst met de categorie “producten”.

<body>
<div id=”content”>
     <div id=”producten”
          <?php query_posts(‘category_name= producten’);
               while ( have_posts() ) : 
                    the_post(); ?>
                    <div class=”post”> 
                         <h1><?php the_title(); ?></h1>
                         <p><?php the_content(); ?></p>
                    </div>
               <?php endwhile; ?>
     </div>
</div>
</body>  

Deze opdracht om berichten te plaatsen kun je verschillende keren gebruiken, steeds met een ander filter. Bijvoorbeeld om links op een pagina producten te vertonen, en rechts op de pagina nieuwsberichten te plaatsen. In onderstaand voorbeeld wordt de opdracht om berichten te plaatsen 2 keer herhaalt. Het enige verschil is de categorie-naam die gefilterd wordt.

<body>
<div id=”content”>
     <div id=”producten”
          <?php  query_posts(‘category_name= producten’);
               while ( have_posts() ) :
                    the_post(); ?>
                    <div class=”post”>
                         <h1><?php the_title(); ?></h1>
                         <p><?php the_content(); ?></p>
                    </div>
               <?php endwhile;  ?>
     </div>
     <div id=”nieuws”>
          <?php query_posts(‘category_name= nieuws’);
               while ( have_posts() ):
                    the_post(); ?>
                   <div class=”post”>
                         <h1><?php the_title(); ?></h1>
                         <p><?php the_content(); ?></p>
                    </div>
               <?php endwhile; ?>
     </div>
</div>
</body>

WordPress custom Field gebruiken als css class

Bij het schrijven van een bericht is het mogelijk om een aantal extra gegevens toe te voegen aan het bericht. Standaard kan voor een bericht een datum, categorie en tags ingevuld worden. Maar er zijn meer mogelijkheden. Door gebruik te maken van Custom Fields is het mogelijk zelf invul vensters toe te voegen aan een bericht. Ga hiervoor naar de ‘Screen Options’ en vink ‘Custom Fields’ aan.

Er verschijnt nu een invul veld met de titel Custom Fields. Daarin kan een ‘Name’ en een ‘Value’ ingevuld worden. Bijvoorbeeld Name: ‘soort’, value:’fotobericht’. Deze informatie kan door WordPress makkelijk toe gevoegd worden aan een bericht door de opdracht ‘the_meta()’. Deze WordPress functie wordt net als bijvoorbeeld ‘the_content()’ en ‘the_title()’ gebruikt om content te plaatsen. ‘the_meta()’ maakt een ul-tag met daarin li-elementen voor elke Custom Field waarde.

Deze functie is minder geschikt voor het toevoegen van een css-class. We gebruiken wel het Custom Field, maar in combinatie met de opdracht ‘get_post_meta()’. We gebruiken ‘get_post_meta()’ in onderstaand voorbeeld om de value(s) van het Custom Field als css-class toe te voegen. We beginnen met de post-loop om berichten te laden:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
           the_post(); 
           endwhile; ?>
     </div>
</body>

Vervolgens plaatsen we de content van ieder bericht in een div. Let op, de php code wordt onderbroken door html. Vergeet dus niet de php-tag voor de html te sluiten en na de html weer te openen.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?>
          <div>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

De content van ieder bericht wordt in een div-tag geplaatst. Nu willen we de Value van het Custom Field gebruiken als css-class voor de div die ieder bericht verpakt.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

Voordat WordPress de meta gegevens kan laden met de functie ‘get_post_meta()’  moeten een aantal gegevens aan de functie doorgegeven worden:  Van welk bericht moeten de gegevens opgehaald worden:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID()); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

Ook moet aangegeven worden welke meta gegevens opgehaald moeten worden. In dit voorbeeld hebben we in het Custom Field de Name ‘soort’ ingevuld. Door die Name aan de functie door te geven wordt de Value (‘fotobericht’) opgehaald.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID(), ‘soort’); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

De laatste waarde die doorgegeven moet worden aan de functie is of het wel of niet een enkele waarde moet zijn. In het voorbeeld hebben we een Name en een Value ingevuld, het betreft dus een enkele waarde:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID(), ‘soort’, true); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

WordPress bericht-categorie gebruiken als css class

WordPress kent 2 manieren om content te plaatsen; Content die lange tijd niet aangepast hoeft te worden wordt als pagina (page) gepubliceerd, bijvoorbeeld een contact pagina. Content die regelmatig uitgebreid of ge-update wordt, wordt gepubliceerd als bericht (post). Bijvoorbeeld een aanbiedingen pagina van een bedrijf of webshop.

In dit voorbeeld bekijken we hoe we de geplaatste berichten kunnen vormgeven met css. Daarvoor gebruiken we de  categorie van het bericht als css class. Op die manier kunnen berichten met verschillende categories verschillend vorm gegeven worden omdat ze verschillende css classes krijgen. We beginnen met de berichten te laden. Ieder bericht wordt in een div geplaatst met de class-naam ‘post’. Met css kunnen de algemene opmaak van de post beschrijven.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post “> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

De volgende stap is om een extra css-class toe te voegen aan ‘post’. De extra class wordt bepaald door de categorie van het bericht. Zo kunnen berichten verschillende classes krijgen, die we met css verschillend vorm kunnen geven. Eerst wordt een variabel gemaakt (herkenbaar aan $) met de naam ‘category’. Met de functie ‘get_the_category()’ maakt WordPress een lijst van eigenschappen van het bericht. Die lijst wordt opgeslagen in de variabel ‘category’. Met ‘echo’ wordt de opdracht gegeven om het item ‘cat_name’  (van het eerste item) in het html bestand te schrijven.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) :
               the_post();?>
               <div class=”post <?php $category=get_the_category() ; echo $category[0]->cat_name; ?>“>
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

Het is mogelijk om aan een bericht meerdere categorien toe te voegen. Om elke categorie toe te voegen moet de opdracht een beetje aangepast worden.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post <?php foreach(get_the_category() as $category); echo $category->cat_name; ?>”> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

De categorie namen worden nu achter elkaar geplakt als een lange class-naam achter de class “post”. Om de categories van elkaar te scheiden moeten we na elke categorie een spatie toevoegen:

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post <?php foreach(get_the_category() as $category); echo $category->cat_name .” “; ?> “> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

 

 

WordPress menu laden

WordPress heeft twee manieren om via het dashboard content te plaatsen: Als pagina, of als bericht/post. Om een menu te maken die weergeeft welke pagina’s er zijn wordt de opdracht ‘wp_list_pages()’ gebruikt:

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_pages(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Als een website/blog is opgebouwd uit posts/berichten, kan er een menu lijst gemaakt worden waarin bijvoorbeeld de bericht-categories komen te staan. In plaats van ‘wp_list_pages()’ wordt dan gebruik gemaakt van ‘wp_list_categories()’.

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Met de WordPress opdracht ‘wp_list_categories()’ maakt WordPress een menu dat bestaat uit een li met de titel ‘categories’, daarin zit een ul, en daarin zitten li elementen met elk een eigen a-tag. Zo’n ingewikkeld menu is lastig te stylen met css. Daarom geven we WordPress de opdracht om een menu te maken zonder titel (dan blijft er alleen een serie li-elementen over):

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(‘title_li=’); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

WordPress berichten laden

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>

Van html naar WordPress

WordPress is ooit begonnen als blog-tool en uitgegroeid tot een prima middel om volwaardige websites mee te maken. Toch is de blog-structuur nog duidelijk herkenbaar: Het plaatsen van content gaat in principe door het aanmaken van verschillende posts op een pagina.

Voor een wordpress-site zijn minstens 2 bestanden nodig met een verplichte naam: style.css (Hierin staat de opmaak van de website beschreven) en index.php(Hierin staat de opbouw van de website beschreven). Die bestanden kun je met bijvoorbeeld Dreamweaver maken en op de server uploaden met bijvoorbeeld Filezilla. Het is belangrijk dat de bestanden in een map op de goede plaats ge-upload worden. Binnen de WordPress installatie is dat: htdocs/ wp-content/ themes/ map eigen theme.

In een html-pagina staat alle  content vast. Het voordeel van het gebruiken van een cms (conten management system) is dat content opgeslagen wordt in een database. Een cms als WordPress kan met gebruik van php-functies data ophalen en bijschrijven in het html-document. Voor het maken van een originele WordPress website kun je goed beginnen met een html versie van de site. Zo kun je met css het ontwerp goed neerzetten. Vervolgens vervang je de html teksten voor WordPress functies die in de database op zoek gaan naar de juiste informatie.

Als de bestanden ‘index.php’ en ‘style.css’ geupload zijn in de themes-map van WordPress zijn ze via de editor in het dashboard te veranderen. Om te beginnen moet de link naar het ‘style.css’ door WordPress zelf gemaakt worden. WordPress krijgt de opdracht om alle algemene informatie over de website/blog op te halen, en daarvan de ‘stylesheet_url’ te gebruiken.

<head>
<link type=”tekst/css” rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>“/>
</head>

Van de lijst met bloginfo kunnen veel meer gegevens gebruikt worden, bijvoorbeeld de titel van de website/blog. Met onderstaand voorbeeld zoekt WordPress de titel die de gebruiker heeft opgegeven in het dashboard bij de instellingen .

<head>
<link type=”tekst/css” rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>”/>
<title><?php bloginfo(‘name’); ?></title>
</head>

Met de verschillende WordPress functies is zo een hele website op te bouwen. Hier volgt een voorbeeld van een basis pagina met een header, een menu en ruimte om berichten te plaatsen. Deze elementen zijn met css makkelijk vorm te geven. De content die  Wordpress hier  aan toe voegt zal zich automatisch aan je css aanpassen.

<body>
     <div id=”wrapper”>
          <header></header>
          <nav></nav>
          <div class=”berichten”></div>
     </div>
</body>

Aan deze eenvoudige html-structuur kunnen we door WordPress content laten toevoegen. Bijvoorbeeld de titel van onze website in een h1-tag in de header plaatsen:

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav></nav>
          <div class=”berichten”></div>
     </div>
</body>

WordPress heeft twee manieren om via het dashboard content te plaatsen: Als pagina, of als bericht/post. Om een menu te maken die weergeeft welke pagina’s er zijn wordt de opdracht ‘wp_list_pages()’ gebruikt:

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_pages(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Als een website/blog is opgebouwd uit posts/berichten, kan er een menu lijst gemaakt worden waarin bijvoorbeeld de bericht-categories komen te staan. In plaats van ‘wp_list_pages()’ wordt dan gebruik gemaakt van ‘wp_list_categories()’.

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Met de WordPress opdracht ‘wp_list_categories()’ maakt WordPress een menu dat bestaat uit een li met de titel ‘categories’, daarin zit een ul, en daarin zitten li elementen met elk een eigen a-tag. Zo’n ingewikkeld menu is lastig te stylen met css. Daarom geven we WordPress de opdracht om een menu te maken zonder titel (dan blijft er alleen een serie li-elementen over):

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(‘title_li=’); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Om de content toe te voegen is een wat ingewikkelder code nodig. WordPress kijkt in de database of er posts/berichten zijn. Ieder bericht dat gevonden wordt, wordt in de div ‘berichten’ geplaatst.

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav><?php wp_list_categories(‘title_li=’); ?></nav>
          <div class=”berichten”>
               <?php while ( have_posts() ): the_post(); 
                         the_content(); 
                    endwhile; ?>
          </div>
     </div>
</body>

Als WordPress een post/bericht gevonden heeft kan er eenvoudig een titel toegevoegd worden. In onderstaand voorbeeld wordt de titel van het bericht in een h2-tag geplaatst en de content van het bericht vervolgens in een p-tag. Let op, de wordpress/php opdracht wordt onderbroken door de 2 html-tags. De php-tag moet dan ook afgesloten worden voordat de html-tag geplaatst wordt. Na de html-tags wordt er een nieuwe php-tag geopend.

<body>
     <div class=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav><?php wp_list_categories(‘title_li=’); ?></nav>
          <div class=”berichten”>
               <?php while ( have_posts() ): the_post(); ?>
                         <h2> <?php the_title(); ?> </h2>
                         <p> <?php the_content(); ?> </p>
                   <?php  endwhile; ?>
          </div>
     </div>
</body>

Op dezelfde manier is het mogelijk om elk bericht in een eigen div te plaatsen, zodat de berichten gestyled kunnen worden met css. Let op, je kunt geen html en php door elkaar gebruiken. Voordat een html-tag geplaatst wordt moet eerst de php-tag afgesloten worden (en na de html-tag weer geopend):

<body>
     <div class=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav><?php wp_list_categories(‘title_li=’); ?></nav>
          <div class=”berichten”>
             <?php while ( have_posts() ):<?php the_post();?>
<div class=”bericht”>
<h2> <?php the_title(); ?> </h2>
<p> <?php the_content(); ?> </p>
</div>
<?php endwhile;?>
          </div>
     </div>
</body>

Het WordPress thema dat we gemaakt hebben bestaat nu uit 2 bestanden: ‘index.php’ en ‘style.css’. De opmaak van ons WordPress thema kunnen we verder uitwerken in het bestand ‘style.css’.