I have started learning WordPress recently. I am trying to create a custom form for users to post data using a custom post type which I have created without plugin. For this I have created a custom plugin and activated it from admin. But when the page loads I don't see the form, rather it displays the name of shortcode
as text. I already checked another StackOverflow post Shortcode rendering as text not as shortcode should but could not understand properly how it relates to my problem.
My plugin looks like this:
<?php
/*
Plugin Name: Custom frontend entry form
Description: Custom frontend entry form for publishing trip reports by users
Version: 1.0
Author: Subrata Sarkar
*/
/* Register Custom Post Type */
function trip_report_init() {
//Set up labels
$labels = array(
'name' => 'Trip Report',
'singular_name' => 'Trip Report',
'add_new' => 'Create New Report',
'add_new_item' => 'Create New Report',
'edit_item' => 'Edit Trip Report',
'new_item' => 'New Trip Report',
'all_items' => 'All Trip Reports',
'view_item' => 'View Trip Report',
'search_items' => 'Search Trip Reports',
'not_found' => 'No Trip Report Found',
'not_found_in_trash' => 'No Trip Report found in Trash',
'parent_item_colon' => '',
'menu_name' => 'Trip Reports'
);
//register_post_type
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => 'trip-reports'),
'query_var' => true,
'menu_icon' => 'dashicon-normalize',
'supports' => array(
'title',
'editor',
'excerpt',
'comments',
'author',
'thumbnail',
'page-attributes'
)
);
register_post_type('trip_report', $args);
//register taxonomy
register_taxonomy('report_category', 'trip_report', array(
'hierarchical' => true,
'label' => 'Report Category',
'query_var' => true,
'rewrite' => array('slug' => 'report-category')
));
//echo 'Trip report entry form';
}
add_action('init', 'trip_report_init');
/* Ends registration */
/* Build the form */
function trip_report_entry_form() { ?>
<form id="trip-report-entryform" name="trip-report-entryform" method="post" action="">
<div class="row">
<div class="col-md-12">
Report title <i class="red-text">*</i>
<input type="text" id="txtTitle" name="txtTitle" class="form-control" maxmaxlenght="30" required />
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-primary text-small" />
</div>
<div class="clearfix"></div>
</div>
</form>
<?php }
/* Ends form */
add_shortcode('new_trip_report', 'trip_report_entry_form');
//if ( shortcode_exists( 'new_trip_report' ) ) { echo "The shortcode exists";}
?>
But when I add the shortcode in a page content editor, the page does not render the form rather it only displays the name of the shortcode as text.
I referred http://teachingyou.net/wordpress/wordpress-post-from-the-front-end-with-a-custom-post-type/
To my knowledge I could not find any difference between the reference code and that of mine. What is wrong in my approach?
There are 2 issues in your code.
new_trip_report
while you're attempting to use new-trip-report
Return the HTML in your shortcode callback and update the registration.
function trip_report_entry_form() {
return '<form id="trip-report-entryform" name="trip-report-entryform" method="post" action="">
<div class="row">
<div class="col-md-12">
Report title <i class="red-text">*</i>
<input type="text" id="txtTitle" name="txtTitle" class="form-control" maxmaxlenght="30" required />
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-primary text-small" />
</div>
<div class="clearfix"></div>
</div>
</form>';
}
add_shortcode( 'new-trip-report', 'trip_report_entry_form' );
Further reading: https://codex.wordpress.org/Function_Reference/add_shortcode