0

I want to split the content of a post into two parts. The First part is in an <strong>-tag, it is like a excerpt and in the second part i want to display the rest of the content. But I don‘t have any idea to solve this problem. Hope anyone can help me with that problem?

  • 3
    Is there some reason you're not using built-in WordPress excerpts? Where do you want to split the content - on the individual post/page/cpt itself, or on other templates like the category or archive? – WebElaine Oct 22 '18 at 21:52
0

Solution one:

As the wise commenter mentioned, you can use excerpts. the_excerpt() (link) "retrieves the post excerpt". get_the_excerpt() is going to be a string so you can wrap it up in whatever you fancy and after that, you can call the_content() to get the rest. The only downside that I see is that you'll have to split your content into two text areas while editing.

Your template should look similar to this:

<div class="entry-content">
    <p><strong><?php get_the_excerpt(); ?></strong></p>
    <?php the_content();?>
</div>

Solution two:

There is an option in WP's editor called Insert Read More tag that splits the content into two parts, one that's shown only in the archive or the index page and the rest that is shown in the full post page. The thing is, you can ignore it in the feeds but it still creates an empty <span> element in the full post. More on the option here: link

What came to my mind is to write a simple JavaScript that goes through the content, styles the elements and stops when the read more element is reached. Here is a simple setup:

<div class="entry-content">
    <p>I am strong.</p>
    <p>I am strong.</p>
    <p>I am strong.</p>
    <span id="more-id"></span>
    <p>I'm not.</p>
    <p>I'm not.</p>
</div>

And the script:

let entryContent = document.querySelectorAll(".entry-content *");

for (let i = 0; i < entryContent.length; i++ ) {
    entryContent[i].classList.add("stronger");
    i = (entryContent[i].id.indexOf("more") !== -1) ? i + entryContent.length : i;
}

The <span> element has id that contains "more" and the id of the post so checking if the element's id has "more" as a substring is going to be enough I think. One can add some more cases to exclude images, headings and so on.

Here is a demo: link.

It's a bit silly but I think it's fairly simple and flexible. You can also rewrite the DOM to add some <strong> tags but it's an "expensive" solution.

  • Thank you for that solutions. I use the excerpt function in the front page and it shows me the excerpt how I want it. On the single post view I need another excerpt. I have more than 5000 posts and I don’t want to edit all the posts to add a more tag. I think that is the easiest solution. With the more tag it is easy to split the content and the excerpt when I set the option for the boolean of the_content function to true. Now I’m searching for a solution to solve this problem. – F. Wissink Oct 23 '18 at 7:15

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.