Page enfant/ parent avec les custom post type de wordpress

Sur un projet j’ai eu à gérer des pages parentes et enfants dans wordpress pour des custom post type: le but était de n’afficher que les titres des pages parents et au clic sur le titre afficher dessous les titres des pages enfants.

1 – on suppose que vous avez déjà créé votre custom post type nommé « projet » dans votre fichier function.php en faisant attention à ce que hierachical soit égal à true

La page listant tous les projets est le fichier archive-projet.php

 

Nous venons d’afficher les pages parentes et enfant. Maintenant il nous faut styliser cela puis afficher au démarage seulement les titre des parents

jquery : afficher cacher

Référence : http://codex.wordpress.org/Function_Reference/get_pages

Ajouter un beau hover à la galerie par défaut de WordPress avec jquery

jquery

Pour mon portofolio, j’avais besoin d’améliorer la galerie photo de base de WordPress.
Elle me convenait, toutefois je souhaitais que sur le roll hover apparaisse un fond blanc sur lequel le nom de la référence soit marqué.
L’idée est de récupérer le title de l’image et de le coller dans le h3 d’un div caché qui ne s’afficherait qu’au passage de la souris.

L’exemple se trouve ici : http://webdesign.niums.com/clients/

Pour rappel voilà de quoi est composée la galerie créée par WordPress
.gallery : class de la galerie
.gallery-item : dl : conteneur
.gallery-icon :dt : élément à définir
.attachment-thumbnail : notre miniature

Voilà ce que nous allons y ajouter grâce à jquery
.hide : un div qui contiendra notre texte
h3 : une balise de titre
XXX : notre texte en le copiant depuis la balise title de l’image

Préparons nos fichiers

Nous aurons besoin
– de créer un fichier javascript externe que nous chargerons : site.js
– de modifier le fichier css de wordpress : style.css

Tout d’abord créons un fichier javascript que nous enregistrerons dans un dossier js de notre dossier de thème.

Nous appellerons ce fichier dans le header.php ou le footer.php selon notre convenance : soit avec un chargement en mémoire avec un enqueue soit directement dans le fichier header

Charger les scripts en mémoire : Version wp_enqueue_scripts

Dans le fichier function php, ajoutons le code ci-dessous

Charger directement les scripts dans le header

Si pour une raison ou une autre, le chargement en mémoire ne vous convient pas, vous pouvez aussi charger directement les fichiers dans header.php entre head et /head

Création de notre js

Maintenant que tous nos fichiers sont chargés, nous pouvons créer nos fonctions.

PS : J’ai modifié mon appel à la fonction principale qui se fait lorsque le document est prêt afin qu’on puisse utiliser $() comme alias et cela sans conflit.

Pour commencer, ajoutons la classe wrap à chaque liste de définitions.
Cette class permettra aux listes d’avoir des positions « relative » afin que le futur div .hide, qui contient notre texte, puisse être positionné au-dessus des images car en position « absolute »

Pour infos jQuery peut accepter un second paramètre afin d’écraser le contexte de la sélection

Et si l’image est un descendant direct de l’élément cliqué alors nous pouvons aussi écrire :

En ce qui concerne le css, rien de spécial

Ajoutez le code ci-dessous dans votre fichier style.css

Pour info

Dans WordPress il est possible de choisir le nombre d’images par ligne.
Dans le cas contraire, pour décider du nombre d’éléments par ligne, on pourrait aussi écrire :

Voilà +++