1

I am using the_content to display content in a custom theme, but I am running into an issue.

Right now, I have some JS code that removes the <br> tags and replaces them with </p><p> tags, so each line is a new paragraph:

const d = Array.from(document.querySelectorAll('.content__main'));

for (let e of d) {
    let old = e.innerHTML;
    e.innerHTML = '';
    
    for (let line of old.split("\n")) {
        let cleaned = line.replace(/<\/?[^>]+(>|$)/g, "").trim();
        if (cleaned !== '') {
            let newE = document.createElement('p')
            newE.innerHTML = cleaned;
            e.appendChild(newE);
        }
    }
}

I have the_content in a slider and it's working great! The issue I am facing is setting a limit on it. So, I found: https://wplancer.com/how-to-limit-content-in-wordpress/ which allows me to limit the_content without using the get_the_content approach, that way my existing JS script will continue to work and my HTML tags do not get stripped.

This works, however, it sometimes breaks in the middle of a sentence because it filters based on the amount of words:

function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') { 
    $content = get_the_content($more_link_text, $stripteaser, $more_file); 
    $content = apply_filters('the_content', $content); $content = str_replace(']]>', ']]>', $content); 
    $content = strip_tags($content); 
    if (strlen($_GET['p']) > 0) { 
        echo ""; echo $content; echo " "."Read More →"; echo ""; 
    } else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {
        $content = substr($content, 0, $espacio); $content = $content; echo ""; 
        echo $content; 
        echo "..."; 
        echo "".$more_link_text."
            "; echo ""; 
    } else {
        echo ""; echo $content; echo "
            "."Read More →
        "; echo "";
    }
}

But I was hoping, there would be a way to filter this by the amount of P tags.

The HTML looks like:

<p>Test</p>
<p>Frog</p>
<p>Duck</p>

So, I was thinking I could specify a number like 2 and it would show Test and Frog completely (everything in that P tag) - then exclude duck and put a Read More link there.

I have seen lots of tutorials that limit the amount of characters or the amount of words, but I haven't found anything that would limit the amount of P tags.

Can anyone point me in the right direction?

Thanks,
Josh

1 Answer 1

0

I was looking into this because all of the text was not showing on my slider, and the slider had a height set with overflow: hidden. I didn't think there was a simpler solution than to create a filter for the_content until I stumbled across this one...

It's a css solution :-) All I am doing is using nth-child to display the first five items, then hide the rest:

#main p:nth-child(1n+6) {
    display: none;
}

This is a great solution, because I can use media queries to change the amount I show based on screen size, that way I don't have to have one magic number and it'll look good on large or small screens.

Hopefully this helps someone else trying to do the same thing.

Thanks,
Josh

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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