1

I make a site of poetry. I would like to be able to display my text line by line (max 5) while it puts everything continuously.

Search result:
Line 1
Line 2
Line 3
Line 4
Line 5

On my excerpt I get this:
Line 1 Line 2 Line 3 Line 4 Line 5

Can you give me a track to follow?

Sorry, i'm french and my english is helped by google translate ;)

EDIT

Poetry original :

Jour et nuit
Du Nord au Sud
D’Est en Ouest
En France, en Europe
Inlassablement,
Ils transportent des marchandises.

Excerpt :

Jour et nuit Du Nord au Sud D’Est en Ouest En France, en Europe Inlassablement, Ils transportent des marchandises.

I would like :

Jour et nuit
Du Nord au Sud
D’Est en Ouest
En France, en Europe
Inlassablement, [...]

  • Bonjour! Can you please add one of your excerpt to the question? I don't know if they are using <p> or anything. You can use the edit link. – Jack Johansson Jul 29 '17 at 12:09
  • Thanks. So they are separated by new lines? or space? In original typing. – Jack Johansson Jul 29 '17 at 12:15
  • Yes while it puts the 5 lines in a single line – user3583085 Jul 29 '17 at 12:16
  • If you write each line in a new line (in the editor), I can write a function to do this for you. But if not, that's something close to impossible. – Jack Johansson Jul 29 '17 at 12:17
  • 2
    Possible duplicate of How to include line-breaks in the_excerpt? – kero Jul 29 '17 at 13:35
0

If you type your poets like this in the editor and separate them by new lines:

This is a phrase

This is another phrase

Then you can divide them by new line, and then return them to the front-end. You can do this by using the get_the_excerpt filter. This goes in your theme's functions.php file:

apply_filters( 'get_the_excerpt', 'divide_by_newline' );
function divide_by_newline() {
    // Get the content of the poet
    $content = get_the_content();
    // Let's trim the excerpt by default value of 55 words
    $content = wp_trim_words( $content , 55, '...' );
    // Check if it's empty
    if( $content ) {
        // Divide the poets by new line 
        $content_array = explode( "\n", $content );
        // Store 5 of them into a string
        foreach( $content_array as $key=>$phrase ) {
            if( $key < 6 ) {
                $excerpt .= '<span class="poet-excerpt">'.$phrase.'</span>';
            }
        }
    } else {
        $excerpt = '';
    }
    // Return the data
    return $excerpt;
}

Now, your excerpt's structure will be like this:

<span class="poet-excerpt">This is a phrase</span>
<span class="poet-excerpt">This is another phrase</span>

We're not done yet. You have to change the default view of your spans. By default, a span is an inline element, it means they will not make a new line. By using this piece of CSS, we make them behave like blocks:

.poet-excerpt{
    display:block;
}

You can easily add this by heading to Appearance > Customizer > Custom CSS without modifying your style.css.

But I have to mention, this works well only if you have a poet. This does not work for other excerpts.

All done. Code is also poetry!

  • 1
    Great, you are too strong :) – user3583085 Jul 30 '17 at 16:00
1

An alternative way to look at the issue is that the excerpt is right and the way your post is being displayed is wrong.

You should put each line of the poem as a paragraph, as if you are writing normal text, this should make the excerpt be in a multi line format. Now you should apply CSS changes to your theme that will eliminate the padding and margins between the paragraphs. The biggest challenge doing this way is to be able to identify to which posts to apply such styling.

An easier to implement approach might be to add a css style to the editor itself, which will let you mark that a "poem style" should be applied to specific paragraph.

this http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/ seems to be a relatively easy to follow guide, and this Add CSS Class to Link in TinyMCE editor is more to the point.

The challenge in the second approach is to get all the different CSS parts into their proper place, and obviously there might be more manual work in selecting the format for each paragraph. Another issue that you might encounter is the styling of the excerpt itself, if it is important to you, as the excerpt generation code removes the formatting.

If you decide to go this way, truncating an excerpt by max 5 lines becomes a relatively easy task which probably deserves a question of its own ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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