In the previous post, we have created features that allow users to sign up a Guest Author account then submit a post from the frontend. If we stop here, the submitted post will be published right after the Guest Author press the Submit button.

Posts will be published immediately
Posts will be published immediately

That causes uncontrollable post quality. For this reason, we keep on with Meta Box to create extra features to censor and manage all the posts. These also are the 3rd and 4th requirements from my client which I mentioned in part 1.

Change the Default Status of the Guest Author’s Posts

Every post from Guest Author must be reviewed before going on live. It follows that those posts’ status will be “pending” first when their Guest Author submits. To do that, we do a simple action only.

Go to the edit page of the post submission page, add post_status=“Pending” into the shortcode in the content field.

Add a parameter to the shortcode
Add a parameter to the shortcode

Save the page and submit a new post for a test. That post will be pending.

Post is in pending status right after Guest Author’s submission
Post is in pending status right after Guest Author’s submission

Post Management for Guest Author

Updated 25th Jan, 2020: You no longer need to do this manually anymore. The plugin now supports user posts dashboard. Please see this blog post for details.

I’m going to create the post-management page in the My Account page and use the Bootstrap library creating Navs interface with two tabs: Account, and Your Post.

Specimen page from Bootstrap
Specimen page from Bootstrap

The Account tab actually is the My Account page we created in part 1. Now, we are creating Your Post tab.

Use the Bootstrap to create a Table for post listing.

List of posts from the Guest Author
List of posts from the Guest Author

From now on, we will use some codes and available functions to do these actions:

  1. Get the current user information
  2. Get all the posts which submit by the current user
  3. Insert URL of the edit page to the pending post

Step 1: Get the Current User Information

Add the wp_get_current_user() function to the page-account.php file:

<?php
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
$user_email = $current_user->user_email;
?>

In there:

  • $current_user: current user information in the type of an Object
  • $user_id: get the ID of the current user
  • $user_email: get the email of the current user

You can add something else to get other information about the current user. It’s up to you.

Step 2: Get the List of Submitted Post by the Current User

In step 1, we add the following function to the page-account.php file:

$args_post_by_author = array(
'author'        => $user_id,
'posts_per_page'=> -1,
'post_status'   => array('publish', 'pending')
);
$posts_author = get_posts($args_post_by_author);

In there:

  • $arg_post_by_author: an array that holds all the essential parameters for information exporting
  • $post_author: List of posts exported by the above array

I bound three parameters to export information, which are:

  • author: use $user_id to get the ID of the user who submitted the post;
  • post_per_page: the number of posts displayed on a page. If you want all the post shows on a page, set this parameter’s value is -1;
  • post_status: this is the post status that is published or pending.

For now, you’ve completed about 70% of the task already. Both the admin and Guest Author accounts have the list of submitted posts on the My Account page.

“Your Post” tab of the admin user
“Your Post” tab of the admin user

Here is the code for the above steps:


This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters


<?php
/**
* Template Name: My Account
*/
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<?php
if ( !is_user_logged_in() ) {
auth_redirect();
}
$current_user = wp_get_current_user();
get_header();
?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="true">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Post-tab" data-toggle="tab" href="#Post" role="tab" aria-controls="Post" aria-selected="false">Your Post</a>
</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile; // End of the loop.
?>
</div>
<div class="tab-pane fade" id="Post" role="tabpanel" aria-labelledby="Post-tab">
<p>Your list posts ! Once published, you can no longer edit a post.</p>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Date Created</th>
<th>Status</th>
</tr>
</thead>
<tbody id="postTable">
<?php
$count=0;
$args_post_by_author = array(
'author' => $current_user->ID,
'orderby' => 'post_date',
'order' => 'ASC',
'posts_per_page' => -1,
'post_status' => array('publish', 'pending')
);
$posts_author = get_posts($args_post_by_author);
foreach ($posts_author as $post_author) { $count++; ?>
<tr>
<td><?php echo $count; ?></td>
<td><?php echo wp_trim_words( $post_author->post_title, 10, '...'); ?></td>
<td><?php echo $post_author->post_date; ?></td>
<td><?php echo $post_author->post_status; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<?php get_footer(); ?>

Step 3: Show URL of the Edit Page to Each Post in the List

At this point, Guest Author can not edit the post content although they could see it on the list. The reason is that there is no link to go to the edit page.

With the support from MB Frontend Submission, you will have that link easily. Just add ?rwmb_frontend_field_post_id=123 (id=123 means we are acting on the post which has ID is 123) to the post submission page URL.

For example:

http://yourdomain.com/publish-post/?rwmb_frontend_field_post_id=316

The edit page of a submitted post
The edit page of a submitted post

But even so, everyone can edit whatever post no matter what post’s author and status. It’s so risky and out of control.

To prevent this, we should request users sign in their account (we did it in part 1) and meet some other conditions before going to the edit page.

Check the Post Information and the Conditions

Use the $_GET[‘param’] function to get the post information (in this case, I got post ID) and assign its value to $post_id:

$post_id = $_GET['rwmb_frontend_field_post_id'];

Then, export name of author and post status by this post_id:

$author_id = get_post_field ('post_author', $post_id);
$post_status = get_post_field ('post_status', $post_id);

Finally, get the ID of the current user:

$current_user = wp_get_current_user();
$user_id = $current_user->ID;

Since we had all the above values, we will check them all whether they fit together:

  • $author_id = $user_id;
  • $post_status = pending;

Guest Author can access the edit page only when both of the above conditions were satisfied. We use the IF ELSE command to check these conditions.

if ($_GET['rwmb_frontend_field_post_id']) {
     echo ‘Yes’;
} else {
     echo ‘No’;
}

Now, if the post is not from the current user or published, Guest Author can not access the edit page.

Guest Author can not edit the submitted post when one of two conditions is not satisfied.
Guest Author can not edit the submitted post when one of the two conditions is not satisfied.

For your quick action, copy these codes to your publish-post.php and do some adjustments if any.


This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters


<?php
/**
* Template Name: Publish Post
*/
if ( !is_user_logged_in() ) {
auth_redirect();
}
$current_user = wp_get_current_user();
get_header();
?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ($_GET['rwmb_frontend_field_post_id']) {
$post_id = $_GET['rwmb_frontend_field_post_id'];
$author_id = get_post_field ('post_author', $post_id);
$post_status = get_post_field ('post_status', $post_id);
$user_id = $current_user->ID;
if ($author_id == $user_id && $post_status == "pending") {
while ( have_posts() ) : the_post();
the_content();
endwhile;
} else {
echo "You can't edit this post.";
}
} else {
while ( have_posts() ) : the_post();
the_content();
endwhile;
}
?>
</main>
</div>
</div>
<?php get_footer(); ?>

Show the URL of the Edit Page on the Frontend

Back to the page-account.php file, add a column to the table of the post list. This column is using to show the URL.

<a href="<?php echo get_page_link(268).'?rwmb_frontend_field_post_id='.$post_author->ID; ?>" title="<?php echo $post_author->post_title; ?>">Edit</a>

Pay attention to that 268 is the ID of my post-submission page. You must get the ID of yours and replace this number with it.

Well, My Account page now has all the posts with full information as below:

My Account page of the Guest Author in the frontend when we finished
My Account page when we finished

For your quick reference, this is the source code of my page-account.php file:


This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters


<?php
/**
* Template Name: My Account
*/
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<?php
if ( !is_user_logged_in() ) {
auth_redirect();
}
$current_user = wp_get_current_user();
get_header();
?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="true">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Post-tab" data-toggle="tab" href="#Post" role="tab" aria-controls="Post" aria-selected="false">Your Post</a>
</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile;
?>
</div>
<div class="tab-pane fade" id="Post" role="tabpanel" aria-labelledby="Post-tab">
<p>Your list posts ! Once published, you can no longer edit a post.</p>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Date Created</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody id="postTable">
<?php
$count=0;
$args_post_by_author = array(
'author' => $current_user->ID,
'orderby' => 'post_date',
'order' => 'ASC',
'posts_per_page' => -1,
'post_status' => array('publish', 'pending')
);
$posts_author = get_posts($args_post_by_author);
foreach ($posts_author as $post_author) { $count++; ?>
<tr>
<td><?php echo $count; ?></td>
<td>
<?php if ($post_author->post_status == "publish") { ?>
<a href="<?php echo get_permalink($post_author->ID) ?>" title=""><?php echo wp_trim_words( $post_author->post_title, 10, '...'); ?></a>
<?php } else {
echo wp_trim_words( $post_author->post_title, 10, '...');
} ?>
</td>
<td><?php echo $post_author->post_date; ?></td>
<td><?php echo $post_author->post_status; ?></td>
<td>
<?php if ($post_author->post_status == "pending") { ?>
<a href="<?php echo get_page_link(268).'?rwmb_frontend_field_post_id='.$post_author->ID; ?>" title="">Edit</a>
<?php } else {
echo 'None';
} ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<?php get_footer(); ?>

Final Words

Now, you’ve completed creating all the features that allow users to sign up a Guest Post account, submit a post, manage, and edit it in the frontend. Exerting Meta Box and its extensions as Meta Box Builder, MB Frontend Submission, and MB User Profile make the execution easier.

We hope that you can do all the above things well then get more useful and suited content for your WordPress website.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. Display the Latest Products Section - P4 - Using Meta Box + Zion
  12. Display the Most Viewed Posts - P1 - using MB Views
  13. How to Add Custom Fields to Display Banners using Meta Box Plugin
  14. How to Add Guest Author in WordPress using Meta Box (Part 1)
  15. How to Add Guest Author in WordPress using Meta Box (Part 2)
  16. How to Add Related Posts to WordPress Using Meta Box
  17. How to Build a Hotel Booking Website Using Meta Box - P1
  18. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  19. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  20. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  21. How to Create a Classified Ads Website using Meta Box
  22. How to Create a Product Page - P2 - Meta Box + Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box + Bricks
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page using Meta Box Plugin
  26. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  27. How to Create a Recipe - P3 - Using Meta Box and Elementor
  28. How to Create a Recipe - P4 - Using Meta Box and Bricks
  29. How to Create a Recipe - P5 - Using Meta Box and Zion
  30. How to Create a Recipe with Meta Box Plugin
  31. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  32. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  33. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  34. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  35. How to Create a Team Members Page - P4 - Just Meta Box
  36. How to Create ACF Flexible Content Field with Meta Box
  37. How to Create an Auto-Updated Cheat Sheet in WordPress
  38. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  39. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  40. How to Create an FAQs Page -P3- Using Meta Box
  41. How to Create Buttons with Dynamic Link using Custom Fields
  42. How to Create Category Thumbnails & Featured Images Using Custom Fields
  43. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  44. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  45. How to Create Online Admission Form for School or University
  46. How to Create Online Reservation Form for Restaurants using Meta Box
  47. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  48. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  49. How to Display Images from Cloneable Fields - P2 - with Oxygen
  50. How to Display Images from Cloneable Fields - P3 - with Elementor
  51. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  52. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  53. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  54. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  55. How to Manually Reorder Posts with Meta Box
  56. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  57. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

Leave a Reply