WordPress basically divides itself into two parts, the front end where people can come and read posts or articles on the site.
The other part is the WordPress admin section where one can create posts and pages. This works great if WordPress is used as a general blogging site.
However, since WordPress is used for many different types of sites, sometimes it is necessary to give users a way to create posts from the front end of the site without forcing them into the WordPress admin section.
In this tutorial, we will see how to create a widget that allows users to Create Page With wp_insert_post() and AJAX. This will help site users to create content.
PHP (post_via_ajax.php)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* Enqueue JS */ function exthemes_scripts() { wp_register_script( 'pva-js', get_template_directory(). 'pva.js', array( 'jquery' ), '', true ); wp_localize_script( 'pva-js', 'exthemes_params', array( 'exthemes_ajax_url' => admin_url( 'admin-ajax.php' ) ) ); wp_enqueue_script( 'pva-js' ); }; add_action('wp_enqueue_scripts', 'exthemes_scripts'); // creating Ajax call for WordPress add_action( 'wp_ajax_nopriv_exthemes_create', 'exthemes_create' ); add_action( 'wp_ajax_exthemes_create', 'exthemes_create' ); /* WP Insert Post Function */ function exthemes_create(){ $post_title = $_POST['post_title']; // Create post object $new_exthemes_post = array( 'post_type' => 'page', 'post_title' => $post_title, 'post_status' => 'publish', 'post_author' => 1, ); // Insert the post into the database wp_insert_post( $new_exthemes_post ); exit(); }; /* Form Shortcode */ function exthemes_shortcode( $atts, $content = null ) { ob_start(); include(plugin_dir_path( __FILE__ ) . 'post_via_ajax_field.php'); $ret = ob_get_contents(); ob_end_clean(); return $ret; //pva(); }; add_shortcode( 'pva', 'exthemes_shortcode' ); |
JAVASCRIPT (pva.js)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
jQuery( document ).ready( function ( $ ) { $('#create_post').attr('disabled',true); $('#post_title').keyup(function(){ if($(this).val().length > 3) { $('#create_post').attr('disabled', false); } else { $('#create_post').attr('disabled',true); } }); $('#create_post').click(function(event){ post_via_ajax(); }); // Return Post Title Field Value function returnNewPostTitle(){ var newPostTitleValue = $('#post_title').val(); return newPostTitleValue; } // AJAX > Get City Posts function post_via_ajax() { var exthemes_ajax_url = exthemes_params.exthemes_ajax_url; $.ajax({ type: 'POST', url: exthemes_ajax_url, data: { action: 'exthemes_create', post_title: returnNewPostTitle() }, beforeSend: function () { console.log('sending'); }, success: function(data) { console.log('yay'); }, error: function() { console.log('nay'); } }) } }); |
PHP (post_via_ajax_field.php)
|
1 |
<input id="post_title" name="post_title" type="text"><button id="create_post">Create Post</button> |
shortcode
|
1 2 3 |
<?php echo do_shortcode( '[pva]' ); ?> |
So, with this as a plugin and using the shortcode [pva], you can create a post from the front-end. Obviously this was only intended to be quite basic so I’d imagine you could adapt/adjust to your needs. Hope this helps someone.