Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Since wordpress does not have a menu icon (aka "user friendly) way to add the command to a post or page, I'm trying to create a shortcode to do it.

However, as logic would have it, its not that easy. Doing this with a shortcode merely inserts into the markup, which is post process, not pre-process as wordpress does it substitution in pre-process.

Can anyone shed light on how this can be done?

share|improve this question
    
A shortcode would hardly be more "user friendly" than the tag itself. See if this helps: wordpress.stackexchange.com/questions/29675/… –  s_ha_dum Dec 22 '12 at 15:36
1  
I agree with @s_ha_dum, if you're going to go "User Friendly", shortcode isn't that route. Did you check out wordpress.org/extend/plugins/nextpage-buttons ? –  Matthew Boynes Dec 22 '12 at 16:28
2  
I have added a good solution for you. Review my answer - it was a pain to write but considering its holidays, merry christmas :P –  Christine Cooper Dec 22 '12 at 17:06
add comment

2 Answers 2

up vote 5 down vote accepted

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.

share|improve this answer
    
Wow, thanks Christine. Merry Christmas to you. Looking forward to testing this out. +100 :) –  N2Mystic Dec 22 '12 at 20:53
    
Glad I could assist you - but you should accept this as correct to show your appreciation :) –  Christine Cooper Dec 22 '12 at 21:52
    
The user will test it out first to see if it works and then they can accept it as correct if it works. That way, others will know that the accepted answer is a working solution. –  Aliyah Dec 23 '12 at 19:30
add comment

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

share|improve this answer
    
I tested this code and no new button was added. Can you please confirm if this worked for you and how? –  Christine Cooper Aug 11 '13 at 14:54
    
It works great for me ! We are adding the wp_page button to the TinyMCE editor, as described at codex.wordpress.org/TinyMCE_Custom_Buttons The above code searches for the wp_more button and adds the new button at that position. Here is an even simpler version, which adds the new button at the end of the first row : function my_mce_buttons($buttons) { $buttons[] = 'wp_page'; return $buttons; } add_filter('mce_buttons', 'my_mce_buttons'); –  here Dec 4 '13 at 22:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.