I would like to customize the output of comment_form() function in WordPress.
To edit fields and textarea, I used the following code and all works fine.
<?php
$req = get_option( 'require_name_email' );
$fields = array(
// redefine author field
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name:' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label>' .
'<div class="input-prepend"><span class="add-on"><i class="icon-user"></i></span><input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . 'aria-required="true"' . ' required /></p>',
'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email Address:' ) . ( $req ? ' <span class="required">*</span><br/>' : '' ) . '</label>' .
'<div class="input-prepend"><span class="add-on"><i class="icon-envelope"></i></span><input required id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . 'aria-required="true"' . ' required /></div></p>',
'url' => '<p class="comment-form-url"><label for="url">' . __( 'Your Website:' ) . '</label>' .
'<div class="input-prepend"><span class="add-on"><i class="icon-globe"></i></span><input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div></p>'
);
$comments_args = array(
'fields' => $fields,
// redefine your own textarea (the comment body)
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . 'Comment' . '</label><textarea id="comment" name="comment" class="span12" rows="5" aria-required="true"></textarea></p>',
);
comment_form( $comments_args );
?>
This is the result:
Now, I would like to add two CSS class (class="btn btn-primary") for submit button; how can I do that without using jQuery?
Note:
For the solution, please read comments about answer marked with green sign.
As krizna said, you can modify your theme's comments.php file to alter the output of comment_form(). I think that might be your best bet in this situation.
If you take a look at the Function Reference for comment_form() in the Codex you'll notice that you can only modify the ID for the submit button, and not the class. There are a few tickets on Trac regarding this:
http://core.trac.wordpress.org/ticket/20446
http://core.trac.wordpress.org/ticket/15015
If modifying comments.php doesn't work for you in this situation, you can try applying one of the patches.
Related
Hi everyone I need help I am new to the API and also new when it comes to building a custom plugin in WordPress. I have a task that I want to achieve. I have a form and when the users submit it, it's added to the MailChimp for subscribers. It's all working but I don't want to add the api key and list id in the code. I want to add it on the admin side. It means I want it to be dynamic. Here's the code . The code is not mine. I just combined this code that I got on the internet, so credits to them.
/*
Plugin Name: API
Description: Simple form connecting to API
Version: 1.0
Author:
*/
// i already added a admin menu where the api key and list id should be added
add_action('admin_menu', 'test_plugin_setup_menu');
function test_plugin_setup_menu(){
add_menu_page( 'Test Plugin Page', 'API', 'manage_options', 'test-plugin', 'test_plugin' );
}
//this is the admin menu and also the form for api key and list id
function test_plugin() {
echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
echo '<p>';
echo 'API key (required) <br/>';
echo '<input type="text" name="api_key" autocomplete="off"" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["api_key"] ) ? esc_attr( $_POST["api_key"] ) : '' ) . '" size="40" />';
echo '</p>';
echo '<p><input type="submit" name="submit" value="add key"></p>';
echo '</form>';
}
`
//this is the form in the frontend where the user can submit and subscribe
function form_for_api() {
echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
echo '<p>';
echo 'Name (required) <br/>';
echo '<input type="text" name="users_name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["users_name"] ) ? esc_attr( $_POST["users_name"] ) : '' ) . '" size="40" />';
echo '</p>';
echo '<p>';
echo 'Email (required) <br/>';
echo '<input type="email" name="users_email" value="' . ( isset( $_POST["users_email"] ) ? esc_attr( $_POST["users_email"] ) : '' ) . '" size="40" />';
echo '</p>';
echo '<p>';
echo 'Phone (required) <br/>';
echo '<input type="text" name="users_phone" ' . ( isset( $_POST["users_phone"] ) ? esc_attr( $_POST["users_phone"] ) : '' ) . '" size="40" />';
echo '</p>';
echo '<p><input type="submit" name="send-form" value="Send"></p>';
echo '</form>';
}
function send_mail() {
// if the submit button is clicked, add to subscriber
if ( isset( $_POST['send-form'] ) ) {
$apiKey = 'api key should not to be put here it should be in the admin side';
$users_name = $_POST['users_name']; // the user name we are going to subscribe
$users_email = $_POST['users_email']; // the user email we are going to subscribe
$users_phone = $_POST['users_phone']; // the user phone we are going to subscribe
$list_id = 'list id'; // List / Audience ID
$server = explode( '-', $apiKey );
$url = 'https://' . $server[1] . '.api.mailchimp.com/3.0/lists/' . $list_id . '/members/';
$response = wp_remote_post(
$url,
[
'method' => 'POST',
'data_format' => 'body',
'timeout' => 45,
'headers' => [
'Authorization' => 'apikey ' . $apiKey,
'Content-Type' => 'application/json; charset=utf-8',
],
'body' => json_encode(
[
'email_address' => $users_email,//email
'status' => 'subscribed',
'status_if_new' => 'subscribed',
'merge_fields' => [
'FNAME' => $users_name,// first name
'PHONE' => $users_phone//phone
]
]
)
]
);
}
}
function api_shortcode() {
ob_start();
send_mail();
form_for_api();
return ob_get_clean();
}
add_shortcode( 'form-with-api', 'api_shortcode' );
?>
How i make change required message to any text ?
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields = array(
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' ></div>',
);
You don't need these parenthesis.
$aria_req = ( $req ? " aria-required='true'" : '' );
Replace it with:
$aria_req = $req ? " aria-required='true'" : '';
If $req has a value, render the aria attribute. And I don't think you need the $fields variable to be an array too, unless you're doing something else with it.
$fields = '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' ></div>';
I'm creating a wordpress theme from scratch and using the following in my wordpress functions.php file to be able to style protected posts.
The code, taken from here – tutsplus
However the code is giving my a white screen each time I try to login to the backend or update posts. Any advice on what I could be missing here would be greatly appreciated.
<?php
add_filter( 'the_password_form', 'custom_password_form' );
function custom_password_form() {
global $post;
$label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
$o = '<div id="protected">
<form class="protected-post-form" action="' . get_option('siteurl') . '/wp-login.php?action=postpass" method="post">
<div class="padlock"></div>
' . __( "You'll need a password to get in here" ) . '
<label class="pass-label" for="' . $label . '">' . __( "PASSWORD:" ) . ' </label><input class="post_password" name="post_password" id="' . $label . '" type="password" placeholder="Password"/><input type="submit" name="Submit" class="button" value="' . esc_attr__( "Submit" ) . '" />
</form></div>
';
return $o;
}
?>
EDIT — After removing the theme and playing around, the error is definitely in this .functions.php file, I'm just unsure where
Make sure there is no empty lines before opening from the functions.php.
I have a comments.php file with this code
$fields = array(
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
);
$comments_args = array(
'fields' => $fields
);
comment_form($comments_args);
I then include it with this:
get_template_part('comments');
But the comment form that shows is this:
Not at all what I want, where is my form?
You're logged in as the admin – try logging out and see what happens.
I'm using the default twenty_ten theme that comes with the latest Wordpress and modifying it. I just want to add a class to certain text inputs within the new comment form (specifically to add class="text" to make it play nice with Blueprint CSS framework).
I can't locate the place to do this. Not au fait with PHP but able to work my way around it in most cases - just can't seem to locate the form here.
Any help appreciated.
The comment form is output by the WordPress comment_form() function. To add a CSS class to specific inputs, you can change the $fields argument when it's called from the bottom of the TwentyTen comments.php file.
In the example below I've added class="text" to the author input field:
<?php
$fields = array(
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input class="text" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' . '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
);
comment_form(array('fields'=>$fields));
?>
Alternatively you could create a filter in your theme's functions.php that added the input class for you:
function my_comment_fields($fields) {
foreach($fields as $field){
// Add the class to your field's input
}
return $fields;
}
add_filter('comment_form_default_fields','my_comment_fields');
Login in to you Control Panel.
Open wp-includes folder from File Manager.
Select comment-template.php and Click Edit.
Go to the line 1541 or search for ‘’ Near to this you can see “Your email address will not be published. Required fields are marked *”
$fields = array(
'author' => '<p>' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />',
Read more at aTechguide.com http://atechguide.com/edit-comment-form-wordpress