Shortcode to insert <!–nextpage–>

2 comments

1. 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.

   Log in to Reply

2. Here is an alternate technique for adding a button to the wordpress editor TinyMCE for inserting <!-- next-page --> following the <!-- more --> button. This code uses the mce_buttons filter to insert the wp_page button right after the existing wp_more button.

   Add to functions.php :

   // add <!-- next-page --> button to tinymce
   add_filter('mce_buttons','wysiwyg_editor');
   function wysiwyg_editor($mce_buttons) {
       $pos = array_search('wp_more',$mce_buttons,true);
       if ($pos !== false) {
           $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
           $tmp_buttons[] = 'wp_page';
           $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
       }
       return $mce_buttons;
   }
   

   See also http://codex.wordpress.org/TinyMCE_Custom_Buttons

   one-liner-ish from comments:

   function my_mce_buttons($buttons) { $buttons[] = 'wp_page';  return $buttons; }
   add_filter('mce_buttons', 'my_mce_buttons');
   

   Log in to Reply