{"id":119521,"date":"2013-08-08T11:30:29","date_gmt":"2013-08-08T15:30:29","guid":{"rendered":"http:\/\/wpmu.org\/?p=119521"},"modified":"2013-08-08T11:44:05","modified_gmt":"2013-08-08T15:44:05","slug":"how-to-add-a-publish-button-to-the-frontend-of-your-wordpress-posts","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-add-a-publish-button-to-the-frontend-of-your-wordpress-posts\/","title":{"rendered":"How to Add a Publish Button to the Frontend of Your WordPress Posts"},"content":{"rendered":"<p>If your editorial process is set up in such a way that you need to approve posts, then you\u2019ve 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.<\/p>\n<p>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. &#8230; And if you have more than one, the cycle continues.<\/p>\n<p>While this isn\u2019t such a big deal, if you need to do it a lot, it becomes an unnecessary pain. Many eventually think, &#8220;If only there was a button on the frontend.&#8221;<\/p>\n<p>Well, as it turns out, there can be a button on the frontend. It takes digging into your theme\u2019s files a little, but it\u2019s relatively simple to do.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full-wide\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119523\" alt=\"publish\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/publish.jpg\" width=\"798\" height=\"313\" \/><\/div>\n<\/div>\n<h2><b>Code in Your Functions File<\/b><\/h2>\n<p>The first thing you\u2019ll need to do is place the following code in your functions.php file. (Appearance &gt; Editor &gt; Theme Functions \u2013 functions.php)<\/p>\n<p>{code type=php}<br \/>\n\/\/function to print publish button<br \/>\nfunction show_publish_button(){<br \/>\nGlobal $post;<br \/>\n\/\/only print fi admin<br \/>\nif (current_user_can(&#8216;manage_options&#8217;)){<br \/>\necho &#8216;<\/p>\n<form action=\"\" method=\"POST\" name=\"front_end_publish\"><input id=\"pid\" type=\"hidden\" name=\"pid\" value=\"'.$post-&gt;ID.'\" \/><br \/>\n<input id=\"FE_PUBLISH\" type=\"hidden\" name=\"FE_PUBLISH\" value=\"FE_PUBLISH\" \/><br \/>\n<input id=\"submit\" type=\"submit\" name=\"submit\" value=\"Publish\" \/><\/form>\n<p>&#8216;;<br \/>\n}<br \/>\n}<\/p>\n<p>\/\/function to update post status<br \/>\nfunction change_post_status($post_id,$status){<br \/>\n$current_post = get_post( $post_id, &#8216;ARRAY_A&#8217; );<br \/>\n$current_post[&#8216;post_status&#8217;] = $status;<br \/>\nwp_update_post($current_post);<br \/>\n}<\/p>\n<p>if (isset($_POST[&#8216;FE_PUBLISH&#8217;]) &amp;&amp; $_POST[&#8216;FE_PUBLISH&#8217;] == &#8216;FE_PUBLISH&#8217;){<br \/>\nif (isset($_POST[&#8216;pid&#8217;]) &amp;&amp; !empty($_POST[&#8216;pid&#8217;])){<br \/>\nchange_post_status((int)$_POST[&#8216;pid&#8217;],&#8217;publish&#8217;);<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<p>You can change what word appears on the \u201cPublish\u201d button by changing the value in the following \u2026.<\/p>\n<p>{code type=php}value=&#8221;Publish&#8221; <\/code><\/p>\n<p>With the code above, only Administrators will see the publish button. If you would like to allow lower level users\u00a0such as Editors to see and publish posts, then you will need to change the following &#8216;manage_options&#8217; snippet to a capability that Editors have.<\/p>\n<p>Here&#8217;s the line in the original:<\/p>\n<p>{code type=php}current_user_can(&#8216;manage_options&#8217;)<\/code><\/p>\n<p>If you wanted Editors to see the button, for example, you could change that snippet to the following:<\/p>\n<p>{code type=php}current_user_can(&#8216;edit_others_posts&#8217;)<\/code><\/p>\n<p>You can find a <a href=\"http:\/\/codex.wordpress.org\/Roles_and_Capabilities\" target=\"_blank\">list of capabilities here<\/a>.<\/p>\n<h2><b>Code Where You Want the Button<\/b><\/h2>\n<p>Next, you\u2019ll need to place the code below where you would like the \u201cPublish\u201d button to appear. For most that will be in the single.php file. (Appearance &gt; Editor &gt; single.php)<\/p>\n<p>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.<\/p>\n<p>Here\u2019s the line of code you&#8217;ll need to place in your theme template.<\/p>\n<p>{code type=php}&lt;?php show_publish_button();\u00a0 ?&gt;<\/code><\/p>\n<h2><b>Your Theme will Control the Color<\/b><\/h2>\n<p>The color of the button that appears will be determined by your theme. For example, here\u2019s what the button in the default Twenty Twelve theme looks like.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119524\" alt=\"publish-button-regular\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/publish-button-regular.jpg\" width=\"700\" height=\"408\" \/><\/div>\n<\/div>\n<p>And here\u2019s a button that appears in a different theme.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119525\" alt=\"publish-button-color\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/publish-button-color.jpg\" width=\"700\" height=\"408\" \/><\/div>\n<\/div>\n<p>*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\u2019s no confirmation that the post was published from the front end.<\/p>\n<p>If you\u2019d like to see how to add a \u201cdelete link\u201d in a similar way, check out <a href=\"https:\/\/wpmudev.com\/blog\/how-to-add-a-delete-post-link-to-your-wordpress-posts\/\" target=\"_blank\">this post about adding delete links to your frontend<\/a>.<\/p>\n<p>Thanks to <a href=\"http:\/\/wordpress.stackexchange.com\/questions\/17794\/publish-pending-article-from-front-end-with-a-button\" target=\"_blank\">Bainternet at Stackexchange<\/a> for this solution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tired of going from your frontend end to your backend to publish a post. There\u2019s a button to fix that.<\/p>\n","protected":false},"author":84404,"featured_media":119523,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[10211],"tutorials_categories":[],"class_list":["post-119521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-admin"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=119521"}],"version-history":[{"count":0,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119521\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/119523"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=119521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=119521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=119521"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=119521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}