In my previous post, I mentioned the way to allow users submit new posts from front-end also edit them. It is very easy and effective, however, we can take the user experience to the next level.
In this post, I am going to share the way to use jQuery Sidr plugin for getting a nice looking edit form.
Here is a preview of how it looks
1. Adding the Edit Button
We will still need the edit button as you see in the preview above, the edit button triggers the panel on the left to open up and show the ACF form.
So, like before but with some minor modification, we have the edit button code as
<?php if ( ( is_user_logged_in() && $current_user->ID == $post->post_author ) ) { ?>
<a id="edit-post" href="#edit">Edit Post</a>
<?php } ?>
Code language: HTML, XML (xml)
You should use this code on the single post file wherever you want the edit button to appear. Notice the id we are using in the code. We will use the id to trigger the Sidr panel later.
2. Adding the Edit Form
We will now add the ACF form code for the edit form. This code also has some minor modifications from the previous post. So if you are following the previous post, make sure to update your code accordingly.
<?php if ( ( is_user_logged_in() && $current_user->ID == $post->post_author ) ) {
echo "<div id='sidr' class='acf-edit-post'>";
echo "<a href='#' class='edit-close'>Close Editor</a>";
acf_form (array(
'field_groups' => array(6,11), // Same ID(s) used before
'form' => true,
'return' => '%post_url%',
'submit_value' => 'Save Changes',
'post_title' => true,
'post_content' => true,
));
echo "</div>";
}
?>
Code language: HTML, XML (xml)
This code can be placed anywhere in the single post file.
3. Custom jQuery
jQuery(document).ready(function() {
jQuery('#edit-post').sidr();
jQuery( '.edit-close' ).on( 'click', function() {
jQuery.sidr( 'close' , 'sidr' );
});
});
Code language: JavaScript (javascript)
Add this piece of code on a custom js file that loads on single posts or add it above <?php get_footer(); ?>
within a <script>
tag.
4. Enqueue Sidr Library
// Enqueue Sidr
function add_sidr() {
if (is_singular()) {
wp_enqueue_script( 'sidr_js', 'https://cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js', array(), '2.2.1', true );
}
}
add_action( 'wp_enqueue_scripts', 'add_sidr' );
Code language: PHP (php)
Add this code to the functions.php file to load the Sidr js file. We are going to load the file on on single posts, that is why we have an if statement. Also, we are not loading the file from our theme folder but it is fetched from a CDN, which is very good practice if you want to have a faster site.
5. Add Custom CSS
.sidr{display:block;position:fixed;top:0;height:100%;z-index:999999;width:500px;overflow-x:hidden;overflow-y:auto;background-color: #fff;padding: 20px;max-width: 100%}
.sidr.right{left:auto;right:-260px}
.sidr.left{left:-500px;right:auto}
.sidr form.acf-form {padding: 0;margin: 0 0 10px;}
.media-modal, .media-modal.acf-media-modal {z-index: 999999 !important;}
.sidr .acf-fields > .acf-field {padding-left: 0;padding-right: 0;}
Code language: CSS (css)
Based on your needs and taste, you may change the css code given above.
DONE!
That’s it! You should have a very nice looking edit form that slides into the screen. It also works great on mobile.
Be sure to let me know how it works for you.
10 comments
MAXIME BEGUIN
Hey, I’m getting an empty popup as well… anyone resolved the issue and willing to share the solution?
Al-Mamun Talukder
The original site that I had still works. Please review your code. https://imgur.com/cEJARaL
Jadine Peters
Hi. After htting save post I get a blank screen, but my changes are being saved.
Al-Mamun Talukder
Please make sure you followed the tutorial correctly. I tested my setup just now, everything worked perfectly. I would suggest you perform this in a clean WP install first. Thanks
Ben
Hello, I followed these steps and I get a blank pop out for the sidr area. How can I troubleshoot further to find out why the acf form is not showing?
Al-Mamun Talukder
Hello Ben, Sorry to hear that it is not working for you. Please note that this tutorial is a follow-up of another tutorial. I have local install running the same code without any issue.
Tami
Great post, thank you!
Mirko
Hello I have a problem with the slug editing of the title, everything works but I would like the slug to update itself if the user changes the title of the post. How can I do?
Al-Mamun Talukder
Hi Mirko, you may follow this thread from ACF Support https://support.advancedcustomfields.com/forums/topic/edit-slug-in-acf-form/