Divide Post content into separate divs for every 500 characters (or any other character counts)

3 comments

1. get_the_content() return what’s in the editor, but wpautop filters and such are attached to the_content (which you don’t need inside your split function – just apply it later manually with

   apply_filters( 'the_content', $output );
   

   at the end.

   You should as well use strip_shortcodes( get_the_content() ); before splitting it up:

   $output = get_the_content();
   $output = wp_trim_words( $output, 500 );
   

   You’ll need to loop through it as long as you got content and array_push() to your $output = array();.

2. so I really appreciate all the feedback and the answer that @kaiser and @t31os contributed. I am shaky with PHP so it was hard to put together a working block of code with kasier & t31os’s answer. That’s my fault for not being a very talented coder 🙁

   But, I wanted to post the solution that I came up with by doing my own research on PHP.net and asking a similar question on StackOverflow.

   Here is the code I’m using to accomplish what I originally set out to do:

       <?php
       $content = get_the_content();
       $strings = wordwrap($content, 500, "<!--break-->"); //insert this every 500 chars, but preserve whole words.
       $chunks = explode("<!--break-->", $strings); create a new string of 500-char sections.
   
       ob_start(); // buffer the output of the following expressions...
       foreach($chunks as $chunk_content) {
           echo '<span>'; // use <span> instead of <div> so as to not interrupt the paragraph formatting of the content when viewed normally (graceful degradation).
           echo $chunk_content;
           echo '</span> ';
           }
       $segmented_content = ob_get_contents(); // put the results of the above expressions into a variable.
       ob_end_clean(); // discard the expressions that were buffered.
       echo nl2br($segmented_content); // put the result through a filter which replaces line-breaks with <br> tags.
       ?>
   

   NOTES:

   • The purpose of this segmenting of the content is to create separate frames or “pages” that will be used by the BookBlock page-flip plugin (check out this codrops tutorial for more info). Each 500-character section will be treated as a “page”, and the navigation controls on the page allow the user to flip through the pages with a nice CSS3 3D transform transition.

   • I used <span> containers to wrap the output because this method lends itself to graceful degradation. If the user’s device does not support Javascript or some essential CSS3 properties, then Modernizer will detect that and my CSS will adapt, showing a normal page of content, not broken into separate frames, and in this case the <span> won’t disrupt the normal paragraph structure of the content.

   • I used output buffering in order to compile all the 500-char sections into one variable to be passed through the nl2br(); filter for final output.

   • At first I tried using the wpautop(); filter to ensure that paragraphs were rendered properly in the output, but soon remembered that <span> and <p> tags cannot overlap 😛 And if I applied the wpautop(); filter to each 500-char section individually, it would output <p> tags in the middle of sentences sometimes. The solution was to use the nl2br(); filter in order to add <br> tags at every line break in the content, which, because they don’t require a closing tag, will maintain the paragraph structure without disrupting the 500-char containers.

   QUESTION: This code works, and it will be used on a website that will not have heavy traffic (probably less that 50 visits per day). But, I am still concerned (because I really am not very knowledgeable about PHP) that this code may be sluggish, and not be very elegant.

   Assuming I knew exactly how accomplish what kaiser and t31os are recommending in their answer, would their solution be better for computation speed (i.e. fewer server requests, db queries, less code, etc.)?
   Or is my solution just as good?

3. Per a request from user2655393 I have written a version of his/her code that does not use output buffering, but uses string concatenation instead.

   $content = get_the_content();
   $strings = wordwrap($content, 500, "<!--break-->"); //insert this every 500 chars, but preserve whole words.
   $chunks = explode("<!--break-->", $strings); create a new string of 500-char sections.  
   $segmented_content = '';
   foreach($chunks as $chunk_content) {
     $segmented_content .= '<span>'; // use <span> instead of <div> so as to not interrupt the paragraph formatting of the content when viewed normally (graceful degradation).
       $segmented_content .= $chunk_content;
     $segmented_content .= '</span> ';
   }
   echo nl2br($segmented_content); // put the result through a filter which replaces line-breaks with <br> tags.
   

Comments are closed.