Split the_content into two parts

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 echo 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.

Solution one:

Solution two:

Related Posts: