├── README.md ├── acf-fields.php ├── footer.php ├── functions.php ├── header.php ├── index.php ├── screenshot.png ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | To Do List - ACF to REST API 2 | ==== 3 | Simple To Do List with ACF to REST API 4 | 5 | - [Dependencies](#dependencies) 6 | - [Live Demo](#live-demo) 7 | - [Screenshot](#screenshot) 8 | 9 | Dependencies 10 | == 11 | | Plugin | URL | 12 | |---------|-----| 13 | | ACF to REST API | https://wordpress.org/plugins/acf-to-rest-api/ | 14 | | ACF | https://wordpress.org/plugins/advanced-custom-fields/ | 15 | 16 | Make sure you are running WordPress >= 4.7 so you can make use of its core API functionality – downwards compatability can be achieved with the [WordPress REST API Plugin](https://wordpress.org/plugins/rest-api/). 17 | 18 | Live Demo 19 | == 20 | [![Live Demo](http://airesgoncalves.com.br/screenshot/assets/buttons/live-demo.png)](http://airesgoncalves.com.br/to-do-list) 21 | 22 | Screenshot 23 | == 24 | [![Example](http://airesgoncalves.com.br/screenshot/to-do-list-acf-to-rest-api/screenshot.png)](http://airesgoncalves.com.br/to-do-list) 25 | -------------------------------------------------------------------------------- /acf-fields.php: -------------------------------------------------------------------------------- 1 | 'acf_todo', 10 | 'title' => 'Todo', 11 | 'fields' => array( 12 | array( 13 | 'key' => 'field_56929f3f6a98a', 14 | 'label' => 'Done', 15 | 'name' => 'done', 16 | 'type' => 'true_false', 17 | 'message' => '', 18 | 'default_value' => 0, 19 | 'show_in_rest' => true, 20 | 'edit_in_rest' => true, 21 | ), 22 | ), 23 | 'location' => array( 24 | array( 25 | array( 26 | 'param' => 'post_type', 27 | 'operator' => '==', 28 | 'value' => 'todo', 29 | 'order_no' => 0, 30 | 'group_no' => 0, 31 | ), 32 | ), 33 | ), 34 | 'options' => array( 35 | 'position' => 'normal', 36 | 'layout' => 'no_box', 37 | 'hide_on_screen' => array( 'the_content' ), 38 | ), 39 | 'menu_order' => 0, 40 | ) ); 41 | } -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ) ) ); 10 | } ); 11 | 12 | add_action( 'init', function() { 13 | register_post_type( 'todo', array( 14 | 'public' => true, 15 | 'label' => 'Todos', 16 | 'show_in_rest' => true, 17 | 'rest_base' => 'todos', 18 | 'menu_icon' => 'dashicons-list-view', 19 | ) ); 20 | } ); 21 | -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | 2 | > 3 | 4 | 5 | 6 | <?php echo bloginfo( 'name' ); ?> 7 | 8 | 9 | > -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | Fork me on GitHub 4 | 5 |
6 |
7 |

Todo List - ACF to REST API

8 |
9 |
10 | 11 |
12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 |
20 |
21 | github.com/airesvsg 22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/airesvsg/to-do-list-acf-to-rest-api/b52d54c012f8c917e821bcb026be4b910f95b95c/screenshot.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | jQuery( function( $ ) { 2 | 3 | var url = WP_API_Settings.root + 'wp/v2/todos/'; 4 | var form = $( '.form' ); 5 | var list = $( '.list' ); 6 | 7 | function template( data ) { 8 | var html = ''; 9 | 10 | html += '
  • '; 11 | html += ''; 16 | html += '
    • '; 17 | 18 | return html; 19 | } 20 | 21 | // Load todos 22 | $.get( url + '?orderby=id&order=asc&per_page=100', function( data ){ 23 | for( var i in data ) { 24 | list.prepend( template( data[i] ) ); 25 | } 26 | }, 'json' ); 27 | 28 | // Save todo 29 | form.submit( function(e) { 30 | e.preventDefault(); 31 | 32 | var self = $( this ); 33 | var data = self.serialize(); 34 | 35 | $.ajax( { 36 | url: url, 37 | method: 'POST', 38 | beforeSend: function ( xhr ) { 39 | // https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/ 40 | xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce ); 41 | }, 42 | data: data, 43 | dataType: 'json' 44 | } ) 45 | .done( function ( data ) { 46 | list.prepend( template( data ) ); 47 | self.find( '.input-text' ).val( '' ); 48 | } ) 49 | .fail( function( data ) { 50 | alert( data.responseJSON.message ); 51 | } ); 52 | } ); 53 | 54 | // Change state of todo 55 | list.on( 'change', '.list-check', function( e ) { 56 | e.preventDefault(); 57 | 58 | var self = $( this ); 59 | var item = self.closest( '.list-item' ); 60 | var id = item.data( 'id' ); 61 | var data = { 62 | 'fields[done]': self.is( ':checked' ) ? 1 : 0 63 | }; 64 | 65 | $.ajax( { 66 | url: url + id, 67 | method: 'PUT', 68 | beforeSend: function( xhr ) { 69 | // https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/ 70 | xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce ); 71 | }, 72 | data: data, 73 | dataType: 'json' 74 | } ) 75 | .done( function ( data ) { 76 | if ( data.acf.done ) { 77 | item.addClass( 'list-item-checked' ); 78 | } else { 79 | item.removeClass( 'list-item-checked' ); 80 | } 81 | } ) 82 | .fail( function( data ) { 83 | alert( data.responseJSON.message ); 84 | } );; 85 | } ); 86 | 87 | // Remove todo 88 | list.on( 'click', '.btn-remove', function( e ) { 89 | e.preventDefault(); 90 | 91 | var self = $( this ); 92 | var item = self.closest( '.list-item' ); 93 | var id = item.data( 'id' ); 94 | 95 | $.ajax( { 96 | url: url + id, 97 | method: 'DELETE', 98 | beforeSend: function( xhr ) { 99 | // https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/ 100 | xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce ); 101 | } 102 | } ) 103 | .done( function( data ) { 104 | item.fadeOut( 'fast', function() { 105 | $( this ).remove(); 106 | } ); 107 | } ) 108 | .fail( function( data ) { 109 | alert( data.responseJSON.message ); 110 | } ); 111 | } ); 112 | 113 | } ); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: To do List - ACF to REST API 3 | Theme URI: http://github.com/airesvsg/acf-to-rest-api 4 | Author: Aires Gonçalves 5 | Author URI: https://github.com/airesvsg 6 | Description: Example for the plugin ACF to REST API ( issue #2 ) 7 | Version: 1.0 8 | License: GNU General Public License v2 or later 9 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 10 | */ 11 | @import url('https://fonts.googleapis.com/css?family=Montserrat'); 12 | 13 | * { 14 | padding: 0; 15 | margin: 0; 16 | box-sizing: border-box; 17 | font-family: 'Montserrat', sans-serif; 18 | text-decoration: none; 19 | } 20 | 21 | body { 22 | background: #eae8ea; 23 | color: #333; 24 | overflow-y: scroll; 25 | } 26 | 27 | .container { 28 | width: 450px; 29 | margin: 0 auto; 30 | } 31 | 32 | .header { 33 | display: block; 34 | margin: 10px 0 10px; 35 | } 36 | 37 | .header-title { 38 | font-size: 25px; 39 | text-align: center; 40 | } 41 | 42 | .form { 43 | border-top: 1px solid #e1e1de; 44 | border-bottom: 1px solid #e1e1de; 45 | margin-bottom: 10px; 46 | padding: 10px 0; 47 | margin: 10px 0; 48 | } 49 | 50 | .input-text { 51 | width: 100%; 52 | border: 1px solid #e1e1de; 53 | padding: 5px; 54 | border-radius: 4px; 55 | padding: 10px; 56 | } 57 | 58 | .list { 59 | list-style: none; 60 | } 61 | 62 | .list-item { 63 | background: #fff; 64 | border-radius: 4px; 65 | border: 1px solid #e1e1de; 66 | border-bottom: 4px solid #e1e1de; 67 | padding: 10px; 68 | margin-bottom: 10px; 69 | position: relative; 70 | } 71 | 72 | .list-item-checked { 73 | opacity: .5; 74 | } 75 | 76 | .list-item-checked .list-title { 77 | text-decoration: line-through; 78 | } 79 | 80 | .list-item-label { 81 | display: flex; 82 | } 83 | 84 | .list-check { 85 | float: left; 86 | margin-top: 5px; 87 | } 88 | 89 | .list-title { 90 | margin-left: 10px; 91 | font-size: 16px; 92 | font-weight: 700; 93 | } 94 | 95 | .btn { 96 | padding: 2px 5px; 97 | border-radius: 4px; 98 | font-weight: 700; 99 | line-height: 20px; 100 | font-size: 10px; 101 | color: #fff; 102 | text-align: center; 103 | text-transform: uppercase; 104 | position: absolute; 105 | top: 7px; 106 | opacity: 0; 107 | cursor: pointer; 108 | transition: all .5s ease-in-out; 109 | 110 | } 111 | 112 | .btn-remove { 113 | right: 10px; 114 | background: #e74c3c; 115 | } 116 | 117 | .list-item:hover .btn { 118 | opacity: 1; 119 | } 120 | 121 | .footer { 122 | margin-bottom: 30px; 123 | } 124 | 125 | .footer a { 126 | display: block; 127 | border-top: 1px solid #e1e1de; 128 | color: #666; 129 | padding-top: 10px; 130 | } 131 | 132 | .footer a img { 133 | width: 20px; 134 | float: left; 135 | margin-right: 5px; 136 | } 137 | 138 | .footer a span { 139 | font-weight: 700; 140 | color: #333; 141 | } 142 | 143 | #ribbon { 144 | position: absolute; 145 | top: 0; 146 | right: 0; 147 | border: 0; 148 | } 149 | 150 | @media screen and (max-width: 640px) { 151 | .container { 152 | width: 98%; 153 | padding: 0 1%; 154 | } 155 | } --------------------------------------------------------------------------------