Need to find something?

ACF Frontend Post Editor with jQuery Sidr header

ACF Frontend Post Editor with jQuery Sidr

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

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.

Last Updated: June 7, 2020

Al-Mamun Talukder

About Al-Mamun Talukder

WordPress Developer. Minimalist Designer. Tech Enthusiast. Music & Movie Freak. Loves Cars. Founder of WolfDevs.

Connect with me: Upwork, GitHub, Facebook, Twitter

10 comments

Leave a Reply to Al-Mamun Talukder (Cancel Reply)