How to make Guest post on Wordpress Frontend - wordpress

Question

Here is the code that I find to create a Form on the frontend page in WordPress to allow guests (visitors) to publish posts on the Blog section without logging in.
it has actually 3 steps and I applied it on WordPress Theme twenty twenty-two default theme.
but unfortunately, the Form shortcode does not apply to my mentioned section and it applies after my Body
tag (no matter where I callback the shortcode in Gutenberg).
So I have no idea about the Solution :(
Note: I don't want to do this by using any type of plugin... I know it sounds crazy but no plugin, please...
Step 1:
add bellow code to end line of my functions.php in 2022 WordPress Theme
//Add Shortcode-Form
require get_template_directory() . '/shortcode-form.php';
Step 2: Create shortcode-form.php file in theme's main folder
Step 3: add bellow lines to it:
add_shortcode( 'themedomain_frontend_post', 'themedomain_frontend_post' );
function themedomain_frontend_post() {
themedomain_post_if_submitted(); ?>
<form id="new_post" name="new_post" method="post" enctype="multipart/form-data">
<p><label for="title"><?php echo esc_html__( 'Title', 'theme-domain' ); ?></label><br />
<input type="text" id="title" value="" tabindex="1" size="20" name="title" />
</p>
<?php wp_editor( '', 'content' ); ?>
<p><?php wp_dropdown_categories( 'show_option_none=Category&tab_index=4&taxonomy=category' ); ?></p>
<p><label for="post_tags"><?php echo esc_html__( 'Tags', 'theme-domain' ); ?></label>
<input type="text" value="" tabindex="5" size="16" name="post_tags" id="post_tags" />
</p>
<input type="file" name="post_image" id="post_image" aria-required="true">
<p><input type="submit" value="Publish" tabindex="6" id="submit" name="submit" /></p>
</form>
<?php
}
and:
function themedomain_post_if_submitted() {
// Stop running function if the form wasn't submitted
if ( ! isset( $_POST['title'] ) ) {
return;
}
// Add the content of the form to $post as an array
$post = array(
'post_title' => $_POST['title'],
'post_content' => $_POST['content'],
'post_category' => array( $_POST['cat'] ),
'tags_input' => $_POST['post_tags'],
'post_status' => 'draft', // Could be: publish
'post_type' => 'post', // Could be: 'page' or your CPT
);
$post_id = wp_insert_post( $post );
// For Featured Image
if ( ! function_exists( 'wp_generate_attachment_metadata' ) ) {
require_once ABSPATH . 'wp-admin' . '/includes/image.php';
require_once ABSPATH . 'wp-admin' . '/includes/file.php';
require_once ABSPATH . 'wp-admin' . '/includes/media.php';
}
if ( $_FILES ) {
foreach ( $_FILES as $file => $array ) {
if ( $_FILES[ $file ]['error'] !== UPLOAD_ERR_OK ) {
return 'upload error : ' . $_FILES[ $file ]['error'];
}
$attach_id = media_handle_upload( $file, $post_id );
}
}
if ( $attach_id > 0 ) {
update_post_meta( $post_id, '_thumbnail_id', $attach_id );
}
echo 'Saved your post successfully! :)';
}
Here is the shortcode that I use in my gotenburg theme editor:
[themedomain_frontend_post]

Answer 1

Actually WordPress shortcode should run its own callback function, so it except a return variable. In this case you have echo inside callback function, that's why all the output comes at top of the page
Please try the code like bellow
add_shortcode( 'themedomain_frontend_post', 'themedomain_frontend_post' );
function themedomain_frontend_post() {
ob_start();
themedomain_post_if_submitted();
$return = "<form id='new_post' name='new_post' method='post' enctype='multipart/form-data'>
<p><label for='title'>" . esc_html__('Title','theme-domain') . "</label><br />
<input type='text' id='title' value='' tabindex='1' size='20' name='title' />
</p>". wp_editor( '', 'content' ) ."
<p>" . wp_dropdown_categories( 'show_option_none=Category&tab_index=4&taxonomy=category' ) ."</p>
<p><label for='post_tags'>" . esc_html__('Tags','theme-domain') . "</label>
<input type='text' value='' tabindex='5' size='16' name='post_tags' id='post_tags' /></p>
<input type='file' name='post_image' id='post_image' aria-required='true'>
<p><input type='submit' value='Publish' tabindex='6' id='submit' name='submit' /></p>
</form>";
$return .= ob_get_clean();
return $return;
}
it will solve the issue.