Get Started

Guide: Edit Button

Introduction

Giving clients an easy way to update content on their site is crucial. The edit-button component is aiming to make this process as easy as possible, giving users a straight-forward way to edit Advanced Custom Fields and WordPress options from the front-end.

Updates are being sent via AJAX, making this a solution that works without the need for a reload.

Supported fields

Currently, the edit-button component supports following fields:

  • ACF text fields (textfield, textarea)
  • ACF repeater fields (textfield, textarea)
  • WordPress options

We are hard at work to support more extend the list of supported field types (images etc.) in the future.

Markup

To enable front-end editing, just add the spx-edit-button component to a page. After that, you have to mark all elements that you want to be editable on the site. This is done by adding the data-spx-edit attribute to existing text elements:

<h1 data-spx-edit="myTextField" data-spx-edit-type="acf">   Some text that you want to be editable. </h1> <spx-edit-button/>

The wp_options or ACF field name has to be the value of the attribute. After that, you're good to go!

Conditions

Of course, showing the button to every page visitor makes no sense, so it is advisable to only render the button if a user is logged in.

~ <h1 data-spx-edit="myTextField" data-spx-edit-type="acf">   Some text that you want to be editable. </h1> <?php if (is_user_logged_in) : ?>   <spx-edit-button/> <?php endif ?>

Multiple data types

Starting with version 2.2.0, it is now possible to edit multiple different data types using one edit-button component like so:

<h1 data-spx-edit="myTextField" data-spx-edit-type="acf">   Some ACF field that you want to be editable. </h1> <h2 data-spx-edit="blogdescription" data-spx-edit-type="option">   The blog tagline. </h2> <?php if (is_user_logged_in) : ?>   <spx-edit-button/> <?php endif ?>

ACF sub fields

Advanced Custom Fields includes various useful fields, one of them being the classic repeater field which makes adding repeating content a breeze.

Editing sub fields is also possible using the edit-button element with a slightly adjusted setup. Let's loop through a repeater instance and add the correct data-attributes:

<?php $counter = 0; if (have_rows('repeaterFieldName') ) :   while (have_rows('repeaterFieldName') ) : the_row(); ?>     <h1 data-spx-edit-subfield         data-spx-edit="repeaterFieldName, <?php ++$counter ?>, repeaterText"         data-spx-edit-type="acf">       <?php the_sub_field('repeaterText'); ?>     </h1>   <?php endwhile; endif;

So what is exactly happening here? The markup is similar to standard fields with a couple of exceptions, a data-spx-edit-subfield has to be added to each repeater entry and the data-spx-edit attribute has to be filled with an array like structure that follows the update_sub_field pattern:

<?php update_sub_field( array('repeater', 1, 'caption'), 'This caption is for the first row of the repeater!' );

This has the advantage that even deeply nested repeater fields can be targeted and updated using the edit-button component.