Voulez-vous modifier le style du formulaire de commentaires WordPress sur votre site ? Chez WPBeginner, nous avons passé des années à expérimenter différentes façons de stimuler l’engagement des utilisateurs, et nous avons trouvé qu’un beau formulaire de commentaires convivial peut faire une énorme différence.
Les commentaires jouent un rôle important dans l’engagement des utilisateurs/utilisatrices sur un site web. En permettant aux utilisateurs/utilisatrices de laisser des commentaires de manière simple et attrayante, vous encouragez les discussions et les interactions sur votre site.
Dans cet article, nous allons vous afficher comment styliser facilement le formulaire de commentaire de WordPress pour stimuler l’engagement sur votre site.
Avant de Premiers pas
Les thèmes WordPress contrôlent l’apparence de votre site. Chaque thème WordPress contient plusieurs fichiers, notamment des fichiers de modèles, des fichiers de fonctions, des JavaScripts et des feuilles de style.
Les feuilles de style contiennent les règles CSS pour tous les éléments utilisés par votre thème WordPress. Vous pouvez ajouter votre propre CSS personnalisé pour surcharger les règles de style de votre thème.
Si vous ne l’avez pas encore fait, consultez notre article sur la façon d’ajouter des CSS personnalisés dans WordPress pour les débutants.
En dehors des CSS, vous pouvez également avoir besoin d’ajouter quelques fonctions pour modifier l’apparence par défaut de votre formulaire de commentaire WordPress. Si vous n’avez jamais fait cela auparavant, veuillez consulter notre article sur la façon de copier et coller du code dans WordPress.
Ceci étant dit, voyons comment styliser le formulaire de commentaire de WordPress.
Ce guide étant assez complet, nous avons créé une table des matières pour faciliter la navigation :
- Styling WordPress Comment Form Using SeedProd Theme Builder
- Change WordPress Comments with Default CSS Classes
- Adding Social Login to WordPress Comments
- Adding Comment Policy Text in WordPress Comment Form
- Move Comment Text Field to Bottom
- Remove Website (URL) Field from WordPress Comment Form
- Add a Subscribe to Comments Checkbox in WordPress
- Add Custom Fields to WordPress Comment Form
Styliser le formulaire de commentaire de WordPress en utilisant le Constructeur de thèmes SeedProd
Cette méthode nécessite SeedProd qui est la meilleure extension de constructeur de page et de thème WordPress sur le marché.
Elle est recommandée pour les débutants n’ayant aucune expérience en matière de codage. Cependant, l’inconvénient de cette méthode est qu’elle remplacera votre thème WordPress existant par un thème personnalisé.
Tout d’abord, vous devez installer et activer l’extension SeedProd. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.
Note : Vous aurez besoin au minimum de l’offre PRO pour accéder à la mis en avant du constructeur de thème.
Une fois activé, vous aurez besoin de créer des modèles pour votre thème WordPress personnalisé. SeedProd vous permet de générer facilement ces modèles en utilisant l’un de leurs thèmes intégrés.
Pour des instructions détaillées, consultez notre tutoriel sur la façon de créer un thème WordPress personnalisé sans codage.
Une fois que vous avez généré vos modèles de thème, vous devez cliquer sur le lien « Modifier la conception » sous le modèle de publication unique.
Cela chargera la publication unique dans l’interface du Constructeur du thème SeedProd. Vous remarquerez le formulaire de commentaire en bas de la Prévisualisation.
Cliquez simplement sur le formulaire de commentaire et vous verrez ses propriétés dans le panneau de gauche.
Vous pouvez également passer à l’onglet « Avancé » pour modifier le style du formulaire de commentaire sans écrire de code CSS.
Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer » pour publier vos modifications.
Modifié, il est très facile de modifier le style de n’importe quel élément de votre site sans avoir à écrire de code.
Cependant, c’est un constructeur de thèmes et il se peut que vous utilisiez déjà un thème WordPress que vous aimez. Dans ce cas, les astuces suivantes vous aideront à modifier manuellement les styles de formulaires de commentaires sur WordPress.
Modifier le style du formulaire de commentaire dans WordPress
Dans la plupart des thèmes WordPress se trouve un modèle appelé comments.php. Ce fichier est utilisé pour afficher les commentaires et les formulaires de commentaires sur les publications de votre blog. Le formulaire de commentaire WordPress est généré en utilisant la fonction : <?php comment_form() ; ?>.
Par défaut, cette fonction génère votre formulaire de commentaire avec trois champs de texte (Nom, E-mail et Site web), un champ de zone de texte pour le texte du commentaire, une case à cocher pour la conformité RGPD et le bouton envoyer.
Vous pouvez facilement modifier chacun de ces champs en ajustant simplement les classes CSS par défaut. Vous trouverez ci-dessous une liste des classes CSS par défaut que WordPress ajoute à chaque formulaire de commentaire.
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit
En ajustant simplement ces classes CSS, vous pouvez complètement modifier l’aspect et la convivialité de votre formulaire de commentaire WordPress.
Allons-y et essayons de modifier quelques éléments, afin que vous puissiez vous faire une bonne idée de la manière dont cela fonctionne.
Tout d’abord, nous commencerons par mettre en évidence le champ actif du formulaire. Le fait de mettre en évidence le champ actuellement activé rend votre formulaire plus accessible aux personnes ayant des besoins particuliers, et il rend également votre formulaire de commentaires plus joli sur les petits appareils.
#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}
/* Highlight active form field */
#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}
Voici à quoi ressemblait notre formulaire dans le thème WordPress Twenty Sixteen après les modifications :
Grâce à ces classes, vous pouvez modifier le comportement du texte à l’intérieur des zones de saisie. Nous allons maintenant modifier le style de texte des champs Nom/autrice et URL.
#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
}
#url {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}
Si vous regardez de près la capture d’écran ci-dessous, la police des champs Nom et E-mail est différente de celle de l’URL du site.
Vous pouvez également modifier le style du bouton d’envoi du formulaire de commentaire de WordPress. Au lieu d’utiliser le bouton d’envoi par défaut, donnons-lui un dégradé CSS3 et un box-shadow.
#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}
Faire passer les formulaires de commentaires WordPress à la vitesse supérieure
Vous vous dites peut-être que c’est trop simple. Eh bien, il faut commencer par là pour que tout le monde puisse suivre.
Cependant, vous pouvez faire évoluer votre formulaire de commentaires WordPress en réorganisant les champs du formulaire, en ajoutant une connexion sociale, des abonnements aux commentaires, des directives pour les commentaires, des identifiants rapides, et bien plus encore.
Ajouter une connexion sociale aux commentaires WordPress
Commençons par l’ajout de connexions sociales dans les commentaires WordPress.
La première chose à faire est d’installer et d’activer l’extension Super Socializer. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois activé, vous devez vous rendre sur Super Socializer » Social Login et cocher la case » Activer le Social Login « .
Le panneau des options de connexion sociale s’affiche. Cliquez d’abord sur l’onglet « Configuration avancée ».
Confirmez ensuite que la case « Activer au niveau du formulaire de commentaire » est cochée.
Cliquez ensuite sur l’onglet « Configuration de base ». Ici, vous pouvez choisir les réseaux sociaux que vous souhaitez ajouter en cochant les cases de la section ‘Sélectionner les réseaux sociaux’.
En dessous, l’extension nécessitera des clés API afin de commander les plateformes sociales. Il suffit de cliquer sur l’icône » Point d’interrogation » pour faire apparaître les instructions relatives à l’obtention de ces clés pour chaque plateforme.
Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres de connexion sociale.
Vous pouvez désormais visiter votre site pour voir les boutons de connexion sociale au-dessus de votre formulaire de commentaire.
Ajout d’un texte de politique de commentaire avant ou après le formulaire de commentaire
Nous aimons tous nos utilisateurs/utilisatrices et nous apprécions vraiment qu’ils prennent quelques minutes pour laisser un commentaire sur notre site. Toutefois, pour créer un environnement de discussion sain, il est important de modérer les commentaires.
Pour une transparence totale, nous avons créé une page sur la politique en matière de commentaires, mais vous ne pouvez pas vous contenter de placer ce lien dans le pied de page.
Nous voulions que notre politique de commentaires soit bien en vue et visible pour tous les utilisateurs/utilisatrices qui laissent un commentaire. C’est pourquoi nous avons décidé d’ajouter la politique de commentaire dans notre formulaire de commentaire WordPress.
Si vous souhaitez ajouter une page de politique de commentaire, la première chose à faire est de créer une page WordPress et de définir votre politique de commentaire (vous pouvez vous inspirer de la nôtre et la modifier en fonction de vos besoins).
Ensuite, vous pouvez ajouter le code abonné dans le fichier functions.php de votre thème ou dans une extension d’extraits de code.
function wpbeginner_comment_text_before($arg) {
$arg['comment_notes_before'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Le code ci-dessus remplacera le formulaire de commentaire par défaut avant les notes par ce texte. Nous avons également ajouté une classe CSS dans le code, afin de pouvoir mettre en évidence la notification à l’aide de CSS. Voici l’exemple de CSS que nous avons utilisé :
p.comment-policy {
border: 1px solid #ffd499;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}
Voici ce que cela donne sur notre site d’essai :
Si vous souhaitez afficher le lien après la zone de texte du commentaire, utilisez le code suivant.
function wpbeginner_comment_text_after($arg) {
$arg['comment_notes_after'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');
N’oubliez pas de modifier l’URL en conséquence, afin qu’elle renvoie à votre page de politique de commentaire plutôt qu’à example.com.
Déplacer le champ de texte du commentaire vers le bas
Par défaut, le formulaire de commentaire de WordPress affiche d’abord la zone de texte du commentaire, puis les champs Nom affiché, e-mail et site. Cette modification a été introduite dans la version 4.4 de WordPress.
Avant cela, les sites WordPress affichaient d’abord les champs Nom, E-mail et Site, puis la zone de texte du commentaire. Nous avons estimé que nos utilisateurs/utilisatrices sont habitués à voir le formulaire de commentaire dans cet ordre, c’est pourquoi nous utilisons toujours l’ancien ordre des champs sur WPBeginner.
Si vous souhaitez le faire, il vous suffit d’ajouter le code abonné au fichier functions.php de votre thème ou à une extension d’extraits de code.
function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');
Nous recommandons toujours d’ajouter du code dans WordPress en utilisant une extension d’extraits de code comme WPCode. Cela facilite l’ajout de code personnalisé sans modifier votre fichier functions.php, de sorte que vous n’avez pas à vous soucier de casser votre site.
Pour Premiers pas, vous devez installer et activer l’extension gratuite WPCode. Pour savoir comment procéder, consultez ce guide sur l ‘installation d’une extension WordPress.
Une fois activé, allez dans » Code Snippets » + Add Snippet depuis le tableau de bord WordPress.
Trouvez ensuite l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait » situé en dessous.
Ensuite, ajoutez un titre pour votre extrait en haut de la page, qui peut être n’importe quoi pour vous aider à vous souvenir de l’objet du code.
Ensuite, collez le code ci-dessus dans le champ « Prévisualisation du code » et choisissez « Extrait de code PHP » comme type de code dans la liste déroulante à droite.
Ensuite, il suffit de permuter le commutateur de « Inactif » à « Actif » et de cliquer sur le bouton « Enregistrer l’extrait ».
Ce code déplace simplement le champ de la zone de texte du commentaire vers le bas.
Retirer le champ site web (URL) du formulaire de commentaire WordPress
Le champ « site » du formulaire de commentaire attire de nombreux spammeurs. Le retirer n’arrêtera pas les spammeurs et ne réduira pas le nombre de commentaires indésirables, mais cela vous permettra d’éviter d’approuver accidentellement un commentaire contenant un mauvais lien vers le site de l’auteur/autrice.
Il réduira également un champ du formulaire de commentaire, ce qui le rendra plus simple/simple d’utilisation. Pour en savoir plus sur ce Sujet, consultez notre article sur la suppression du champ url du site dans le formulaire de commentaire WordPress.
Pour retirer le champ URL du formulaire de commentaire, il suffit d’ajouter le code suivant à votre fichier functions.php ou à une extension d’extraits de code.
function wpbeginner_remove_comment_url($arg) {
$arg['url'] = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
Vous pouvez suivre les mêmes étapes que dans la section précédente pour ajouter ce code en toute sécurité dans WordPress à l’aide de l’extension WPCode.
Ajouter une case à cocher pour s’abonner aux commentaires dans WordPress
Lorsque les utilisateurs/utilisatrices laissent un commentaire sur votre site, il se peut qu’ils veuillent suivre le fil de discussion pour voir si quelqu’un a répondu à leur commentaire. En ajoutant une case à cocher « S’abonner aux commentaires », vous permettez aux utilisateurs/utilisatrices de recevoir des notifications instantanées chaque fois qu’un nouveau commentaire apparaît sur la publication.
Pour ajouter cette case à cocher, la première chose à faire est d’installer et d’activer l’extension Subscribe to Comments Reloaded. Une fois activé, vous devez visiter la page StCR » Comment Form pour configurer les réglages de l’extension.
Pour des instructions détaillées étape par étape, consultez notre article sur la façon de permettre aux utilisateurs de s’abonner aux commentaires dans WordPress.
Ajouter des champs supplémentaires au formulaire de commentaire de WordPress
Vous souhaitez ajouter des champs supplémentaires à votre formulaire de commentaire WordPress ? Par exemple, un champ facultatif où les utilisateurs/utilisatrices peuvent ajouter leur identifiant Twitter ?
Il suffit d’installer et d’activer l’extension WordPress Comments Fields. Une fois activé, rendez-vous sur la page « Champs de commentaires » et passez à l’onglet « Champs de commentaires ».
Il suffit de glisser-déposer un champ personnalisé et de lui donner un titre, une description et un nom de données.
Une fois que vous avez ajouté les champs, n’oubliez pas de cliquer sur le bouton « Enregistrer toutes les modifications ».
Vous pouvez désormais consulter votre formulaire de commentaire pour voir les champs personnalisés en action.
Les champs personnalisés sont ensuite affichés dans la modération des commentaires et sous le contenu du commentaire.
Pour plus de détails, consultez notre tutoriel sur la façon d’ajouter des champs personnalisés au formulaire de commentaire dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment styliser le formulaire de commentaire WordPress pour le rendre plus amusant pour vos utilisateurs/utilisatrices. Vous pouvez également consulter nos astuces pour obtenir plus de commentaires sur vos publications de blog WordPress et nos choix d’experts des meilleures extensions de réseaux sociaux pour WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
tom
Great Article! thanks a lot
WPBeginner Support
You’re welcome
Administrateur
mobileninja
Thank you so much. It is very helpful article.
WPBeginner Support
Glad it could be helpful
Administrateur
Emma
Hi. Great tutorial. I wanted to refrain my users from adding their website url to the comment section, because it causes crashes for some users (no idea why). I succeeded, but now it still says the usual « remember my name, e-mail adres and website for the next time I leave a comment ». Do you know how to fix that?
WPBeginner Support
You may want to check with your theme’s support and let them know about the crashing and editing that message.
Administrateur
WPBeginner Support
Glad our guide could help
Administrateur
Deepak Bharti
Thanks for sharing this type of article. it is helpful for me and my website.
WPBeginner Support
Glad our article could be helpful
Administrateur
Rubel Ahmed
Hello
Nice article and I have used some of your suggestions but I found a code error that needs fixing under ‘Adding Comment Policy Text Before or After Comment Form’.
You have placed the add filter within the function or otherwise it won’t get executed, it needs to be moved outside of the function.
Rubel
WPBeginner Support
Both filters should be outside the function but we will certainly take another look and update if we can see the error
Administrateur
suvo
obviously like your web-site Post Thanks for Shearing. i Read your Blog every day.it very bothersome to tell the reality then again I’ll definitely come back again.Please write more about this topics.
WPBeginner Support
Glad you like our articles
Administrateur
ARPIT
The Information you’ve provided here is very good. Nice Tutorial. Thanks for sharing. I was looking for a long time for this.It’s really helping me get more familiar with WordPress!
WPBeginner Support
Hi Arpit,
We are glad you found the tutorial helpful.
Administrateur
Hồ Ngọc Thanh
I can’t find #respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
in my wordpress theme?
WPBeginner Support
Your theme may have styled it differently, for finding what they are you would want to take a look at our article: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
The # would be for the ID of the object so if something had the ID of button then it would be #button
Administrateur
Chintan
How to add real-time comment preview?
Paulina
Hello, thank you for this very useful article. I am interested in adding a text before the button « submit ». In the code that you are providing here: would I need to change the words ‘wpbeginner’ to anything else that is connected to my own site?
Akramul Hasan
Hello Paulina,
You can add text or anything before Submit button by using a simple filter hook that works for comments form fields.
Hena
wow!! It’s very good
Woolker Cherenfant
Hi! Great article as usual. But I am wondering how can I change the word « says » in the comment section. I want to translate it into Haitian Creole « di ». Any help with that?
Thanks in advance.
—Woolker
Tisha
Is it possible to copy the code to blogger?. Because I want to make Wordpress style comment in my Blogger blog. Thanks for your help.
Mate Hodi
Hey!
Great article! I was looking for a solution to change the « Leave a Reply » part. Do you have any idea how I may change it?
Neeraj
This is a helpful guide which gave thorough guidance to me about Comments Section Optimization.
Kevin Byrnes
Excellent article. I will be facing some of these issues as well..
JP
Hi
I love your tutorials! I still have a question though; is it popular to change the greyish background color of the entire comment form to some thing else? Perhaps even to an image instead of a solid color?
Mahesh
I’m Loving Your Tuts It is very Easy to Understand and More Useful any Where.
Thanks For Sharing Sir.
Lisa Marten
Can I put the comment box to be fill in above the list of posted comments instead of below?
WPBeginner Support
Yes you can.
Administrateur
SiRetu
Is there any complete tutorial? I mean start from scratch including creating comments.php file from the first time. Thanks, great tutorial as always
Luis Izquierdo
I am customizing my wp themes child theme and I was able to place the policy text above the comment form. But it only shows to logged out users. How do I get it to show to Logged in users?
Luca Morelli
Hello great tutorial: thanks!
I keep improving my knowledge about WordPress thanks to your lessons. I have a question (I don’t know much about php): I managed to add the comment policy text before the submit button, but I noticed that if I click “reply” and see your codes, the php output is inside the paragraph tag together with a class named « commentpolicy ». How did you achieve that (e.g. how to style the php output on an HTML webpage with a tag and a class, which can then be styled with CSS)?
Hopefully I explained it correctly and my question makes sense.
Again many thanks for all your tutorials.
Luca
WPBeginner Support
We are not sure what you are trying to ask. Can you please explain bit more? Thanks.
Administrateur
Jayanta
I have the same question. Trying to clarify a bit.
I have added your snippet to get the comment policy text before comment field. But This is only some text, no special div class is added for that text. So, I am not able to style it using css (I would like to make the text smaller, or may be put a border-box to it). Please guide us. Hope it makes sense now. Thank you so much.
Erick
How do you make comments look like this website?
gift charles
Thank you very much for this,i was looking for a long time for a way to make the built in comments look better because i prefer them to other services like facebook comments or disqus
Adnan Bashir
As you have noticed, the newest version of WP (4.4) is displaying Name and Email form below Text box, do you have any idea how to revert it to old style (Name and Email box above the Text box) ?
Thanks
WPBeginner Support
Please take a look at How to move comment text field to bottom in WordPress 4.4
Administrateur
Adnan Bashir
Thank you, now the Comment form is looking better
mario
Hello, great tutorial !
But I’d like to know one more thing: is it possible to add a checkbox for the privacy policy? Since wordpress system collect the ip, I want my users to check teh box before sending the message. Any suggestion ? Thank you !
WPBeginner Support
Please see our article on how to add custom fields to comments form in WordPress.
Administrateur
Ramon
I would like to have the input comments fields above the comments them self so my customers can leave a comment without the need to scroll all the way down the page.
Is there an easy way to accomplish this?
Thank you.
dragons
Is there any way to ad an EDIT button for the commenters? So they can fix typos and such? Also what if the site wants to allow commenters the ability to upload images in the comments? Is there a way to do that?
Rick Hellewell
Good tutorial. Used it to develop my own customized contact form
plugin, where I re-define the $args for the comment form fields.
But it turns out, while testing, that some themes create their own
‘textarea’ field, which adds to my ‘textarea’ field, resulting in two
comment text fields. Not good.
I have set my add_filter( ‘comment_form_default_fields’…. with a
higher priority (99) so that it happens later in the ‘page build’ (after
the theme does it’s comment_form_default_fields), but the duplicates
comment text boxes are still there. Also tried a priority of 8, and that
didn’t do it either.
So, can you think of a generic (works for any theme) that can
determine if the comment field has already been defined? And, if the
duplicate is found, remove the one in the theme, so I can replace it
with mine?
I understand that the problem is caused by bad coding practices on the theme, but would like to find a workaround.
Thanks….Rick…
Larisa Frolova
Thank you!
I’ve searched the forums and Google for this, but I’m still a little confused as to what to do. If I just want to change the LOCATION of the comment/reply link that appears on posts, how do I do that? It’s not that I want to make it invisible, or change the wording – I just want it to be at the bottom of a post, not at the top.
How do I go about doing that for the Twenty-Twelve theme?
Mikael
I like this layout!
lflier
Very helpful!
I’m really liking the Disqus comment system you’re now using. It’s slick and very inviting. I find myself leaving more comments on sites using Disqus.
But I’m discouraged from using it on my own site by the lack of integration with BuddyPress activity stream. So the more I can do to streamline the native WordPress comment system and make it as inviting as Disqus, the better. Thanks again for your tutorial.
Therese
Thank you so much for all this! It’s really helping me get more familiar with Wordpress!
I’ve got the social media logins, I’ve got the border sorted, but now I am totally stuck in trying to find *where* to edit the font for the comment box’s individual boxes.
I can’t figure it out.
Can you please tell me where exactly to find that? You don’t specify this clearly enough in the tutorial.
WPBeginner Support
Please see how we changed fonts for #author and #url input fields in the article. To change font in the comment box you can use something like this:
#comment { font-family: arial, verdana, sans-serif; font-size: 16px; }1-click Use in WordPress
Administrateur
JG
how do I add a required checkbox people have to tick before the form gets submitted? I have tried adding the field in via adding a field under add_filter(‘comment_form_default_fields,) while the field shows the form can still be submitted without ticking the box.
Jewel
Thank you a lot…
Bhushan
I’m trying
Ann
I read through your tutorial… and was wondering if it can be applied to a WordPress site that has a Genesis Framework and Child theme. I am using the Epic Child theme by the way. Thanks for your help.
WPBeginner Support
Yes some parts of the tutorial can be directly applied to your child theme. For CSS styling you need to over ride your childtheme’s CSS.
Administrateur
Jonathan
Any idea how to place those checkboxes for Subcribe to Comments and other plugins so that they appear above the Submit button? Is there a way define where wordpress would normally include those items?
WPBeginner Support
if you are using Subscribe to comments plugin then you can place
<?php show_subscription_checkbox(); ?>in your templates where you want the subscription checkbox to appear.Administrateur
Jeff Hilron
Im trying to figure out how to get the round avatars.
Editorial Staff
Here is a tutorial for you:
https://www.wpbeginner.com/wp-themes/how-to-display-round-gravatar-images-in-wordpress/
Administrateur
Ravinder
Nice Tutorial. the information you have provided here is very good. I was searching for it from a while. Thanks for sharing.
mohib
This is a wonderfull tuturial, « Click here to cancel repley » i want ot chage this name, but not found any way, would you pls help me ?
Mike Lee
Hi, your tutorial is so wonderful and i would like to ask how to make the comment form appear under the specific comment when clicking the ‘Reply’ word of that coment.
Thanks
Editorial Staff
This happens by default in the WordPress theme when you allow threaded comments. WordPress loads comment-reply.min.js. If your theme is not loading that, then you need to load it.
Administrateur
Jae
I have the Elegant Tonight theme on my WordPress, and I have my dashboard-settings-discussion set to: Enable threaded (nested) comments 3 levels deep. So, I should be seeing threaded comments, but I am not. WordPress doesn’t seem to be loading comment-reply.min.js. Where in my comments.php theme do I add this? And do I add exactly that, or in some other coding format? Thank you for any advice!
Editorial Staff
Hey Jae,
Elegant themes staff is better equipped to answer that question because we are not very familiar with that theme. When you pay for Elegant Themes, you also get access to their support.
Robo Ek
Helpful article once again from you. Maybe you should change your name. Even professionals would find your tutorial useful
Adrian Robertson
Another nice tutorial from you guys, time and time again when I can’t remember how to do something I end up on your site.
Great work!
Mattia
Hi guys thanks a lot. Just a question: which is the difference between and . With this last one, your adivecs don’t work!
Mattia
sorry the output deleted my question: difference between « comment_form » and « comment_template »…
Editorial Staff
No problem. So comments_template is a function that loads the template used to display comments. It loads the comments.php file by default however you can use another file if you have a customized version. The comments.php file usually contains the code to load all the comments, and it also contains the function comment_form. The commnent_form function outputs the actual comment form (name, email, website, message, submit button, etc).
Hope that helped clear things up
Administrateur
Mattia
It did. Thanks
Sue Kearney
I’m loving all of this juicy input, some of which I’ve shamelessly lifted from what you do. I’m about halfway done. Check it out here: http://goo.gl/8r9uO
Thanks again!
Ernice Gilbert
Hello, how do I add a reply button in the comments box just like yours to my wordpress site? It is a plugin or tweaking of code?
Thanks.
Editorial Staff
Hey Ernice,
It is not a plugin. We are using the same technique showed in this article. Instead of using background color, we are using the background image property of CSS.
Administrateur
Rifat Bin Sharif
In my wordpress theme, I just noticed that in comment area there is a word »says’ but I couldn’t find it in comments.php file. How to remove this text?
Thanks
Colin Crawford
Hi Nice article and I have used some of your suggestions but I found a code error that needs fixing under ‘Adding Comment Policy Text Before or After Comment Form’.
You have placed the add filter within the function or otherwise it won’t get executed, it needs to be moved outside of the function.
Colin
Editorial Staff
Fixed it
Administrateur
Gaelyn
All wonderful suggestions. Now, how do you change the word « responses » to « comment » and make it more prominent. On Suffusion theme. Thanks.
Editorial Staff
Edit your comment.php file in the theme to make the change.
Administrateur
Umer Rock
I just want to add a Image just right on Comment Box, How i can, for example this is a screenshot of comment box : http://oi48.tinypic.com/2itrket.jpg
Editorial Staff
You could probably use the filters shown in the article and CSS to make it look like that.
Administrateur
Umer Rock
Ok. Thank you, let me consider again on article. well i am not expert with CSS.