De 10 beste WordPress hacks voor theme ontwikkelaars

Veel van de artikelen hier op mijn blog zijn gericht op beginners. Maar nu het boek WordPress themes maken op de markt is, verwachten veel lezers dat ik ook hier regelmatig wat dieper op de zaken in ga. We trappen af met een artikel over ‘de 10 beste WordPress hacks’, vol met code voorbeelden voor de echte ontwikkelaars. Oh ja, het zijn er iets meer geworden…

Wat is een WordPress hack?

Een hack is eigenlijk niet veel meer dan een stukje programmacode, waarmee je de standaard werking van WordPress iets aanpast. Deze stukjes php-code worden ook wel vaak ‘snippets’ genoemd. Onderstaande voorbeelden zijn bedoeld voor de wat gevorderde gebruiker. Heb je nog nooit eerder aan een theme gewerkt? Dan raad ik je aan om daarmee te beginnen en niet direct de diepte in te duiken. Overigens zijn de voorbeelden hieronder relatief eenvoudig en de meeste kun je direct in de functions.php van je eigen theme plakken. Maar wees gewaarschuwd:

• De stukjes code zijn voorbeelden. Ze werken, maar ik ben niet in staat om iedereen die hier problemen mee ondervindt gratis te ondersteunen. Dat je dat weet… Ik krijg dagelijks mails van lezers die ‘even’ om hulp vragen en ik zou er een dagtaak aan kunnen hebben. Kortom, gebruik de code om er van te leren.
• Op het moment dat er nieuwe WordPress versies uitkomen kan het zijn dat deze voorbeelden niet meer werken. Dat weet je gewoon niet vooraf.
• Het gebruiken van deze voorbeeldcode doe je natuurlijk eerst in een testomgeving en niet op je live website. Gebruik is voor eigen risico!
• Voor veel van deze aanpassingen zijn ook plugins in omloop die hetzelfde resultaat bieden. Voor beginners is dat makkelijker, maar té veel plugins maken je systeem vaak onnodig langzaam. Vooral doordat niet alle plugins altijd even goed geschreven zijn én je altijd functies meegeleverd krijgt die je helemaal niet nodig hebt. Door functies toe te voegen aan je eigen theme voorkom je dit probleem. Nóg beter zou overigens zijn om je eigen plugins te ontwikkelen, maar dan wel het aantal te beperken. Alleen op die manier kun je je code immers eenvoudig meenemen naar toekomstige projecten.

Waar plaats je de code?

Als het goed is heb je inmiddels al wat inzicht in de wijze waarop WordPress werkt en waar theme bestanden geplaatst worden (wp-content/themes/theme-naam). In veel gevallen worden onderstaande voorbeelden gebruikt in de functions.php van je theme. Voor diegenen die weten hoe je met Child themes werkt is dat een nog betere methode natuurlijk, omdat je dan de werking van het oorspronkelijke theme ongewijzigd kunt laten. Er zijn echter ook code voorbeelden die je kunt benutten in je sidebar.php. Nog géén idee over Child themes? Dat artikel staat op de planning…

Uitgelichte afbeelding in RSS feed

Zeker wanneer je je WordPress site als blog inzet is het belangrijk om ook je RSS feed goed voor elkaar te hebben. Het tonen van een afbeelding in je feed geeft net dat beetje extra. Voeg hiervoor de volgende functie toe aan de functions.php van je theme.

add_filter('the_content_feed', 'rss_post_thumbnail'); 
function rss_post_thumbnail($content) { 
   global $post; 
   if( has_post_thumbnail($post->ID) ) 
      $content = '<p>' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</p>' . $content; 
   return $content; }

Wijzig het login logo

Wil je dat gebruikers die inloggen op WordPress jouw eigen logo zien in plaats dat van WordPress? Dit kun je eenvoudig doen door de volgende functie op te nemen in je functions.php.

function my_custom_login_logo() { 
   echo '<style type="text/css"> 
   h1 a { background-image:url('.get_stylesheet_directory().'/images/custom-login-logo.gif) !important; }   
   </style>'; } 
add_action('login_head', 'my_custom_login_logo');

Gebruik hierbij uiteraaard je eigen logo en plaats deze in de images map van je theme.

Toekomstige artikelen

Soms is het slim om je lezers aan je te binden door toekomstige artikelen alvast te noemen. Dit zijn WordPress berichten die je al hebt aangemaakt, die al een titel hebben, maar die nog niet klaar zijn. Het is eigenlijk wel wat voor mijn blog hier, want er staat nog heel wat op de planning de komende maanden. Neem deze code bijvoorbeeld op in je sidebar.php

<div id="futureposts"> 
  <div id="futureposts_header"><p>Binnenkort op deze website</p></div> 
    <?php query_posts('showposts=5&amp;post_status=future'); ?> 
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 
      <div > <p class><b><?php the_title(); ?></b>
      <?php edit_post_link('e',' (',')'); ?><br /> <span><?php the_time('j. F Y'); ?></span></p> 
      </div> 
    <?php endwhile; else: ?>
      <p>Nog geen artikelen gepland.</p>
    <?php endif; ?> </div>

Merk op dat het gebruik van vaste teksten in je code eigenlijk niet netjes is. Meer uitleg hierover in het boek ‘WordPress themes maken‘.

Relatieve paden

Dit is een stukje beginnerscode, maar juist beginners hebben de neiging om verwijzingen binnen hun eigen theme ‘hard’ op te nemen. Dat is niet vestandig, want moet je ooit nog eens van domein wijzigen of wil je je theme ook nog voor andere doeleinden inzetten dan krijg je een probleem. Gebruik daarom het volgende:

<?php get_stylesheet_directory();; ?>

Dat gebruik je bijvoorbeeld als volgt:

<img src="<?php get_stylesheet_directory();; ?>/images/logo.jpg" alt="Logo" /> 

Weg met interne pingbacks

Heb je er ook zo’n hekel aan? Dat je, wanneer je in een bericht een link plaatst naar een andere plek binnen je website, direct een melding daarvan krijgt? Op zich logisch, maar we zetten het toch liever uit!

<?php function disable_self_ping( &$links ) { 
  foreach ( $links as $l => $link ) 
  if ( 0 === strpos( $link, get_option( 'home' ) ) ) 
  unset($links[$l]); } 
add_action( 'pre_ping', 'disable_self_ping' ); ?>

Bonus wp-config settings

Tenslotte nog enkele instellingen die je kunt aanpassen in je wp-config. Zo is het erg handig dat WordPress van elk bericht revisies op slaat, zodat je altijd terug kunt naar een vorige versie. Maar die revisies blijven staan als je er niets aan doet, waardoor je database maar groeit en groeit. Op deze manier doe je er iets aan:

# Maximaal 3 versies # 
define('WP_POST_REVISIONS', 3); 
# Of schakel de post revisions functie helemaal uit  - niet aanbevolen! # 
define('WP_POST_REVISIONS', false);

Ben je je eigen theme of plugin aan het ontwikkelen dan is het essentieel om aan foutopsoring te kunnen doen. Plaats de volgende code tijdelijk in de wp-config om de debug mode in te schakelen:

define('WP_DEBUG', TRUE); 

Nog eentje dan: met onderstaande instelling in de config.php zorg je ervoor dat je prullenbak automatisch geleegd wordt na een x-aantal (hier 5) dagen.

define('EMPTY_TRASH_DAYS', 5 );

Adsense na je eerste artikel

Natuurlijk, voor het gebruik van Adsense zijn er legio plugins in omloop. Maar je kunt ook zelf aan de slag met een stukje code, dat ervoor zorgt dat er een Google Adsense advertentie getoond wordt na het eerste artikel op je blog:

<?php if (have_posts()) : 
  while (have_posts()) : the_post(); $loopcounter++;
    // stop je Google Ad code in de ad.php
    if ($loopcounter <= 1) { include (TEMPLATEPATH . '/ad.php'); }
  endwhile; 
else : 
endif; ?>

Nofollow voor externe links

Met het onderstaande stukje code zorg je ervoor dat links naar externe websites automatisch (allemaal) de ‘nofollow’ tag mee krijgen. Dat is een stuk handiger dan dat handmatig te doen, maar bedenk wel dat wanneer je bewust naar een andere site zou willen linken om de rankings van die site te verbeteren, dat ook die links de nofollow tag mee zullen krijgen. Toch gebruiken omdat je veel externe links aan legt, waarbij je geen ‘link juice’ wilt weggeven? Gebruik dan onderstaande code en plaats het in je functions.php

add_filter('the_content', 'auto_nofollow');
 
function auto_nofollow($content) {
    //return stripslashes(wp_rel_nofollow($content));
 
    return preg_replace_callback('/<a>]+/', 'auto_nofollow_callback', $content);
}
 
function auto_nofollow_callback($matches) {
    $link = $matches[0];
    $site_link = get_bloginfo('url');
 
    if (strpos($link, 'rel') === false) {
        $link = preg_replace("%(href=S(?!$site_link))%i", 'rel="nofollow" $1', $link);
    } elseif (preg_match("%href=S(?!$site_link)%i", $link)) {
        $link = preg_replace('/rel=S(?!nofollow)S*/i', 'rel="nofollow"', $link);
    }
    return $link;
}

Extra class bij post thumbnail

Maak je je eigen theme? Dan is het handig om een extra klasse toe te voegen wanneer de post over een ‘post thumbnail’ (uitgelichte afbeelding) beschikt. Daarmee is het eenvoudiger om vervolgens met CSS je bericht te stylen. Ook deze plaats je weer in de functions.php

function has_thumb_class($classes) {
global $post;
if( has_post_thumbnail($post->ID) ) { $classes[] = ‘has_thumb’; }
return $classes;
}
add_filter(‘post_class’, ‘has_thumb_class’);

Toon reacties van de schrijver op andere wijze

Op een vergelijkbare manier kun je de reacties die de schrijver van een artikel onder een blogbericht plaatst ook een andere klasse meegeven. Op die manier wordt het eenvoudig om weer met CSS de styling aan te passen, bijvoorbeeld door een andere achtergrondkleur te gebruiken.

if($comment->user_id == get_the_author_meta('ID')){
  echo '<div class="comment_wrapper author_comment">';
}else{
  echo '<div class="comment_wrapper">';
}

Geneste reacties of ‘threaded comments’

Standaard gebruikt WordPress geen geneste reacties. Een geneste reactie zorgt ervoor dat je als lezer heel eenvoudig kunt zien wie er op wie reageert. Je kunt dit echter eenvoudig inschakelen. Plaats de volgende code in je functions.php

function enable_threaded_comments(){
 if (!is_admin()) {
  if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1))
   wp_enqueue_script('comment-reply');
  }
}

add_action('get_header', 'enable_threaded_comments');

Javacript of jQuery gebruiken

Schrijf je je eigen javscript of wil je jQuery gebruiken? Let er dan op dat je dit op de juiste manier doet:

$script_url = get_template_directory_uri() . '/scripts/myscript.js';
wp_enqueue_script('myscript', $script_url);

Dit werkt wanneer je een Javacript bestand wilt laden. Wil je echter jQuery gebruiken in je ‘myscript.js’ dan doe je dat iets anders. Doordat jQuery standaard al met WordPress wordt meegeleverd, hoef je alleen nog maar te vertellen dat je het wilt toepassen.

wp_enqueue_script('jquery');
$script_url = get_template_directory_uri() . '/scripts/myscript.js';
wp_enqueue_script('myscript', $script_url, array('jquery'));

[box color=”blue”]Meer weten? heb je de smaak te pakken? Wil je zelf ook leren hoe je een WordPress theme ontwerpt en bouwt? Dan is het boek WordPress themes maken ideaal voor jou! [/box]

Hiermee zijn we aan het eind gekomen van dit artikel met de 10 beste WordPress hacks voor theme Ontwikkelaars. Heb je ook een goede tip? Laat het hieronder weten en wie weet verschijnt jouw code in het volgende artikel!