Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Customizing WordPress: Dividing Long Posts

Last updated Oct 17, 2003.

Long posts fill up the front page, may require lots of scrolling, and can take a long time to load. These factors make your blog less user-friendly.

In this article, I show you how to use the More Quicktag as a way to divide longer posts. Use this tag to make your blog’s home page faster, more skimmable—and, just maybe, more effective.

We’ll work with the default Kubrick theme in WordPress version 2.3.3.

Options for a Post

When you write a post, obviously you’re able to choose categories, status, password, and so on from the sections on the right-hand side of the Post Editing page. My article "Customizing WordPress: Pages and Posts" explains these choices in detail.

A couple of less obvious capabilities dramatically alter how posts are displayed on your blog, and they’re particularly useful for long posts:

  • The More Quicktag divides a post into two.
  • The Next Page Quicktag splits a post across several pages.

Using the More Quicktag

Use the <!--more--> Quicktag to divide your post into two pieces: a teaser, and the remainder of the post (see Figure 1). On the home page, the More Quicktag is replaced automatically by link text that allows visitors to click through to see the full post on a single page (see Figure 2).

Figure 1

Figure 1 While writing a long post in Code view, I type <!--more--> to split the post.

Figure 2

Figure 2 While writing a long post in Visual view, I use the Quicktag to insert a More continuation. In this figure, you can see the word More between the two paragraphs, indicating the break.

Effect on Visitors Using a Web Browser

Only the teaser section of the post appears on the front page, followed by Read the rest of this entry ». Visitors can click through to see the full post on a single page.

This is a handy way to provide a quick view of what each post is about, while still fitting many items on the front page. If you write your posts carefully, with the most important information first, this feature can be very powerful (see Figure 3).

Figure 3

Figure 3 On my blog’s front page, my long posts display only the text before the More continuation. WordPress has automatically inserted a text link to the full post on its own page.

Effect on Visitors Using a Newsreader

While keeping items on your home page brief is an attractive option, it may have a drastic negative effect on those who read the RSS feed. They see only that first teaser paragraph in their feedreader, and must click through to your blog to read the rest of the post (see Figure 4). That process fragments a speedy workflow and may cause some readers to unsubscribe and never read anything you write.

Figure 4

Figure 4 In my newsreader, NetNewsWire, my long post displays only the teaser text before the More continuation. The reader must click the (more...) link to visit the blog on the Web and read the rest of the post. That’s annoying!

Drawbacks of Repetitive "More" Text

Human beings like symmetry and repetition. It’s very appealing to have a whole bunch of links that all say the same thing, even though when visitors click the links they go to different pages.

Unfortunately, it’s a case of things looking good but functioning poorly. Many blind people skim a page by listening to a list of all the links on a page—stripped away from the surrounding text. "Read the rest of this entry" repeated 10 times isn’t very useful (see Figure 5).

Figure 5

Figure 5 A list of links produced from VoiceOver on the Mac. Notice two instances of "Read the rest of this entry."

Search engines such as Google also put a lot of weight on meaningful link text. "Read the rest of this entry" carries no weight at all.

I recommend customizing what the More link text says—perhaps by providing the title of the post—in order to give blind visitors and search engines a much more useful experience. The next section explains how to customize the text.

Customizing the More Text

Open index.php from your blog’s theme into a text editor and locate this line:

<?php the_content(’Read the rest of this entry »’); ?>

Replace it with this line:

<?php the_content("Read more of " . get_the_title(’’, ’’, false)); ?>

Be sure to type your text between the double quotation marks (""); don’t use any quotation marks or apostrophes within the text. If Read more of doesn’t appeal, use some other text instead.

Figure 6 show the result in my example. Editing the PHP in this way causes the More continuation link text to include the title of the post (see Figure 7).

Figure 6

Figure 6 In the list of links, the "Read more" links now start the same way, but each also includes meaningful content.

Figure 7

Figure 7 The More continuation link text now starts the same way for each post in the Web view, but includes the title of the post.

With this change, your blog’s home page is now both more friendly to human visitors and more useful for search engines.