Créer des Custom Post Types avec WordPress

Les types de contenu personnalisé ou Custom Post Types constituent la pierre angulaire des architectures sur-mesure pour WordPress. Apparus en 2010, ils sont présents dans le coeur, les extensions et bien entendu les thèmes.

L’usage des Custom Post Types constitue le fer de lance d’une architecture de site efficace sous WordPress. Ne vous limitez plus aux seuls articles et pages pour classer votre information et la présenter à vos visiteurs. Bâtir sa propre architecture de données est la voie royale pour un site efficace et bien référencé.

Notions de base

Par défaut, WordPress est fourni avec deux types de contenus par défaut que sont les articles et les pages. Et bien, sachez qu’il est possible de créer vos propres types – à ne pas confondre avec les modèles de pages WordPress de manière à créer votre propre architecture. Des années après l’écriture initiale de ce tutoriel, ces aspects fondamentaux que sont les types de contenus personnalisés, les taxonomies personnalisées et les champs personnalisés – ce que j’appelle le triptyque architectural, reste méconnu de nombreux prestataires de services.

Ce système est très utile pour des sites qui ont besoin de lister du contenu qui ne sont pas des articles ou des pages au sens sémantique du terme… autrement dit la plupart des sites Web dont voici quelques exemples récurrents :

• Les sites de e-commerce pour vendre leurs produits ;
• Les agences immobilières pour vendre leur biens ;
• Les concessions automobiles pour vendre des voitures ;

Il n’est pas rare par ailleurs de se retrouver avec plusieurs types de contenu personnalisé au sein d’un même site. L’important est que vos données reste bien classées pour permettre un traitement efficace tant d’un point de vue référencement que web-design.

Enfin, sachez qu’aussi bien votre thème que les plugins que vous installez peuvent générer de nouveaux types de contenu personnalisé – visibles ou invisibles dans votre administration.

On retrouvera le même type de présentation du contenu que pour les pages ou les articles. Un exemple ci-dessous avec des petites annonces :

La vue liste est donc similaire à celles que vous connaissez déjà pour les articles et les pages. Les colonnes pourront éventuellement varier selon les projets et vos besoins via une extension comme Admin Columns que j’affectionne tout particulièrement dans sa version professionnelle.

Créer un Custom Post Type par le code (type de contenu personnalisé)

Intégration dans le thème ou dans une extension ?

Avant même de générer le code de notre type de contenu personnalisé se pose la question de son intégration : dois-je l’injecter dans mon thème ou bien dans une extension ?

J’ai souvent eu à débattre de cette question avec des membres de la communauté WordPress mais selon moi c’est dans le thème que vous devriez le laisser et ce, pour les raisons suivantes :

1. Le thème est responsable de l’affichage de vos données et donc des structures propres à votre type de contenu personnalisé : si vous changez de thème, les données s’afficheront comme le gabarit par défaut ;
2. On ne change pas de thème comme on installe ou on désinstalle une extension ce qui me fait délaisser l’argument de séparation entre le contenant et le contenu souvent avancé. Le placement du code dans une extension conservera l’accès aux données mais brisera le point précédent. Notez par ailleurs que la suppression des lignes de code n’efface pas les contenus créés, ils sont toujours stockés en base de données ;

Partant de cette analyse, le tutoriel présenté optera pour le placement dans le thème comme stipulé dans le Codex.

Recours à un générateur en ligne

Nous allons utiliser la fonction register_post_type de WordPress afin d’ajouter cet élément d’architecture. Pour vous faciliter la vie, je vous recommande ce générateur en ligne gratuit de chez GenerateWP bien qu’imparfait sur deux points :

1. La priorité sur le hook devrait être fixée à 10 et non 0 (c’est la dernière ligne du code d’exemple ci-dessous) ;
2. La réécriture d’URL pour avoir le mot-clé dans l’URL n’est pas i18n-friendly autrement dit compatible multilingue ;

Vous pouvez donc le mettre à jour à partir du code que je vous propose.

Localisez ensuite le fichier functions.php présent dans le dossier /wp-content/themes/NOM_DU_THEME/ à l’aide de votre client FTP favori. Je vous déconseille fortement de passer par le menu Apparence puis Éditeur, vous risqueriez de casser votre site à la moindre erreur de virgule.

Si vous utilisez un thème premium, il est impératif de créer un thème enfant sinon vos modifications seront écrasées à la prochaine mise à jour.

Prenez soin de ne jamais rédiger du texte en français dans le code, cela posera des soucis d’affichage avec les caractères accentués. Restez en anglais afin de faciliter le travail de traduction du thème et pour être raccord avec le reste de votre installation WordPress.

Pour les utilisateurs avancés, vous pouvez créer un fichier de fonctions dédié à votre architecture personnalisée. Cela permet de segmenter les fichiers au sein du thème et de faciliter la maintenance au fil des années. Ainsi, mon fichier functions.php occupe une dizaine de lignes que je divise en plusieurs fichiers comme ceci :

<?php if (! defined('ABSPATH')) die('Restricted Area');


require_once(get_template_directory() . '/inc/theme-scripts.php');
require_once(get_template_directory() . '/inc/theme-functions.php');
require_once(get_template_directory() . '/inc/theme-content.php');
require_once(get_template_directory() . '/inc/theme-ajax.php');
require_once(get_template_directory() . '/inc/theme-woocommerce.php');


?>

Il va de soi c’est une pratique personnelle et que les dénominations de fichiers ne suivent aucune logique spécifique à WordPress.

Prenons l’exemple d’un site d’annonces immobilières pour lequel nous souhaitons créer un type de contenu Propriétés. C’est un nom court capable d’englober tout type de biens.

function wpc_cpt() {

	/* Property */
	$labels = array(
		'name'                => _x('Properties', 'Post Type General Name', 'textdomain'),
		'singular_name'       => _x('Property', 'Post Type Singular Name', 'textdomain'),
		'menu_name'           => __('Properties', 'textdomain'),
		'name_admin_bar'      => __('Properties', 'textdomain'),
		'parent_item_colon'   => __('Parent Item:', 'textdomain'),
		'all_items'           => __('All Items', 'textdomain'),
		'add_new_item'        => __('Add New Item', 'textdomain'),
		'add_new'             => __('Add New', 'textdomain'),
		'new_item'            => __('New Item', 'textdomain' ),
		'edit_item'           => __('Edit Item', 'textdomain'),
		'update_item'         => __('Update Item', 'textdomain'),
		'view_item'           => __('View Item', 'textdomain'),
		'search_items'        => __('Search Item', 'textdomain'),
		'not_found'           => __('Not found', 'textdomain'),
		'not_found_in_trash'  => __('Not found in Trash', 'textdomain'),
	);
	$rewrite = array(
		'slug'                => _x('property', 'property', 'textdomain'),
		'with_front'          => true,
		'pages'               => true,
		'feeds'               => false,
	);
	$args = array(
		'label'               => __('property', 'textdomain'),
		'description'         => __('Properties', 'textdomain'),
		'labels'              => $labels,
		'supports'            => array('title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields'),
		'taxonomies'          => array('property_type'),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-admin-home',
		'show_in_admin_bar'   => true,
		'show_in_nav_menus'   => true,
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'query_var'           => 'property',
		'rewrite'             => $rewrite,
		'capability_type'     => 'page',
	);
	register_post_type('property', $args);	
}

add_action('init', 'wpc_cpt', 10);

Vous devez remplacer le textdomain par celui de votre thème en l’identifiant dans une chaine de traduction.

Notez également la présence de l’argument taxonomies à la ligne 32. Il permet de faire le lien entre mon type de contenu personnalisé et ma taxonomie personnalisée.

Voici la liste des paramètres autorisés par la fonction register_post_type.

Créer une Custom Taxonomy par le code (taxonomie personnalisée)

Les taxonomies sont aux catégories et aux étiquettes ce que les types de contenu sont aux articles et aux pages. Par analogie, il est donc possible de générer vos propres taxonomies personnalisées. Là encore, le générateur en ligne de chez GenerateWP va nous mâcher le travail bien que la compréhension des différents arguments disponibles reste essentielle.

Je reprends donc mon exemple avec mes biens immobiliers que je souhaite à présent classer par type (appartements, villas, maisons, châteaux, etc.). On parlera de terme pour évoquer chaque type créé au sein de votre administration.

function wpc_ct() {

	/* Property Type */
	$labels = array(
		'name'                       => _x('Types', 'Taxonomy General Name', 'textdomain'),
		'singular_name'              => _x('Type', 'Taxonomy Singular Name', 'textdomain'),
		'menu_name'                  => __('Types', 'textdomain'),
		'all_items'                  => __('All Types', 'textdomain'),
		'parent_item'                => __('Parent Type', 'textdomain'),
		'parent_item_colon'          => __('Parent Type:', 'textdomain'),
		'new_item_name'              => __('New Type Name', 'textdomain'),
		'add_new_item'               => __('Add New Type', 'textdomain'),
		'edit_item'                  => __('Edit Type', 'textdomain'),
		'update_item'                => __('Update Type', 'textdomain'),
		'view_item'                  => __('View Type', 'textdomain'),
		'separate_items_with_commas' => __('Separate types with commas', 'textdomain'),
		'add_or_remove_items'        => __('Add or remove types', 'textdomain'),
		'choose_from_most_used'      => __('Choose from the most used', 'textdomain'),
		'popular_items'              => __('Popular Types', 'textdomain'),
		'search_items'               => __('Search Types', 'textdomain'),
		'not_found'                  => __('Not Found', 'textdomain'),
		'no_terms'                   => __('No types', 'textdomain'),
		'items_list'                 => __('Types list', 'textdomain'),
		'items_list_navigation'      => __('Types list navigation', 'textdomain'),
	);
	$rewrite = array(
		'slug'                       => _x('type', 'property_type', 'textdomain'),
		'with_front'                 => true,
		'hierarchical'               => false,
	);
	$args = array(
		'labels'                     => $labels,
		'hierarchical'               => true,
		'public'                     => true,
		'show_ui'                    => true,
		'show_admin_column'          => true,
		'show_in_nav_menus'          => true,
		'show_tagcloud'              => false,
		'rewrite'                    => $rewrite,
		'show_in_rest'               => false,
	);
	register_taxonomy('property_type', array('property'), $args);
}
add_action('init', 'wpc_ct', 10);

Voici la liste des paramètres autorisés par la fonction register_taxonomy.

Corriger l’erreur 404

Vous devez obligatoirement mettre à jour vos permaliens via Réglages puis Permaliens dans votre back-office à chaque modification de votre architecture. Si vous oubliez cette étape, vous obtiendrez une page d’erreur 404.

Requêtes pour afficher vos Custom Post Types

Utiliser la template hierarchy de WordPress

Le système de modèles hiérarchique propre à WordPress s’appliquera de la manière suivante pour vos types de contenu personnalisé.

Et un tableau similaire pour les taxonomies personnalisées :

Il vous faut donc créer le fichier correspondant selon vos besoins (présence ou non d’une page d’archive, liaison ou non avec une taxonomie).

Inclure les Custom Post Types sur la page d’accueil

Il vous suffit d’ajouter ces lignes de code, en-dessous des précédentes, dans le fichier functions.php :

function wpc_cpt_in_home($query) {
  if (! is_admin() && $query->is_main_query()) {
    if ($query->is_home) {
      $query->set('post_type', array('post', 'property'));
    }
  }
}

add_action('pre_get_posts','wpc_cpt_in_home');

Inclure les Custom Post Types dans les résultats de recherche

Copiez ces lignes de code dans votre fichier functions.php de sorte que WordPress intègre vos différents contenus dans les résultats de recherche de votre site et pas uniquement les articles. Le type de contenu est à spécifier à la ligne 4 en ajoutant 'post' pour les articles. Vous pouvez également ajouter 'page' pour les pages standards si nécessaire.

function wpc_cpt_in_search($query) {
  if (! is_admin() && $query->is_main_query()) {
    if ($query->is_search) {
      $query->set('post_type', array('post', 'property'));
    }
  }
}

add_action('pre_get_posts','wpc_cpt_in_search');

Récupérer les contenus via WP_Query

Si vous souhaitez récupérer les contenus n’importe où dans votre thème, il nous faut créer une boucle personnalisée de type WP_Query.

Pour effectuer une telle requête, utilisez les lignes de code suivante dans le fichier du thème responsable de l’affichage de la donnée. Cette technique est réservée aux développeurs.

<?php
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

	$args = array(
		'paged'		=> $paged,
		'post_type' => 'property'
		),
	);

	$the_query = new WP_Query($args);
?>

	<?php if ($the_query->have_posts()) : ?>
		<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
			<?php get_template_part('template-parts/content', 'property'); ?>
		<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>
<?php endif; ?>

La ligne 6 doit être modifiée pour correspondre à l’identifiant de votre type de contenu personnalisé.

Un site WordPress bien optimisé disposera de cette architecture personnalisée avec les types de contenu et les taxonomies personnalisés. Bien maitrisé, ce concept vous permettra d’aller très loin dans l’utilisation du système de gestion de contenu qu’est WordPress, notamment sur la partie Search Engine Optimization (SEO). A cela, nous ajouterons les champs personnalisés non évoqués dans ce tutoriel.

Personnaliser les messages de notifications de vos types de contenus personnalisés

À chaque enregistrement de votre contenu, WordPress affiche une notice informative pour confirmer l’opération effectuée. Par exemple, si vous mettez à jour un article, le message suivant apparaît :

Vous pouvez filtrer ces messges avec ces quelques lignes de code :

function wpc_testimonial_updated_messages($messages) {
	global $post;
	if ($post->post_type != 'testimonial') return $messages;

	$post_url	= get_permalink($post->ID);
	$post_url_esc	= esc_url($post_url);
	$post_url_pvw	= esc_url(add_query_arg('preview', 'true', $post_url));

	$messages['testimonial'] = array(
		 0 => '', // Unused. Messages start at index 1.
		 1 => sprintf(__('Testimonial updated. <a href="%s">View testimonial</a>', 'wpchannel'), $post_url_esc),
		 2 => __('Custom field updated.'),
		 3 => __('Custom field deleted.'),
		 4 => __('Testimonial updated.', 'wpchannel'),
		 5 => isset($_GET['revision']) ? sprintf(__('Testimonial restored to revision from %s', 'wpchannel'), wp_post_revision_title((int) $_GET['revision'], false)) : false,
		 6 => sprintf(__('Testimonial published. <a href="%s">View testimonial</a>', 'wpchannel'), $post_url_esc),
		 7 => __('Testimonial saved.', 'wpchannel'),
		 8 => sprintf(__('Testimonial submitted. <a target="_blank" href="%s">Preview testimonial</a>', 'wpchannel'), $post_url_pvw),
		 9 => sprintf(__('Testimonial scheduled for: <strong>%s</strong>.', 'wpchannel'), date_i18n(__('M j, Y @ G:i'), strtotime($post->post_date))),
		10 => sprintf(__('Testimonial draft updated. <a target="_blank" href="%s">Preview testimonial</a>', 'wpchannel'), $post_url_pvw),
	);
	return $messages;
}
add_filter('post_updated_messages', 'wpc_testimonial_updated_messages');

Dans cet exemple, il vous faut remplacer testimonial par l’identifiant de votre type de contenu personnalisé déclaré précédemment via la fonction register_post_type. Pensez également à respecter la casse pour les chaînes de traductions.

Pour terminer, vous devrez mettre à jour le fichier de langues à l’aide du logiciel Poedit ou de l’extension Loco Translate pour opérer les traductions anglaises. Rappelons ici qu’il est fortement recommandé de coder en anglais.

Cela confère une touche plus professionnelle à votre back-office. C’est d’autant plus le cas lorsque les traductions originales sont trop éloignées du nom adopté pour votre type de contenu personnalisé.

Pour tester le bon fonctionnement du filtre, créez ou modifiez une publication et admirez le résultat.