How to Add a Publish Button to the Frontend of Your WordPress Posts

How to Add a Publish Button to the Frontend of Your WordPress Posts

If your editorial process is set up in such a way that you need to approve posts, then you’ve no doubt run into the slightly annoying process of having to go back and forth between the backend and the frontend of your site all the time.

First you need to go to the backend to check for pending posts. Then you need to go to the frontend in order to preview the post as it will look on your site. Then you need to return to the backend in order to actually publish the post. … And if you have more than one, the cycle continues.

While this isn’t such a big deal, if you need to do it a lot, it becomes an unnecessary pain. Many eventually think, “If only there was a button on the frontend.”

Well, as it turns out, there can be a button on the frontend. It takes digging into your theme’s files a little, but it’s relatively simple to do.

publish

Code in Your Functions File

The first thing you’ll need to do is place the following code in your functions.php file. (Appearance > Editor > Theme Functions – functions.php)

{code type=php}
//function to print publish button
function show_publish_button(){
Global $post;
//only print fi admin
if (current_user_can(‘manage_options’)){
echo ‘



‘;
}
}

//function to update post status
function change_post_status($post_id,$status){
$current_post = get_post( $post_id, ‘ARRAY_A’ );
$current_post[‘post_status’] = $status;
wp_update_post($current_post);
}

if (isset($_POST[‘FE_PUBLISH’]) && $_POST[‘FE_PUBLISH’] == ‘FE_PUBLISH’){
if (isset($_POST[‘pid’]) && !empty($_POST[‘pid’])){
change_post_status((int)$_POST[‘pid’],’publish’);
}
}

You can change what word appears on the “Publish” button by changing the value in the following ….

{code type=php}value=”Publish”

With the code above, only Administrators will see the publish button. If you would like to allow lower level users such as Editors to see and publish posts, then you will need to change the following ‘manage_options’ snippet to a capability that Editors have.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Here’s the line in the original:

{code type=php}current_user_can(‘manage_options’)

If you wanted Editors to see the button, for example, you could change that snippet to the following:

{code type=php}current_user_can(‘edit_others_posts’)

You can find a list of capabilities here.

Code Where You Want the Button

Next, you’ll need to place the code below where you would like the “Publish” button to appear. For most that will be in the single.php file. (Appearance > Editor > single.php)

Many single.php files these days also call in another file (for example, a content.php file), and so you may actually want to open that file and place your code there if it helps you get it exactly where you want it.

Here’s the line of code you’ll need to place in your theme template.

{code type=php}<?php show_publish_button();  ?>

Your Theme will Control the Color

The color of the button that appears will be determined by your theme. For example, here’s what the button in the default Twenty Twelve theme looks like.

publish-button-regular

And here’s a button that appears in a different theme.

publish-button-color

*Once the button is clicked, your post will publish; however, the button will look exactly the same as before, and nothing else will change. In other words, there’s no confirmation that the post was published from the front end.

If you’d like to see how to add a “delete link” in a similar way, check out this post about adding delete links to your frontend.

Thanks to Bainternet at Stackexchange for this solution.

Tags: