WordPress is one of the most versatile content management systems available for web development. Many people transfer HTML to WordPress or migrate from other platforms to take advantage of its convenient features. They are also assured of an attractive interface because of pre-built themes or they can hire a WordPress theme developer to get an original template. Its user-friendly admin dashboard makes updating content and managing the website an easy task. Many owners, though want to incorporate a feature for visitors to submit content. This can be done by providing a form in the frontend for post-submission. Let’s learn about how to make a form for submitting WordPress posts.
1. Use A Shortcode For The HTML Form
Shortcodes in WordPress are single tags that let a user call in a predefined functionality like PHP functions. The HTML form will be displayed on a post, page or any other content type using the following shortcode:
add_shortcode( ‘wpgeeks_frontend_post’, ‘wpgeeks_frontend_post’ );
function wpgeeks_frontend_post() {
?>
<div id=”postbox”>
<form id=”new_post” name=”new_post” method=”post”>
<p><label for=”title”>Title</label><br />
<input type=”text” id=”title” value=”” tabindex=”1″ size=”20″ name=”title” />
</p>
<p>
<label for=”content”>Post Content</label><br />
<textarea id=”content” tabindex=”3″ name=”content” cols=”50″ rows=”6″></textarea>
</p>
<p><?php wp_dropdown_categories( ‘show_option_none=Category&tab_index=4&taxonomy=category’ ); ?></p>
<p><label for=”post_tags”>Tags</label>
<input type=”text” value=”” tabindex=”5″ size=”16″ name=”post_tags” id=”post_tags” /></p>
<?php wp_nonce_field( ‘wps-frontend-post’ ); ?>
<p align=”right”><input type=”submit” value=”Publish” tabindex=”6″ id=”submit” name=”submit” /></p>
</form>
</div>
<?php
}
A basic form can be created with the help of this shortcode. The user will also be presented with the option of choosing a category for the content being submitted. This is made possible by the wp_dropdown_categories() function call. It enables the website to display the HTML dropdown list containing the specified categories. Apart from the category, all the other information entered in the form will create a new entry inclusive of tags. Read the above code carefully and see another function wp_nonce_field() that has been included. Nonce or numbers used once protect forms and URLs from malicious activities and misuse. In WordPress, nonce is a combination of numbers and letters with a fixed lifetime after which it expires. Verifying nonce with the above-mentioned function call helps in preventing cross-site forgery attack.
Also Visit: Google Maps News – Chatting Features Coming Soon in Google Map Business
2. Capture The Input On Form Submission
The new form will submit the data on the page on which it is displayed. Another common method used by developers is to take help of admin-ajax to access the submission. They are also increasingly using REST API for the purpose. In this method to make a form for submitting WordPress posts, things have been intentionally kept simple so that beginners can easily understand the process. A simple call for a function which will save the post will be included in the shortcode. Let’s take a look at the first three lines of the code:
add_shortcode( ‘wpgeeks_frontend_post’, ‘wpgeeks_frontend_post’ );
function wpgeeks_frontend_post() {
?>
Replace it with the following lines:
add_shortcode( ‘wpgeeks_frontend_post’, ‘wpgeeks_frontend_post’ );
function wpgeeks_frontend_post() {
wpgeeks_save_post_if_submitted();
?>
Remember that the rest of the code will remain the same and save the shortcode with the call for this new function. We will now understand how to create this new function which will save the post content in the frontend. The code of the function includes guard clauses which will prevent any submissions with errors from getting validated. This is the code:
function wpgeeks_save_post_if_submitted() {
// Stop running function if form not submitted
if ( !isset($_POST[‘title’]) ) {
return;
}
// Check that the nonce was set and valid
if( !wp_verify_nonce($_POST[‘_wpnonce’], ‘wpg-frontend-post’) ) {
echo ‘Did not save because the form seemed invalid. Sorry’;
return;
}
// Do minor form validation to make content is present
if (strlen($_POST[‘title’]) < 5) {
echo ‘Please enter a title. Titles must be at least five characters long.’;
return;
}
if (strlen($_POST[‘content’]) < 500) {
echo ‘Please enter content more than 500 characters in length’;
return;
}
// Add the content of the form to $post as an array
$post = array(
‘post_title’ => $_POST[‘title’],
‘post_content’ => $_POST[‘content’],
‘post_category’ => $_POST[‘cat’],
‘tags_input’ => $_POST[‘post_tags’],
‘post_status’ => ‘draft’, // Could be: publish
‘post_type’ => ‘post’ // Could be: `page` or a custom post type
);
wp_insert_post($post);
echo ‘Saved the post successfully! :)’;
}
The echo statement is used for showing errors and then return will help go back to the form. A visitor will see the form for adding the new post and the success/failure message will appear before it. In order to put some protective measures, the guard clauses have been inserted. There is the feature for adding a title along with minimum character limit followed by one for content. This will help in minimizing the chances of spam content being entered by attack bots. Nonce has also been set for the form submission. The wp_insert_post() function is used for creating the actual post by including an associative array of the post content. The post_status will help in uploading the content immediately and post_type in selecting the post type. This completes the process of creating a form for frontend post-submission.
Conclusion
This simple method to make a form for submitting WordPress posts will be useful for people looking to add the feature in their websites. They can also take help of plugins that are available for the purpose or engage professional WordPress developers.
771 total views, 1 views today