I would like to modify the actual HTML of the comment forms in WordPress. I know of the comment_form() function that WordPress provides, but it doesn't actually let me modify the html of the form. What I'm specifically trying to do is make a bootstrap responsive form, which is not possible with the options provided with the comment_form() function. I've tried looking all over the internet for a way, but to no avail. Can anyone point me in the right direction?
Let me clarify this:
I am looking to modify the actual FORM and containing DIV elements of the comment form, not just the fields.
The uncustomizable parts of the function comment_form() should (idealistically) be limited purely to code that is essential for security and proper form handling by the WordPress core. However, that is not the case. To explore the issue, I used filters (could have used arguments) to completely remove all the code that is customizable. I set all available variables to empty strings—that is, all the stuff mentioned on the codex page for comment_form().
Here is the left-over, non-customisable code from comment_form():
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/1#respond" style="display:none;">Click here to cancel reply.</a></small></h3>
<form action="http://www.[yourdomain].com/wp-comments-post.php" method="post" id="" class="comment-form">
<p class="form-submit">
<input name="submit" type="submit" id="" value="" />
<input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p>
</form>
</div><!-- #respond -->
Where does all this come from? At the bottom of the codex page for comment_form() it says…
Source Code
comment_form() is located in wp-includes/comment-template.php.
comment-template.php is linked and you can view the full code in the browser. comment_form() starts on line 1960. In fact, it’s the last function in that file. There are no arguments or filters that let you modify the residual code above. These lines of code are all moreorless “hard-coded”.
The text Click here to cancel reply. is the only text that survived my filter genocide. Strangely, comment_form() has back-up text for cancel_reply_link hard-coded into the function, in case it is passed to the function as an empty string. None of the other filterable items have hard-coded back-ups.
It is easy to see which bits of code are essential and which bits are non-essential for a HTML form. A little more difficult to judge is which bits are essential for a WordPress form. Some of the bits above were dynamically output (note that this is the first comment on a development blog with no other replies, no parent/child comments).
From the comment_form() function in comment-template.php you can draw out the code needed to produce the dynamic parts of the WordPress form. Then, with default arguments taken from the codex page for comment_form(), you could piece together a barebones form, hard-coding the desired fields, labels and wrapping HTML. I’m doing that now and putting my custom form function in my theme’s comments.php template file, which I call using comments_template() only in single.php (for this particular theme).
The result would be a full and proper, lean and mean WordPress comment form. But… it would be a form that could not be customized anymore using comment_form() arguments or related filters unless you went ahead and included the filter code in your own comment form function. Since you’re customizing the heck out it already, that’s probably not a problem. Similarly, all the WordPress actions would also be unavailable to you or any other plugins unless you also triggered those action functions in your own comment form function. Again, probably not an issue for you at this point.
But most importantly, the resulting form might break your theme if future WordPress updates change the way the core handles forms.
If you’re aware of those risks, you can probably rebuild a hand-coded comment form just from copying code on the codex page for comment_form() and in wp-includes/comment-template.php. I don’t have the finished code, otherwise I’d post it. But I will post when/if I succeed.
Right, that’s all from me for now. Bear in mind (all readers) that despite appearances, I am an amateur WordPress theme developer and my proficiency with PHP and WordPress is very rudimentary. Just writing up this post I learned a lot.
I’m also worried that a full and proper solution is already out there somewhere but I haven’t found it in my searches.
Just Create a New PHP file with the name of comment_form.php then paste all of your code. And your comment form is ready.
you shouldn't edit the wp-includes/comment-template.php file.
Keep this for your ref for more styling your existing comment form
http://codex.wordpress.org/Template_Tags/comment_form
Or this one
http://wordpress.org/support/topic/where-to-find-the-comment_form-function-in-wp3
Form code and action
<div class="comment-form">
<h2 class="comments-wrapper-heading"> Leave a comment </h2>
<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<div class="commentform-element">
<label class="hide" for="author">Full Name</label>
<input class="input-fields" id="author" name="author" type="text" placeholder="Full Name" value=""/>
</div>
<div class="commentform-element">
<label class="hide" for="author">Email</label>
<input class="input-fields" id="email" name="email" type="text" placeholder="Email" value=""/>
</div>
<div class="commentform-element">
<label class="hide" for="comment">Message</label>
<textarea id="comment" class="input-fields" placeholder="Message" name="comment" cols="40" rows="200"></textarea>
</div>
<input name="submit" class="form-submit-button" type="submit" id="submit-comment" value="Post comment">
<input type="hidden" name="comment_post_ID" value="22" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</form>
</div>
WP does not offer a way to create and use a comment form template. i.e.: as of 4.1.1, there's still no way to control all of the HTML markup that makes up the form. There are only ways to edit parts of it and that's by supplying arguments to comment_form().
So, if you would like to edit the whole layout (e.g.: place some of the content side to side instead of on top of one another; replace some of the <p>with <div>), you're out of luck.
What can we do?
An option would be to borrow the whole comment_form() function from the WordPress codebase (like this guy did): make a copy of the function in your theme, rename it, customize it and then call it in place of the vanilla function. That will work but there's a chance it might break on a future WordPress update if some of the inner workings of WP change.
Did you look for the comment_form() function in Wordpress code to see if you can edit it ?
You'll also find some informations here :
http://wordpress.org/support/topic/editing-the-comment-form
This function uses the default form. You need to make a comment-template.php file in your theme and in that file you can make your form.
Now when you will call comments_template() you will get your made form instead of default form.
I don't think you can change the containing div (<div id="respond" class="comment-respond">). Have a look at the comment-template.php
The only thing you can change is the form ID. 'id_form' => 'commentform'
You can make a responsive form without changing these elements.
I've recently answered something similiar on WPSE. You can go and check it out here
Related
I'm working on customising a Wordpress theme called BusinessFinder+. It seems like a really solid theme but I'm getting pressure from my client to make some difficult tweaks.
I'm sure there is a simple snippet for the functions.php file but my skills don't stretch that far.
I'm trying to change the placeholder text for the homepage seach form (just below the hero slider):
https://www.betauk.com/nebetasi/
The current text is "Search keywords", we need it to be "Search members".
Also, there's another search form layout here (on top of the hero image):
https://www.betauk.com/nebetasi/about-beta/
This has the same placeholder text problem, instead of "Search keywords", we need it to be "Search members".
I've tried a simple "str_replace" snippet but it doesn't touch what's in the search forms. I've tried a "str_replace" on other text sections of the homepage (for example) and it works.
Can anyone offer any tips?
If you are not able to find the way to change your placeholder then you can do this by using jquery.
Please check it:
$(document).ready(function(){
$('#searchinput-text').attr("placeholder","Search members");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" name="s" id="searchinput-text" placeholder="Search keyword" class="searchinput" value="">
with using this code, your both search text box placeholder text will be changed.
Thanks.
Why don't you just go into where the form is (either in widgets or possibly in appearance->editor and amongst the files there) and find the form widget and edit the forms placeholder attribute?
<input type="text" name="s" id="searchinput-text" placeholder="Search keyword" class="searchinput" value="">
I'm working on a site for a client, who has specified he wants to replicate the functionality of the Rehab center database drop-down form on WordPress located at http://brainandspinalcord.org/ for a section on his own site.
I would like to modify the contents to be filtered by a tag assigned to a page, so that adding to the list is a simple matter of assigning that tag to a page; A plugin solution is preferred, but rather difficult to find, as the word drop-down is used generally for header menus that expand on hover to show sub-pages.
Instead, after researching, I found this code:
<li id="pages">
<h2><?php _e('pages:'); ?></h2>
<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_pages(); ?>
<input type="submit" name="submit" value="view" />
</form>
</li>
How can I add a tag based filter to this?
Further research into the subject turned up Documentation on the function which I found an argument for child_of that will generate the desired functionality.
CMF MODX revolution
There is a template with a form
<form action="http://localhost/index.php?id=3" method="post">
<input type="name" name="name">
<input type="search" placeholder="Все товары" name="search_bar">
<input type="submit" value="">
<div style="clear: both;"></div>
</form>
which call a snippet which contains debugging line:
echo '|||||||||||| ', $_POST['search_bar'];
The problem.
If I put a value into search bar - echo will not show anything. But if I save the template
before I putt the value into the search bar and click submit button, then echo display right value from the search bar
Suppose the problem is in caching. But I cleaned it and it is cancelled everywhere (at least I think so, exploring administrator panel).
For Snippets that depend on user input (like a search query) you will want to call them uncached: [[!mySnippet]]
However if you want to gain a bit of performance you can wrap the Snippet call with Jason Coward's getCache, and by default it caches to a unique cache key based on the $_GET parameters. In other words, each search query would get its own cache object. This helps when there are repeat searches for the same string.
I know that the question has been asked before, why isn't my code saving, but this tutorial was recently recommended by a user here, and I have been following it from tuts plus, (obviously changing variables and options to fit my needs), but for some reason the little bar that says settings saved will come up, and the save button comes up, the form itself, it all looks right, but when I hit save, it is gone from the form. Keep in mind that I have only tried saving the settings for the first options, site logo url. Here is my code, it is properly included in the functions.php file.
PS: Sorry for it all being together, PHP and HTML, but that was the only way to get it all together in one post, plus, I like to put things in separate files after I finish.
<?php
if (!current_user_can('manage_options')) {
wp_die('You do not have permission to view this page, if you believe that this is a mistake, please contact your system administrator, or try closing the tab and come back.');
}
add_action("admin_menu", "setup_where_now_admin_menus");
function setup_where_now_admin_menus() {
add_menu_page('Front Door Theme Options', 'Front Door Theme Options', 'manage_options', 'where_now_elements', 'where_now_options') ;
}
?>
<?php
function where_now_options() { ?>
<div class="wrap">
<h2>Front Door Web Design Custom Theme Options</h2>
<form method="post" action="">
<h4>Site Logo URL</h4>
<p>Remember, this is the image used in places like your header, or anywhere else you want your logo to appear, and if you are having trouble remembering how to use this feature, you can always upload your new logo to the media section in Wordpress, get the URL from the specific images page, and then paste it here!</p>
<input type="text" name="site_logo" value="<?php echo $site_logo;?>" size="25">
<h4>Analytics Tracking Code</h4>
<p>Any code used for tracking purposes that is placed in the header goes here</p>
<input type="text" name="analytics_code">
<?php
$site_logo = get_option("where_now_site_logo");
if (isset($_POST["update_settings"])) {
$site_logo = esc_attr($_POST["site_logo"]);
update_option("where_now_site_logo", $site_logo);
?>
<div id="message" class="updated">Your Changes Have Been Saved</div>
<?php
}
?>
<input type="hidden" name="update_settings" value="Y" />
<input type="submit" value="Save settings" class="button-primary"/>
</form>
</div>
<?php
}
?>
Any ideas?
I recommend you to use this Plugin: Option Tree
It is very simple and doesn't need any coding.Just install it on your website that your theme is running,then you can manage your options easily.
Before I write a few questions I need to said that I tried to made a custom drupal login on a way which is described here: https://stackoverflow.com/questions/19737229/custom-login-form-in-a-drupal-7
So, that means to override http://example.org/user login page. That doesn't work in my case because I can hide header & footer (because they are built on a different way without using drupal blocks).
Now I turn to a different solution. I create a custom content type 'login' and a custom template file as you can see below:
http://www.will.sx/login
Now I need a drupal log in functionality to integrate in my custom form.
Here is HTML code:
<div id="form-wrapper">
<form id="login">
<h1>billing & support</h1>
<input type="email" id="email" name="email" placeholder="Type your email">
<input type="password" id="password" name="password" placeholder="Type your password">
<input type="submit" value="Login">
Forgot password?
</form>
</div>
Now I need a PHP code to make this log in form useful. Every kind of help is welcome.
If you do it that way you would have to validate your form with drupal_validate_form() or else your website will be prone to an sql injection attack.
However, you can implement a much easier and secure method by creating a whole new page layout for just the user login page that will override the page.tpl.php template by using template_preprocess_page in your template.php file. Copy the following code into template.php:
function yourthemename_preprocess_page(&$variables) {
$url = drupal_get_destination();
$url = $url['destination'];
if ($url == 'user/login') {
$variables['theme_hook_suggestions'][] = "page__user_login";
}
}
Create the file page--user-login.tpl.php in your templates folder.
You can copy and paste your original page.tpl.php code into page--user-login.tpl.php, remove whatever you don't need, and flush the cache.
I create a custom content type 'login' and a custom template file as you can see below:
Sorry, but this is very bad approach.
I don't understand, why you can't just redefine user login form, but instead of creating custom content type you can create you custom page using hook_menu() (or redefine standard with hook_menu_alter()). Note, that in code of your custom pages you can redefine all Drupal output, if you needs this (just print result, and not return it from page callback).
See api.drupal.org for hooks declaration & examples.
Then, in code of your page callback, just print your form, something like this:
print drupal_render(drupal_get_form('my_login_form'));
I recommend you to use standard login form form (with id "user_login", just replace 'my_logn_form' in above code to 'user_login'), because drupal login logic isn't simple for repeating.
About creating custom pages: https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_menu/7