Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man das WordPress-Kommentarformular gestaltet (ultimative Anleitung)

Möchten Sie den Stil des WordPress-Kommentarformulars auf Ihrer Website ändern? Bei WPBeginner haben wir jahrelang mit verschiedenen Möglichkeiten experimentiert, um das Engagement der Benutzer zu steigern, und wir haben festgestellt, dass ein gut aussehendes, benutzerfreundliches Kommentarformular einen großen Unterschied machen kann.

Kommentare spielen eine wichtige Rolle für das Engagement der Benutzer auf einer Website. Wenn Sie es Benutzern leicht machen und optisch ansprechend gestalten, Kommentare zu hinterlassen, fördern Sie mehr Diskussionen und Interaktionen auf Ihrer Website.

In diesem Artikel zeigen wir Ihnen, wie Sie das WordPress-Kommentarformular einfach gestalten können, um das Engagement auf Ihrer Website zu steigern.

Styling WordPress comment form

Bevor Sie anfangen

WordPress-Themes steuern das Erscheinungsbild Ihrer Website. Jedes WordPress-Theme enthält mehrere Dateien, darunter Vorlagendateien, Funktionsdateien, JavaScripts und Stylesheets.

Stylesheets enthalten die CSS-Regeln für alle von Ihrem WordPress-Theme verwendeten Elemente. Sie können Ihr eigenes benutzerdefiniertes CSS hinzufügen, um die Stilregeln Ihres Themes außer Kraft zu setzen.

Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel über das Hinzufügen von benutzerdefiniertem CSS in WordPress für Anfänger.

Abgesehen von CSS müssen Sie möglicherweise auch einige Funktionen hinzufügen, um das Standardaussehen Ihres WordPress-Kommentarformulars zu ändern. Wenn Sie dies noch nicht getan haben, lesen Sie bitte unseren Artikel über das Kopieren und Einfügen von Code in WordPress.

Werfen wir also einen Blick darauf, wie das WordPress-Kommentarformular gestaltet werden kann.

Da es sich um einen recht umfassenden Leitfaden handelt, haben wir zur leichteren Navigation ein Inhaltsverzeichnis erstellt:

Gestaltung des WordPress-Kommentarformulars mit SeedProd Theme Builder

Diese Methode erfordert SeedProd, das beste WordPress-Plugin für Seiten- und Themenerstellung auf dem Markt.

Sie wird für Anfänger ohne Programmierkenntnisse empfohlen. Der Nachteil dieser Methode ist jedoch, dass sie Ihr bestehendes WordPress-Theme durch ein benutzerdefiniertes Theme ersetzt.

Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Hinweis: Sie benötigen mindestens den PRO-Tarif, um auf die Theme-Builder-Funktion zugreifen zu können.

Nach der Aktivierung müssen Sie Vorlagen für Ihr benutzerdefiniertes WordPress-Theme erstellen. Mit SeedProd können Sie diese Vorlagen ganz einfach mit einem der integrierten Themes erstellen.

Detaillierte Anweisungen finden Sie in unserem Tutorial zur Erstellung eines benutzerdefinierten WordPress-Themes ohne Programmierkenntnisse.

Sobald Sie Ihre Themes-Templates erstellt haben, müssen Sie auf den Link „Design bearbeiten“ unter dem Template „Einzelbeitrag“ klicken.

Edit the single post template

Dadurch wird die Vorschau eines einzelnen Beitrags in der Oberfläche des SeedProd-Theme-Builders geladen. Unten in der Vorschau sehen Sie den Block mit dem Kommentarformular.

Edit your comment form in SeedProd

Klicken Sie einfach auf das Kommentarformular und Sie sehen dessen Eigenschaften im linken Bereich.

Von hier aus können Sie einen Kommentar oder eine Datenschutzerklärung hinzufügen. Sie können auch zum Tab ‚Erweitert‘ wechseln, um den Stil des Kommentarformulars zu bearbeiten, ohne CSS-Code zu schreiben.

Advance styling options for comment form in SeedProd

Wenn Sie fertig sind, vergessen Sie nicht, auf den Button „Speichern“ zu klicken, um Ihre Änderungen zu veröffentlichen.

Mit SeedProd können Sie den Stil eines jeden Elements auf Ihrer Website ganz einfach ändern, ohne Code schreiben zu müssen.

Es handelt sich jedoch um einen Theme-Builder, und vielleicht verwenden Sie bereits ein WordPress-Theme, das Ihnen gefällt. In diesem Fall helfen Ihnen die folgenden Tipps, die Stile der Kommentarformulare in WordPress manuell zu ändern.

Ändern des Stils des Kommentarformulars in WordPress

In den meisten WordPress-Themes gibt es eine Vorlage namens comments.php. Diese Datei wird verwendet, um Kommentare und Kommentarformulare in Ihren Blogbeiträgen anzuzeigen. Das WordPress-Kommentarformular wird mit der folgenden Funktion erstellt: <?php comment_form(); ?>.

Standardmäßig generiert diese Funktion Ihr Kommentarformular mit drei Textfeldern (Name, E-Mail und Website), einem Textfeld für den Kommentartext, einem Kontrollkästchen für die Einhaltung der DSGVO und dem Submit-Button.

Sie können jedes dieser Felder leicht ändern, indem Sie einfach die Standard-CSS-Klassen anpassen. Nachstehend finden Sie eine Liste der Standard-CSS-Klassen, die WordPress jedem Kommentarformular hinzufügt.

#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

Durch einfaches Anpassen dieser CSS-Klassen können Sie das Aussehen Ihres WordPress-Kommentarformulars komplett verändern.

Versuchen wir nun, ein paar Dinge zu ändern, damit Sie sich ein Bild davon machen können, wie das funktioniert.

Wir beginnen damit, das aktive Formularfeld hervorzuheben. Durch die Hervorhebung des aktiven Feldes wird Ihr Formular für Menschen mit besonderen Bedürfnissen zugänglicher und sieht auch auf kleineren Geräten besser aus.

#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);
}

So sieht unser Formular im WordPress-Theme Twenty Sixteen nach den Änderungen aus:

Highlight active comment form field

Mit diesen Klassen können Sie das Verhalten von Text in Eingabefeldern ändern. Wir werden fortfahren und den Textstil der Felder „Autorenname“ und „URL“ ändern.

#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;
} 

Wenn Sie sich den Screenshot unten genau ansehen, sehen Sie, dass die Schriftart des Namens und des E-Mail-Feldes anders ist als die der Website-URL.

Input styles for WordPress comment form

Sie können auch den Stil des WordPress-Buttons zum Abschicken des Kommentarformulars ändern. Anstatt den Standard Submit Button zu verwenden, geben wir ihm einen CSS3 Farbverlauf und einen Box-Schatten.

#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;
}
Comment form submit button

WordPress-Kommentarformulare auf die nächste Stufe heben

Sie werden vielleicht denken, dass das zu einfach war. Nun, wir müssen damit anfangen, damit jeder mitkommen kann.

Sie können Ihr WordPress-Kommentarformular jedoch auf die nächste Stufe heben, indem Sie Formularfelder neu anordnen, soziale Anmeldungen, Kommentarabonnements, Kommentarrichtlinien, Schlagwörter und mehr hinzufügen.

Social Login zu WordPress-Kommentaren hinzufügen

Beginnen wir mit dem Hinzufügen von Social Logins zu WordPress-Kommentaren.

Als Erstes müssen Sie das Super Socializer-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie Super Socializer “ Social Login besuchen und dann das Kästchen „Enable Social Login“ ankreuzen.

Check box to enable social login

Daraufhin wird das Panel mit den Optionen für die soziale Anmeldung angezeigt. Klicken Sie zunächst auf die Registerkarte „Erweiterte Konfiguration“.

Vergewissern Sie sich dann, dass das Kästchen „Bei Kommentarformular aktivieren“ markiert ist.

Enable social login on comment form

Klicken Sie anschließend auf die Registerkarte „Grundkonfiguration“. Hier können Sie die sozialen Netzwerke auswählen, die Sie hinzufügen möchten, indem Sie die Kästchen im Abschnitt „Soziale Netzwerke auswählen“ markieren.

Select social networks for login

Darunter benötigt das Plugin API-Schlüssel, um sich mit sozialen Plattformen zu verbinden. Klicken Sie einfach auf das „Fragezeichen“-Symbol, um die Anweisungen aufzurufen, wie Sie diese für jede Plattform erhalten.

Enter social network API keys

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Änderungen speichern“, um Ihre sozialen Anmeldeeinstellungen zu speichern.

Sie können nun Ihre Website besuchen, um die Buttons für die Anmeldung bei sozialen Netzwerken über Ihrem Kommentarformular zu sehen.

Social login comment form example

Hinzufügen von Text zur Kommentarrichtlinie vor oder nach dem Kommentarformular

Wir freuen uns über alle unsere Nutzer und schätzen es sehr, dass sie sich ein paar Minuten Zeit nehmen, um einen Kommentar auf unserer Website zu hinterlassen. Um eine gesunde Diskussionsumgebung zu schaffen, ist es jedoch wichtig, Kommentare zu moderieren.

Um vollständige Transparenz zu gewährleisten, haben wir eine Seite mit Kommentarrichtlinien eingerichtet, aber Sie können diesen Link nicht einfach in die Fußzeile setzen.

Wir wollten, dass unsere Kommentarrichtlinien für alle Benutzer, die einen Kommentar hinterlassen, deutlich sichtbar sind. Deshalb haben wir beschlossen, die Kommentarrichtlinien in unser WordPress-Kommentarformular aufzunehmen.

Wenn Sie eine Seite mit Kommentarrichtlinien hinzufügen möchten, müssen Sie zunächst eine WordPress-Seite erstellen und Ihre Kommentarrichtlinien festlegen (Sie können unsere Seite übernehmen und sie an Ihre Bedürfnisse anpassen).

Danach können Sie den folgenden Code in die Datei functions.php Ihres Themes oder ein Code Snippets Plugin einfügen.

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');

Der obige Code ersetzt das Standard-Kommentarformular vor Notizen durch diesen Text. Wir haben auch eine CSS-Klasse in den Code eingefügt, so dass wir den Hinweis mit CSS hervorheben können. Hier ist das von uns verwendete CSS-Beispiel:

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;
}

So sah es auf unserer Testseite aus:

Comment policy note

Wenn Sie den Link nach dem Textbereich des Kommentars anzeigen möchten, verwenden Sie den folgenden Code.

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');

Vergessen Sie nicht, die URL entsprechend zu ändern, damit sie zu Ihrer Seite mit den Kommentarrichtlinien und nicht zu example.com führt.

Kommentar-Textfeld an den unteren Rand verschieben

Standardmäßig zeigt das WordPress-Kommentarformular zuerst den Textbereich für den Kommentar und dann die Felder für den Namen, die E-Mail und die Website an. Diese Änderung wurde in WordPress 4.4 eingeführt.

Zuvor wurden auf WordPress-Websites zuerst die Felder Name, E-Mail und Website angezeigt und dann das Textfeld für den Kommentar. Wir waren der Meinung, dass unsere Nutzer daran gewöhnt sind, das Kommentarformular in dieser Reihenfolge zu sehen, daher verwenden wir auf WPBeginner immer noch die alte Feldreihenfolge.

Wenn Sie das möchten, müssen Sie nur den folgenden Code in die Datei functions.php Ihres Themes oder in ein Code Snippets Plugin einfügen.

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');

Wir empfehlen immer, Code in WordPress mit einem Code-Snippets-Plugin wie WPCode hinzuzufügen. Damit können Sie ganz einfach benutzerdefinierten Code hinzufügen, ohne Ihre functions.php-Datei zu bearbeiten, so dass Sie sich keine Sorgen machen müssen, Ihre Website zu beschädigen.

Um loszulegen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Anweisungen dazu finden Sie in dieser Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie im WordPress-Dashboard auf Code Snippets “ + Snippet hinzufügen.

Suchen Sie dort die Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ und klicken Sie darunter auf die Schaltfläche „Snippet verwenden“.

Add new snippet

Als Nächstes fügen Sie oben auf der Seite einen Titel für Ihr Snippet ein, der beliebig sein kann, damit Sie sich daran erinnern, wofür der Code ist.

Fügen Sie dann den Code von oben in das Feld „Codevorschau“ ein und wählen Sie „PHP Snippet“ als Codetyp aus der Dropdown-Liste auf der rechten Seite.

Paste code into Code Preview box and select the Code Type

Danach schalten Sie einfach den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken auf die Schaltfläche „Snippet speichern“.

Activate and save snippet in WPCode

Dieser Code verschiebt einfach das Feld für den Kommentartextbereich nach unten.

Moving comment field to the bottom

Website (URL)-Feld aus WordPress-Kommentarformular entfernen

Das Website-Feld im Kommentarformular lockt viele Spammer an. Das Entfernen dieses Feldes wird Spammer zwar nicht aufhalten oder sogar die Zahl der Spam-Kommentare verringern, aber es wird Sie davor bewahren, versehentlich einen Kommentar mit einem falschen Link zur Autoren-Website zu genehmigen.

Außerdem wird ein Feld aus dem Kommentarformular entfernt, wodurch es einfacher und benutzerfreundlicher wird. Weitere Informationen zu diesem Thema finden Sie in unserem Artikel über das Entfernen des Website-URL-Feldes aus dem WordPress-Kommentarformular.

Um das URL-Feld aus dem Kommentarformular zu entfernen, fügen Sie einfach den folgenden Code in Ihre functions.php-Datei oder ein Code-Snippets-Plugin ein.

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Remove URL field

Sie können die gleichen Schritte wie im vorherigen Abschnitt ausführen, um diesen Code mit dem WPCode-Plugin sicher in WordPress einzufügen.

Hinzufügen einer Checkbox zum Abonnieren von Kommentaren in WordPress

Wenn Nutzerinnen und Nutzer einen Kommentar auf Ihrer Website hinterlassen, möchten sie vielleicht nachverfolgen, ob jemand auf ihren Kommentar geantwortet hat. Durch Hinzufügen eines Kontrollkästchens zum Abonnieren von Kommentaren ermöglichen Sie es den Nutzern, sofortige Benachrichtigungen zu erhalten, wenn ein neuer Kommentar zu einem Beitrag erscheint.

Um diese Checkbox hinzuzufügen, müssen Sie zunächst das Plugin Subscribe to Comments Reloaded installieren und aktivieren. Nach der Aktivierung müssen Sie die Seite StCR “ Comment Form besuchen, um die Einstellungen des Plugins zu konfigurieren.

Subscribe to comments checkbox

Eine ausführliche Schritt-für-Schritt-Anleitung finden Sie in unserem Artikel über die Möglichkeit, Kommentare in WordPress zu abonnieren.

Zusätzliche Felder zum WordPress-Kommentarformular hinzufügen

Möchten Sie Ihrem WordPress-Kommentarformular zusätzliche Felder hinzufügen? Zum Beispiel ein optionales Feld, in dem Nutzer ihren Twitter-Handle hinzufügen können?

Installieren und aktivieren Sie einfach das WordPress-Plugin „Comments Fields“. Gehen Sie nach der Aktivierung auf die Seite „Kommentar-Felder“ und wechseln Sie auf die Registerkarte „Kommentar-Felder“.

Add extra fields to comment form

Ziehen Sie einfach ein benutzerdefiniertes Feld per Drag & Drop und geben Sie ihm einen Titel, eine Beschreibung und einen Datennamen.

Wenn Sie die Felder hinzugefügt haben, vergessen Sie nicht, auf die Schaltfläche „Alle Änderungen speichern“ zu klicken.

Sie können jetzt Ihr Kommentarformular anzeigen, um die benutzerdefinierten Felder in Aktionen zu sehen.

Comment form custom fields

Die benutzerdefinierten Felder werden dann in der Kommentar-Moderation und unter dem Kommentarinhalt angezeigt.

Comment extra fields displayed

Weitere Details finden Sie in unserem Tutorial über das Hinzufügen von benutzerdefinierten Feldern zum Kommentarformular in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, das WordPress-Kommentarformular so zu gestalten, dass es Ihren Nutzern mehr Spaß macht. Vielleicht interessieren Sie sich auch für unsere Tipps, wie Sie mehr Kommentare zu Ihren WordPress-Blogbeiträgen erhalten, und unsere Expertenauswahl der besten Social-Media-Plugins für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

111 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed

    I have seen many different comments section on websites and wondered why do they differed on appearance although all are using the same wordpress comments.
    having a good looking comments section is necessary for making good user experience while commenting.
    I have a query regarding disqus platform for wordpress comments which I have used for two years.
    is it good idea to continue to use it or is there a better alternative?
    also just curious to know what does wpbeginner uses for comments?

  3. Vera Kofyan

    Thank you for a great tutorial.
    One thing did not work for me: moving the text area to bottom. I added the script in Code snippets, but nothing changed. Has anything changed since you wrote that?
    Thank you,
    Vera

    • WPBeginner Support

      The snippet should still work correctly, the theme you are using may have added styling to the comment form that could be changing some things, if you check with the support for your specific theme they can help check and confirm this.

      Admin

  4. Arischvaran Puvanesvaran

    Thank you for sharing

    • WPBeginner Support

      You’re welcome, we hope you found our guide helpful!

      Admin

  5. Ali Kaleem

    This Blog Is very imformative.

    • WPBeginner Support

      Glad you found our site helpful!

      Admin

  6. Asutosh sahoo

    really full of knowledge. please keep updating. thanks..

    • WPBeginner Support

      Glad you found our guide helpful!

      Admin

  7. saikul

    good tutorial . i like this

    • WPBeginner Support

      Thank you, glad you liked it!

      Admin

  8. Samyak sharma

    Thanks, This is very good article.

    • WPBeginner Support

      Glad you found it helpful :)

      Admin

  9. Vincent Nyagaka

    Thank you for guiding us on how to style WordPress form. However I have tried to use almost all the codes, on how to remove the URL field from the comment form but unfortunately, none is working code. Kindly can you give me another code to use

    • WPBeginner Support

      If none of our recommendations were able to assist, we would recommend reaching out to the support for your specific theme and they should be able to assist with targeting their specific target for your comments.

      Admin

  10. amr

    Hi
    How can I delete the url from the author name and date?

    Thanks

    • WPBeginner Support

      Glad you liked our tutorial :)

      Admin

  11. Adam Rees

    Thanks, it helped me a lot in customizing the comment section.

    • WPBeginner Support

      You’re welcome :)

      Admin

  12. fred

    Hi, nice tutorial ! but i have a problem to find the location of the right .php to modify the post comments, i’m using oceanwp theme with elementor pro, when i go to the functions.php or comments.php i can’t find any of the command lines, i’v tryed to add your code and nothing happens. so i guess it’s somewhere else but where ?

    • WPBeginner Support

      If you are using a page builder you would need to reach out to that page builder’s support for how to edit the comment form and what tools are available.

      Admin

  13. Muhammad Shahzad

    how to show to comment box to the top of all comments and after post.

    • WPBeginner Support

      If your theme is not set up that way you would sadly need to modify the theme’s code to do that. As each theme’s code can be very different we do not have a specific guide on how to do that yet.

      Admin

    • WPBeginner Support

      You’re welcome :)

      Admin

    • WPBeginner Support

      You’re welcome :)

      Admin

  14. mobileninja

    Thank you so much. It is very helpful article.

    • WPBeginner Support

      Glad it could be helpful :)

      Admin

  15. 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.

      Admin

  16. WPBeginner Support

    Glad our guide could help :)

    Admin

  17. 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 :)

      Admin

  18. 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 :)

      Admin

  19. 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 :)

      Admin

  20. 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!

  21. 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?

  22. 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.

  23. 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

  24. 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. :)

  25. 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?

  26. Neeraj

    This is a helpful guide which gave thorough guidance to me about Comments Section Optimization.

  27. Kevin Byrnes

    Excellent article. I will be facing some of these issues as well..

  28. 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?

  29. Mahesh

    I’m Loving Your Tuts It is very Easy to Understand and More Useful any Where.

    Thanks For Sharing Sir.

  30. Lisa Marten

    Can I put the comment box to be fill in above the list of posted comments instead of below?

  31. 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

  32. 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?

  33. 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

      • 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.

  34. Erick

    How do you make comments look like this website?

  35. 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

  36. 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

  37. 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 !

  38. 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.

  39. 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?

  40. 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…

  41. 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?

  42. 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.

  43. 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;
      } 
      

      Admin

  44. 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.

  45. 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.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.