Dans un précédent article je vous avais parlé du fichier theme.json
.
Le fichier theme.json
de votre thème Business Directory est le seul fichier obligatoire.
Mais votre thème peut contenir d’autre sortes de fichier, d’abord le fichier styles.css
qui contiendra vos styles CSS pour modifier l’aspect du plugin, et pour ce qui nous intéresse aujourd’hui plus particulièrement : des fichiers javascript et/ou un fichier theme.php afin d’initialiser des routines ou des hook wordpress.
Dans cet exemple je vais vous montrer comment créer un thème BD avec un affichage en onglets pour les commentaires et le formulaire de contact de la page d’annonce seule.

Il est important de noter que pour introduire du javascript ou jQuery dans Business Directory la création d’un thème est obligatoire.
Afin que ce thème fonctionne correctement, vous devrez cocher les options « Inclure les formulaire de commentaires sur les pages annonces ? » et « Activer le formulaire de contact sur la page d’annonce ? » dans l’administration des options du Plugin Business Directory pour WordPress.
Je vous rappelle, que ma traduction FR et complète à 100% du plugin est en vente dans la boutique : Traduction FR pour Business Directory.
L’arborescence du thème pour Business Directory
Ici notre thème s’appelle tout simplement « onglets » donc notre dossier de départ également :
onglets/ onglets/theme.json onglets/theme.php onglets/thumbnail.png onglets/assets/ onglets/assets/styles.css onglets/assets/vendor/tabs.js onglets/templates/ onglets/templates/single.tpl.php
Le fichier theme.json
Pour créer nos onglets nous aurons besoin d’indiquer dans le fichier theme.json
que nous allons utiliser les fichiers tabs.js
et styles.css
pour l’apparence de nos onglets :
"assets": { "css": [ "styles.css" ], "js": ["vendor/tabs.js"] }
Nous devrons également indiquer dans le fichier theme.json
que nous allons utiliser les variables de thème à un autre endroit que celui prévu à l’origine par le plugin.
Voici la liste des variables de template supportées par le plugin :
Nom | DESCRIPTION |
---|---|
contact_form | Code HTML formulaire pour envoyer un message privé au propriétaire de l’annonce |
comments | Code HTML liste des commentaires de l’annonce. Utilise le template comments_template() . |
googlemaps | Code HTML pour afficher la Google Map associée à l’annonce. |
reviews | Code HTML pour afficher les critiques de l’annonce et le formulaire pour poster une nouvelle critique. |
Dans notre exemple, nous allons nous servir des variables contact_form
et comments
qui sont utilisées par la version gratuite du plugin (Alors que googlemaps
et reviews
sont elles utilisées par des add-on payants). Nous voulons les afficher dans des onglets sur la vue détaillée d’une annonce et donc les appeler dans le fichier single.tpl.php de notre thème :
"template_variables": { "single": ["comments", "contact_form"] }
En résumé, voici comment construire le fichier theme.json
:
{ "name": "Glink Onglets", "description": "Thème avec Onglets, classic et élégant", "version": "1.0.0", "author": "Glink.fr", "author_email": "contactez-moi@glink.fr", "author_url": "https://www.glink.fr", "template_variables": { "single": ["comments", "contact_form"] }, "requires": "4.0", "assets": { "css": [ "styles.css" ], "js": ["vendor/tabs.js"] }, "suggested_fields": [] }
Le fichier theme.php
La fonction du fichier theme.php
est d’initialiser des routines ou des hook dans wordpress ou Business Directory. Actuellement 2 sortes de hook sont supportés :
init
: appelé quand le système du thème a été initialisé.enqueue_scripts
: appelé quand les ressources pour la page courante sont mises en queue.
Dans notre cas nous auront besoin du fichier theme.php
pour appeler le script jQuery jquery-ui-tabs
qui permet d’afficher les onglets (Ce script est déjà inclus dans WordPress, il suffit de l’appeler). Voici comment construire le fichier theme.php
:
<?php function wpbdp_themes__onglets_enqueue_scripts() { wp_enqueue_script( 'jquery-ui-tabs' ); }
Notez bien la construction du nom de la fonction : wpbdp_themes__lenomdemontheme_enqueue_scripts()
Notez aussi que nous ne fermons pas la balise php à la fin du fichier.
Le fichier single.tpl.php
Dans certains cas il vous faudra créer un modèle de page spécialement pour la page d’affichage de BD dans votre thème wordpress afin de ne pas afficher 2 fois les commentaires et/ou cocher l’option « Inclure les commentaires BD appelé » dans les options BD :
Le fichier styles.css
Notez que je ne partage avec vous que le CSS des onglets. Pour obtenir un thème complet premium pour Business Directory rendez-vous dans la boutique ou commandez le sur la page de contact.
Le fichier tabs.js
Exemple de rendu HTML



Téléchargez le thème Onglets
TELECHARGEZ ICI GRATUITEMENT LE THEME BD ONGLETS
Conclusion
À présent, vous savez comment incorporer du javascript ou des fonctionnalités jQuery à votre thème Business Directory.
N’hésitez pas à me contacter si vous avez des questions.