Comments play a crucial role in building a community on the internet. Comments provide a platform for interaction for your readers where they can share their thoughts which very often keeps them coming back.
There are several ways to encourage users to leave a comment on your blog. One of those ways is to create a beautiful, usable, and accessible comment form.
In this tutorial, we will show you how to style the default WordPress comments form, we will also show you how to add comments functionality via social media IDs and how to create comment subscribe functionality and much more. more.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
How to change the style of comments WordPress
When we talk about style, we mean the CSS side of the thing. Below, I will show you how to customize the look of the comments form in WordPress. Each element by default on WordPress has a CSS code, this is the case of the list of comments, navigation menus, the comments form, the widgets and more.
Among the files of WordPress themes, we have a file named comments.php
which is used to display comments and comment form on blog posts and pages. To display the WordPress comments form, the " comment_form () " is used.
Discover How to find the link to the WordPress login page
By default, this function generates your comment form with three text fields (name, email and website), a large text box, for the comment content and the submit button.
You can easily modify each of these elements just by manipulating the default CSS classes and identifiers. Here is a list of the default CSS classes that WordPress adds on each comment form.
#comment {# #} {# # #} # comment # reply-link {} #comment # .comment-form-author {} .comment-form-email {} .comment-form-url {
By simply adjusting these CSS classes, you can completely change the appearance of the comments form. Let's try to change something to give you an idea of ​​what we can do.
Discover How to replace image links after installing SSL on WordPress
First, we'll start by highlighting the active field of the form. By highlighting the active fields, users can easily see what they are changing and it gives a little dynamic side to your website.
#respond {background: #ececec; Padding: 0 5px 0 5px; } / * Highlight the active text field * / # match 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; } # Input input [type = text]: focus, textarea: focus {box-shadow: 0 0 5px rgba (81, 203, 238, 1); Margin: 5px 1px 3px 0px; Border: 1px solid rgba (81, 203, 238, 1); }
Here's what your comment form will look like with Twenty Twelve.
With the use of these classes, you can change the way text appears inside fields. This is what we will do in the following example.
#author {font-family: Lobster, "Lobster 1.4", "Droid Sans", Arial; Font-size: 16px; color: #1d1d1d; letter-spacing: .1em; } #url {color: #21759b; Font-family: "Luicida Console", "Courier New", "Courier", minivan; }
Here is the result that the previous code will produce.
You can also change the style of the comment form button. In the following example, we will give it a gradient background.
#submit {font-family: Arial; Color: #ffffff; Font-size: 20px; Padding: 10px; Text-decoration: none; Box-shadow: 0px 1px 3px #666666; -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; Text-shadow: 1px 1px 3px #666666; Background: -webkit-gradient (linear, 0 0, 0 100%, from (#006ad4), to (#003366)); Background: -moz-linear-gradient (top, #006ad4, #003366); } #submit: hover {background: -webkit-gradient (linear, 0 0, 0 100%, from (#003366), to (#006ad4)); Background: -moz-linear-gradient (top, #003366, #006ad4)}
Here is the result that will be displayed.
How to add social interaction in comments
Let's start with adding social logins to the WordPress comments form. The first thing you need to do is install and activate the plugin Social Login
Discover How to install a plugin in WordPress To activate this plugin you must create a free account by going to the following address: https://app.oneall.com
Once that's done, you won't have to configure an API for every network you want to use to let your users connect through them.
Although the APIs of different social networks are constantly changing, you won't have to do anything, the developers of this plugin will update their APIs for you. All you need to do is log into the OneAll API.
This is how your forms will display.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. WP Instant Search & Auto Suggest
The "WP Instant Search & Auto Suggest" plugin allows you to instantly get suggestions for articles, pages and custom post types when searching your WordPress blog. It works with WPBakery et Cornerstone.
Its features include: the rsearch in full screen mode, the rInstantaneous search for custom types of publications, compatibility with Visual Composer, Tthree integrated design styles, 5 color schemes to choose from, the pkeyboard and mouse support, efully customizable via parameters etc ...
Download | Demo | Web hosting
2. 404 Error Page Redirect to Homepage or Custom Page
Here is one of the best ways to easily add a 404 error page that will redirect the visitor to the homepage or custom page, after enabling this WordPress Plugin.
All 404 error pages will be redirected to the homepage or a custom URL. By using this WordPress Plugin, you will allow Google to reduce the pagerank of your website if it has many 404 error pages.
Ce WordPress Plugin does not just do redirection but it can also be a suitable solution to improve the ranking of your website in search engine results.
Download | Demo | Web hosting
3. Related Posts
Related Posts Pro provides a simple yet powerful solution for all kind of similar content on WordPress. It supports custom post types, multisite, categories, mixed content, custom content, and more ...
As features it offers among others: 3 different types of layouts, 65 predefined templates for each layout, ano coding will be necessary, the support of tbrowsing and Autoplay, compatibility with the custom post types used by plugins WooCommerce, WP eCommerce, bbPress etc ..., a search bar with filter, a dvery descriptive documentation and much more.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to display the description of the categories on WordPress
- How to optimize your WordPress Robots.txt file for a perfect SEO
- How to create a Marketplace with WordPress
- How to add a widget to the header of your WordPress blog
Conclusion
Here ! That's it for this tutorial. We hope this article has helped you make your feedback forms more engaging. Do not hesitate to also offer us your tips on customizing WordPress, and especially share this article with your friends on your favorite social networks.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.
If you have suggestions or remarks, leave them in our section Comments.
...
Thank you for this tutorial, but how to modify the initial translation
For example Submit a Comment is translated by Post the comment
I would like to change in Post a comment
I have nowhere found a .po where this text is found which appears in the comments.php file
Thanks for your help
Hello,
You have to look in the WordPress theme files that you use.
I searched all the language files but found nothing
In this case, please contact the seller of the theme if it is a premium.
I don't know how to write here