Comment Form with airSlate SignNow

Comment form

hey what's up guys Alex here thank you for checking this video and welcome to the episode number 44 of the series of tutorial on how to build a premium theme for WordPress welcome again in this tutorial we're gonna take a look on how to create a comment section for our wall single dot PHP file so if we access our single dot PHP file we notice that we already kinda activated a comment section and we checked with this if statement if we have the comments open on the blog post because as you know in WordPress you can manually deactivate the visibility of the comment section per post so we don't want to pre in the comments template if the comments are not open so if the user the admin doesn't want the comment to be available d function comments template before version 3.6 used to activate automatically the comment section so everything basically the list of the comments plus the comment form and it still does but it's a bad practice so let me show you what I mean if we access one single blog post here at the bottom we notice that we don't have anything because I created a file called comments dot PHP this file is empty right now but is the file that WordPress automatically calls when you call the function comments template if we don't have this file in our template for example I rename these with test dot comments dot PHP just to mess up with WordPress for a second if we go in the front end again we refresh and we're gonna notice that here we have a comment section we have our comment form and these actually works but we have a warning and the warning is a the since version 3 the a theme that calls the function of comments template without having actually the comments dot PHP file is deprecated so this section still works because that's how WordPress handle style WordPress is backward compatible so if your theme was built for a version of WordPress prior to 3.0 your theme still works can still work with that not WordPress but if you have a newer version you need the comments dot PHP basically what we're gonna do we're gonna create the comments dot PHP and we're gonna code inside our custom comment section let's go back in a war text editor and let's rename again this file let's revert it back to comments dot PHP let's go be the first part of whatever template we created so at least we have the consistent adder everywhere let's access the comments dot PHP file let's paste this section here and we don't want to call the get adder of course because these comments template is gonna get cold inside the single dot PHP so we don't have to call header or footer or whatever a small check that we have to do for safety for security issue east to check if the post required a password to be watched to be seen so to do that it's simply we have to call a prebuilt function of wordpress as usual so we can have an if statement and inside the if statement we can call the function of post underscore password underscore required and this function doesn't need any parameter because these comments is inside the post loop so automatically this function is gonna retrieve the post ID and check if the post is password protected if it's password protected this is through so we can execute our custom code and our custom code it's simply gonna be returned so in PHP if you have just a return without any declaration without anything in this return is gonna block it's gonna stop the execution of the script so whatever you have after the return is not gonna get printed of course this function is pretty smart and it's gonna recognize if you as a user you are logged in with a specific account that gives you the ability to watch to look at this post so this is pretty good if you had at the beginning of the comment we don't want to show comments of a protected section that probably the user shouldn't see now let's create a little bit of standard HTML and the HTML that we have to use we should really follow these logic of wordpress because especially the comment section is one of the section that it's not really good in WordPress I mean it's good it's it's a good section here's now it's not bad coded or anything but it's pretty standard pretty streamlined there are not many options and if you know these most of designs it's really easy to activate a plug-in to automatically replace this section like Disqus or the jetpack comments if we build our common section with the default structure of WordPress all the plugins are gonna be automatically compatible with our theme and with our comment section let's follow this logic and let's be sure that it's comfortable everything first let's create a div then it's gonna wrap everything and the deep has to have an ID called simply comments let's give it a class of whatever you want in my case is gonna be comments area it's pretty standard and let's close this div and of course let's apply this class as the closing comment so we know that this day belongs to this section now we can simply call to show the first thing that we are interested into showing is the comments form the comments for we don't have to build it WordPress comes with the comments form built in that's why it's showing in our front-end even if we didn't have the comments PHP file to call the comments for we have to just simply call the function comment underscore form pretty standard right let's save it let's go back in a war front-end and let's refresh here we won't have anymore the error because we generated the comments to PHP and we have the form here the form if we analyze if we inspect the element you will notice that the form has a structure that it's kind of outdated I mean it works it's fine is a form ID with a simple post method that it's pointing to the right location of our comments post the PHP that is a default file of WordPress but the structure the HTML structure is can out data especially the labels and stuff it's like HTML 4 we have the ability to activate the HTML 5 derivation of this form that it's something new that WordPress implemented in version 3.6 to activate the new version of the form plus other cool things that we can activate at the same we have to extend our themes support file and activate a new theme support option so let's take a look on how to do it let's access the code editor again and let's go inside our ink folder and in the themes support PHP before starting the section where we handle the blog loop and all the custom function we can add a new theme support option and here we can write just a simple comment by creating activate html5 futures and wordpress comes with a lot of cool html5 futures of course like other things up or options we don't have to put these stuff inside an action hook or a filter because the theme support options are functions that they work by itself they get activated automatically so we can write it directly here outside without writing any functions or any action to activate this specific option so let's call the ad underscore theme underscore support and inside the regular bracket has a first parameter we want to specify that I won't activate the support of html5 let's put a comma as a second parameter we have to specify an array of all the sections that we want to tell WordPress to activate and convert in html5 let's create an array and inside here let's write all the sections that we want activate so in my case I want activate the comment - list the second parameter and the second section that I want to convert in html5 is the comment - forum or comment - forum if you want another section that I'm gonna use in the future but I wanna activate it right now because I'm doing so let's say sometimes is the search form and if you remember I really did did in the WordPress 101 series where I converted the form from an HTML 4 to an html5 markup by simply adding this theme support and then because we're here let's activate also a couple of options inside the blog there are the gallery and the caption for images so let's save it let's go back in our front-end let's refresh and of course visually nothing changed everything is as it is as default but if you notice the mark-up has changed now we have some data attribute here like the no valid a data attribute and inside a input we have also the type of input change we have some data attribute and this is pretty cool let's keep going let's keep coding our comments dot PHP now we have the comment form the other thing that we have to do we have to print our comments if we have comments so first we have to check if we have comments let's create another PHP section so let's open again the PHP tags and let's check if as an if statement actually let me go another row because we have to write a lot of things here if have comments open and close the bracket and if you notice this is pretty similar to the function he've have posts so you notice that wordpress kind of maintains the consistency of its own source code and it's easier to remember it's easier to understand so we're checking if these inside these posts there are any comments if there are any comments we can generate comment section otherwise we can write something else or we cannot write anything column and if so inside here we can write a comment say we have comments let's close this PHP let's reopen in here before writing hold the section for the comments to visualize the comments and write whatever number and whatever posts navigation for the comment I want to create another level of security another level of safety to check if the comments are still open we already have this if comments open do not call the comments template but could happen that sometimes the user access directly our single post or sometimes that function doesn't work or for whatever reason our common template gets included inside the single post even if the comments are closed so we want to check again if we have the comments if the comments are open for our posts and to do that we have to create another if statement then it's going to be slightly different from the one that we have outside so the if statement is gonna be F open and close the brackets it's climbing shemar to say if he's not so if the comments open it's false so if the comments are not open but we have some comments that were added before so maybe the comments were open and then they close this so we can actually have some comments inside here but we want to close it right now we want to say to the user that there are comments here but the comments section is closed so let's check double on % is a and we could write potentially also and or uppercase but double ampersand looks way better and get comments number this is a function that returns the number of comments and if we evade this function is through if we don't have this function is false so if both of these state statements are correct so the comments are closed and we have comments we can print a custom message and that's close and if with a semicolon and the custom message can be whatever we want like comments or clothes or whatever let's let's do it let's close the PHP tags let's remove extra space that we don't need let's reopen the PHP tag for the end F and let's remove these extra space and inside here let's print a little bit of HTML so first let's create a paragraph we'd a class of maybe let's create a class called no comments just whatever let's close the paragraph and let's reopen the PHP tags and let's use an escape HTML II and this is another sanitization building function of wordpress to clean some HTML string that we wanna print and we want to pass we want to be sure that these string whatever text we're gonna write has been escaped before and this function gives us the ability to associate these tags to a specific text domain that we're gonna see in the future why it's kind of important having a text domain when we escape something but for now just follow this and everything's gonna work no worries so here we can write for example whatever you want in my case I want to write comments are closed dot and my text domain of course is Sunset theme semicolon let's save it let's go back in our front-end let's check if you broke something we didn't break anything everything looks good so that's nice and now here we can start coding our comment section for now let's simply create an numbered order list with the HTML tag oh l as the automatic is gonna add numbers and let's give it a class of comment - list let's close this Oh L order number list and here we can use a default again a predefined function of WordPress to automatically grab the list of comments that are inside the this single post without us doing anything crazy we can use a pretty funky the pre default function is called WP list comments so let's open again the PHP tags and here let's call the WP underscore list underscore comments anytime here we have two arguments that we can specify the first one is a list of arguments that it's an array to style properly the entire list of comments how we want it and the second parameter is the list of comments the actual list of comments by default we don't have to specify the second parameter because automatically its grabbed because we are in the post loop with the function get comments we could potentially in the future having comments inside a post from another post so if we want to add a know print to different type of Lists comment from two different post into one single section you can customize these to retrieve the list of comments from another post but for now we don't need to use it so the second parameter is optional we don't have to use it the first parameter we have to specify a list of arguments so let's create this list of arguments and let's see everything we can specify so first let's create a variable called args inside here let's open an array of arguments semicolon at the end and let's write all the arguments that we can have inside this section so first we can specify the walker the walker is exactly the same has the walker enough menu how we created a custom class to edit the printing of comments so we can change fundamentally change the structure of the list of comments that gets printed like we did in the menu for now we want to live in node so we can write no by default these parameter is null as well but just to show you all the parameters that you can customize I'm gonna write it down and then I'm gonna delete the parameters that are needed are null or empty or whatever the second parameter is the max depth the max depth is a parameter that we can use to stop WordPress to retrieve comments there are below a certain type of indentation so how deep we wanna go if you know this sometimes in WordPress in some blog you can comment that you have an answer and then you have an answer to the answer and then you have an answer to that answer to the answer and so on and WordPress keeps indenting those stuff so it doesn't have a sort of like forum indentation of managing of comments but every time you write a comment as a reply another comment it gets indented and in this case we do max that we can say to WordPress for example we wanna we don't want to pray in comments that go below the fourth level so if we have a comment indenting a comment in a comment in a comment or come we want we don't want to frame that we don't want to mess up with those stuff we want to just print the first four level of comments maybe three levels by default this parameter is empty so it means that WordPress is gonna retire if all the comments that we want we can use these to maintain a little bit cleaner a little bit more cleaner our comment section the third parameter we can specify the style of our list that these WP list comments is gonna retrieve the common list can be either a div and of course we have to specify in a string so can be a div or can be an order list or a numbered list we are already in a number list we could potentially keep going and having the number list so let's do that let's leave it like that for now the fourth parameter is the code back the code back gives us the ability to call a function every time we print a specific comment so you could potentially heavily customize whatever happens to your layout when you when this function is generating the single comment one by one for now we don't need any here and he called back we don't wanna heavily customize this stuff so we don't need any callback so by default this parameter is null the other parameter that is basically identical to the first one is the end call back the and call back is basically identical to the call back but this function gets called at the end of the generation of whatever comments so if this callback gets called at the starting of the creation of one single comment these Colbeck gets cold at the end of the single comment so you can potentially heavily customize everything every time you have a comment generator maybe you could run an array of something or you could run a custom function to create something unique every time there's a comment prints you can have an animation or something whatever every time you want for now we're gonna leave in null because we don't want to create anything but be careful with these two parameters because if you create on a heavy function I had a callback function you could potentially really slow down the speed of your page because this callback and then go back they get cold every time you have a comment in your post so if you have 20 comments you're gonna have 20 callbacks and 20 and callback so you're gonna call busy 40 functions and it's it's not really funny it's really heavy yet a parameter we can specify the type of comment that we want to print WordPress doesn't have just one single comment that in this case is comments but we have a different type of comments so we have Trackbacks ping back or pings and pings includes both track back and ping back and they are together by default I suggest you leave also we're gonna have all the comments or track backs of ping bags or pings but if you want you can just simply limit this list to comments and maybe having another lease that handles just the track back or the ping back so everything is more organized but for now because I want to print everything I want to leave everything to all the other parameter is the reply text that is the small button a small link that appears at the end at the bottom of every comment by default it's set to reply and I think I'm gonna leave it like that but of course you have the ability to customize these tags and like reply to this comment you can write whatever you want I want to leave it to reply because it's easy and it's quick to understand the other parameter is page with this parameter we can specify which page we wanna print of the com least yes also the common least half pagination because of course you could have potentially a lot of comments and you don't want to bring them all to slow down your theme but you want to split them in pagination with this link you can with this parameter attribute you can specify for example if you want to pray in just the comments on page one and you don't want to print any comments on page 2 or page 4 or all the other pages you can limit this type of comments to page 1 but for me I don't need that so I'm gonna leave it just empty it means that the system is gonna print all the pages and I'm gonna create the pagination for me the other parameter is connected to the previous one is per page and this is exactly the same as the post loop we can specify how many items per page we want to show so how many comments per page we want to show by default the system grabs the settings that you have in your settings area in your administration panel but if you have a specific section maybe you wanna in the home page you wanna print only the most recent three comments you can specify three to limit this for example I won one page with three comments so you can have this list printed in a specific section and show just the three most recent comment for that specific post if you don't edit anything and we leave everything has empty the user can manage these options inside these settings admin panel and that's what we want we don't want to hard-code something that the user cannot manage maybe he doesn't want to any comments per page or ten comments per page you want just like three comments per page four comments per page or changes mine after a while so let's leave it empty to not affect the settings page the other parameter is the Avatar size so by default WordPress has type of Avatar section where automatically the system grabs your users your email account you access Gravatar and checks if you have an online account and grabs your picture for you we can specify the settings the other side so how big has to be and the system supports a number that goes from 1 to 512 512 8 pixel and it's pretty big so you shouldn't do it if you want you can use zero to completely hide the avatar so if we don't want that in the comment section there's any pictures we want to like a really simple streamlined theme we can specify 0 and hide the avatar even if the user has an avatar I want to go with 30 to search your pixel is gonna be a square that's gonna be pretty pretty good it's not gonna be gigantic but it's good enough to see to have some sort of visualization the other parameter is called reverse underscore top underscore level and if you want you can set these attribute to true if you wanna display the most recent comment first and then going back in order so by default WordPress prints the comments from older to newer so you have the older comment at the top and the more you go down you have new comments if you want to revert it and having I don't know a sort of social media type of revert order you can specify these two through and you're gonna have at the beginning the most recent comments and at the bottom the least recent comments of the oldest one I don't want to edit this so I want to just leave this to null so automatically the system will print the default order so older at the top and you were at the bottom the other parameter is kind of concatenated to this one but not really but it's kind of similar it's called reverse children and these you have pretty much the same options so reverse the order of how WordPress prints the post but this is only affecting the children so if you have a reply to a main comment like first level comment you can reverse the children so you can reverse the order of those comments associated to a main one and in this case you can specify no or you can specify false or you can just leave it empty if you don't affect anything but if you want to reverse the order of the children on specific comment you have to specify true for now I don't want to specify anything so I can leave it empty let me actually order or this stuff so they're gonna be probably online and it's easier to understand the other parameter we're almost at the end I swear is the format parameter and these we can completely skip it because the format gives us the ability to force the comment section the comment list to use html5 markup but because we already specified the comment list inside the html5 theme support option we don't want to specify anything we don't need to specify anything so we can leave it completely empty by default I'm gonna leave it html5 because so you have a place over for this but if you want for example a list with html5 and another list we not html5 which is standard you have the ability to customize list beliefs without having a global option in the theme support settings the other parameter is the short underscore king and of course always with single quotes let's not forget and this parameter is a boolean we can have true or false and this parameter gives us the ability to maybe false if already properly gives us the ability to specify if we want a regular pink or a sharpie so the pink is the way the HTML process this type of format of the comment if the comment is set to have pingback and trackback and we set the shopping to true we are gonna change the pink method to use a different format just like a shorter paying so to have a more compressed last information being that we have to transfer that we have to send with our pink method this is not really important it's not something that we have to care much by default is set to false and it's an option that was introduced in were 3.60 let's leave it to folds because we don't want to affect the pingback functionality of the comments if a user pingback comments from another blog post or another website completely we can customize the response but for now just leave it false and it doesn't really matter the last parameter is the echo parameter and the echo is pretty useful because we can force these WP list to just return the value so if we specify it through this WP list comment is gonna print everything whatever we to this function is gonna just completely print if we specify false and I still don't know how to write false this function is not gonna echo anything is just gonna return it and if you know the difference between return and print we're gonna have the ability to inject the result of our comments inside a variable or putting somewhere else inside a container and then printing echo it whenever we want not when we call the function and this is pretty useful for now I'm gonna leave it as through because I like it like that let's save it and of course let's inject these dollar arguments inside the WP comment least array of course you can just leave it empty like you don't have to specify these list of arguments are completely optional but these list of arguments give us the ability to customize heavily customized is the result of our comments list let's go back in our front-end and let's refresh to see if we did some error in PHP we don't have any PHP error so it means that we didn't write anything wrong and this is great so for now we're gonna stop we're gonna pause this tutorial about the comments and we're gonna continue in the next lesson where we're gonna create a couple of placeholder comments in our single post file and we're gonna see how everything gets printed plus we're gonna take care of printing a custom title for the post comment so we're gonna check how many comments we have for this specific post and we're going to check how many pages we have and we're gonna handle the pagination of the comments and it's gonna be pretty interesting because we have to customize also the title dynamically based on the number of comments and the page that we're looking at so it's pretty much it for today's lesson I hope you enjoyed it if you did please give it a thumbs up or subscribe to my channel and if you want you can spend a couple of minutes to check the soup or me page on my website where you can find all different ways and methods to support me support my channel and help me to do better videos and better tutorials for you thank you again guys and until the next lesson as usual happy coding