SimplyEdit and Wordpress

You can use SimplyEdit to edit Wordpress websites. You'll need at least Wordpress version 4.4 and you'll need to install the following plugins:

• Wordpress REST API
• Wordpress REST API Meta

You can find these in Wordpress plugin market. In addition, you'll need the SimplyEdit Wordpress plugin. You'll need to download this manually from the following url:

https://gitlab.muze.nl/muze/simply-edit-wordpress/repository/archive.zip?ref=master

Add this zip file by uploading it in the Wordpress Plugins page. Press 'Add New' and then 'Upload Plugin'. Or you can unzip this file in the /wp-content/plugins/ directory of your Wordpress installation by hand.

Now if you go to the Dashboards' Plugins page, it should list SimplyEdit, like this:

Next configure your API key in the SimplyEdit settings page:

Now you are ready to add SimplyEdit to your theme.

SimplyEdit for Wordpress is able to edit any field for the current page. You can add custom fields and even lists of fields, just like normal. Editing menu's is much better left to Wordpress itself.

To make the title of a page or post editable, look in the theme for code like this:

  <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

and change it to this:

  <?php the_title( '<h1 data-simply-field="title" data-simply-content="text" class="entry-title">', '</h1>' ); ?>

To make the content of a page or post editable, look for code like this:

<div class="entry-content">
<?php
    the_content();
?>

and change it to this:

<div data-simply-field="content" class="entry-content">
<?php
     the_content();
?>

To make the thumbnail editable, look for this:

<?php the_post_thumbnail(); ?>

and change it to this:

<?php the_post_thumbnail(null, array('data-simply-field' => 'featured_media')); ?>

To make custom fields editable, add code like this:

<h3 data-simply-field="myCustomField"><?php
    echo json_decode(get_post_meta(get_the_ID(), 'myCustomField', true));
?></h3>

SimplyEdit lists can only be saved in custom fields, e.g.:

<ul data-simply-list="list" data-simply-sortable>
    <template>
        <li>
            <span data-simply-field="item">Item</span>
        </li>
    </template>
</ul>

The list is then rendered on page load by SimplyEdit.