This is a follow up article. Please make sure you have already checked the previous article » Frontend Post Submission & Edit with Advanced Custom Fields

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

ACF Frontend Post Editor with jQuery Sidr

 

How to use

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 } ?>

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>";
  }
?>

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' );
    	});
    });

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' );

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;<span class="webkit-css-property">max-width</span>: <span class="value">100%</span>;}
.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;}

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.