Shortcode to insert

Best solution for what you want to accomplish which is essentially to make the next page feature more user friendly for your authors is to add a TinyMCE button that will do this for you. This may be a bit complicated so hold your hat. To avoid this answer being the length of a thesis, I have added comments in all codes to help you understand what each function does and I highly recommend that you read and thoroughly understand them.

Firstly, in your theme folder, add a folder named admin and inside it, create file class.new_tinymce_btn.php with code:

<?php
//class start
class add_new_tinymce_btn {

public $btn_arr;
public $js_file;
/*
 * call the constructor and set class variables
 * From the constructor call the functions via wordpress action/filter
*/
function __construct($seperator, $btn_name,$javascrip_location){
  $this->btn_arr = array("Seperator"=>$seperator,"Name"=>$btn_name);
  $this->js_file = $javascrip_location;
  add_action('init', array(&$this,'add_tinymce_button'));
  add_filter( 'tiny_mce_version', array(&$this,'refresh_mce_version'));

}
/*
 * create the buttons only if the user has editing privs.
 * If so we create the button and add it to the tinymce button array
*/
function add_tinymce_button() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
   if ( get_user_option('rich_editing') == 'true') {
     //the function that adds the javascript
     add_filter('mce_external_plugins', array(&$this,'add_new_tinymce_plugin'));
     //adds the button to the tinymce button array
     add_filter('mce_buttons', array(&$this,'register_new_button')); 
   }
}
/*
 * add the new button to the tinymce array
*/
function register_new_button($buttons) {
   array_push($buttons, $this->btn_arr["Seperator"],$this->btn_arr["Name"]);
   return $buttons;
}
/*
 * Call the javascript file that loads the 
 * instructions for the new button
*/
function add_new_tinymce_plugin($plugin_array) {
   $plugin_array[$this->btn_arr['Name']] = $this->js_file;
   return $plugin_array;
}
/*
 * This function tricks tinymce in thinking 
 * it needs to refresh the buttons
*/
function refresh_mce_version($ver) {
  $ver += 3;
  return $ver;
}

}//class end
?>

This code will add custom buttons to the visual editor.

Next, in your theme folder, create these folders adminjs/buttons and inside, create this JS file nextpage.js with code:

(function() {
    tinymce.create('tinymce.plugins.nextpage', {
        init : function(ed, url) {
            ed.addButton('nextpage', {
                title : 'Next Page Button',
                image : url+'/images/btn_nextpage.png',
                onclick : function() {                    
                    var prompt_text = "<!--nextpage-->";
                    var caret = "caret_pos_holder";
                    var insert = "<p>" + prompt_text + " [next_page_button]</p> <span id="+caret+"></span>";
                     ed.execCommand('mceInsertContent', false, insert);
                     ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                     ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('nextpage', tinymce.plugins.nextpage);
})(); 

You will need to add an image for the button (/images/btn_nextpage.png). The above code is a rather simple javascript function for what happens when the button is pressed.

Now you will need to load this button class by adding this to your functions file:

//load custom buttons class
require_once (TEMPLATEPATH . '/admin/class.new_tinymce_btn.php');
//create an instance of the class
$t = new add_new_tinymce_btn('|','nextpage',get_bloginfo('template_url').'/adminjs/buttons/nextpage.js');

To make this issue even more complicated, if you are in the visual editor and <!--nextpage--> is added in by Javascript in the html/text, it will not appear visually for you until you have refreshed the page or updated it. This can of course be confusing for your users that cannot see visually where the separation is until a refresh, therefore, I have added this shortcode [next_page_button] to the mix. It will be added when you click the button.

So you may ask, what does it do? Well let’s determine that. Add this code in your functions:

function christine_post_next_page_button() { 
return '';
 }
add_shortcode('next_page_button', 'chrstine_post_next_page_button');

Pay attention to return ''. It does nothing! So it is only a dummy shortcode to add a visual separate for the user.

Leave a Comment