HTML in de post titel van een WordPress website

Mijn vorige artikel ging over de mogelijkheid om de titel van een WordPress post te gebruiken om een video te embedden. Dat lukte. Wat ik toen nog niet wist was dat ik daarmee ook de post pagina (waar het artikel getoond wordt) totaal in de war had gegooid. HTML in de titel van een WordPress post levert allerlei ongewenste bij effecten op. En dus was ik van plan om de vorige blogpost te verwijderen en af te stappen van het idee. Totdat ik de volgende oplossing werkende kreeg:

Custom post types om HTML in post titels toe te laten

Als eerste heb ik een extra custom post type aan moeten maken binnen de blogpost waar ik html (video embed) code in de titel wil gebruiken. Ik noem die HTML_title en als waarde gebruik ik de code die ik in de titel wil gebruiken: de HTML code. De blogpost zelf krijgt een gewone titel.

Vervolgens ga ik naar de editor van het WordPress thema dat ik gebruik en kies de pagina template waarop ik de html titel wil gebruiken. En daar zoek ik naar de code die bepaalt dat er post titel geladen moet worden. Die ziet er zo uit:

<div class="thumb-overlay portfolio-transition " style="background-color: <?php echo $color; ?>"></div>
<h3 class="thumb-title portfolio-transition "><?php the_title(); ?></h3>

Vervolgens vervang ik die code door de volgende code:

<?php
$html_title = get_post_meta($post->ID, "HTML_title", true);
if ($html_title) { ?>
 <div class="thumb-overlay portfolio-transition " style="background-color: <?php echo $color; ?>"></div>

 <h3 class="thumb-title portfolio-transition "><?php echo $html_title; ?></h3>

 <?php } else { ?>

 <div class="thumb-overlay portfolio-transition " style="background-color: <?php echo $color; ?>"></div>
 <h3 class="thumb-title portfolio-transition "><?php the_title(); ?></h3>

 <?php } ?>

Raar maar waar maar het is klaar…..