There are several different ways to split content in your blog posts and pages
The More Tag
You can split the posts of your blog so that only the first part of the post is displayed on the home and archive (monthly, category, etc…) views. When you do this, a link will be placed directly after your excerpt, pointing the reader to the full content of the article.
You can find the insert More tag button in the first row of the visual editor toolbar or by pressing Alt+Shift+T:
Using the More tag
1) Go to Posts -> Add New in your dashboard to create a new blog entry (this does not work with Pages).
2) Begin writing your post. When you decide that you want to cut it off, you can insert the More tag to effectively split the post (mark where the excerpt officially ends). You will see, in the visual editor, the More tag as such:
3) Finish writing your post.
4) Publish the post and view the front page of your blog. You should see your post effectively split using the More tag. Click on the link, and you will be taken to the post in its full form. The front page of your blog should display the post similar to:
But wait, there’s more!
You can further customize the message that displays in the link to the full post content.
You will need to do this in the HTML view of your editor. Once you are change to the HTML editor, look for this code:
<!–more–>
Custom “Read More” Message
To customize the message, simply add a space after <!–more, and turn it into something like this…
<!–more But wait, there’s more–>
The front page of your blog should now display your post as such:
Note: You will need to customize the message for each post; you cannot declare a global message that will take effect on each and every post of your blog that uses the More tag.
Formatting Issues
If the More tag is inserted after writing a post, formatting errors can occur. The issue occurs when you insert the More tag using the visual editor, but it is actually placed within another HTML tag. As an example:
<strong>Oh man, this post is messed up.<!–more–></strong>
The above will cause the rest of the posts on your front page (or in an archive) to be formatted as bold, sometimes including your sidebar contents. Not cool. It can also make the sidebar fall to the bottom of the page. To fix the issue, just place the More tag on the outside of any pesky, closing HTML tags, like so:
<strong>Oh man, this post is messed up.</strong><!–more–>
Make sure to go into the HTML view of the problematic post and move your More tag to outside of any HTML tags (this includes div, strong, em, etc…).
Note: Copying and pasting content from rich text editors such as Microsoft Word often causes problems because a lot of extra HTML is used that can interfere with the More tag. Consider using a plain text editor, such as Notepad, instead or use the Paste from Word button.
NextPage (Pagination)
Did you know you could split a post/page up into different web pages so that is has pagination? All you have to do is type:
<!–nextpage–>
into the HTML editor where you would like your page splits to appear.
You can use it throughout a long post to make two, three, four, or more pages out of the single post. When you view your post on your site, the multi-page links appear as links at the bottom. The links below are an example of the feature in action.
Page Jumps
Page jumping is where you click a link and instantly get moved somewhere further up or down a long page. Try it:
CLICK HERE TO JUMP
Why use Page Jumps?
You might have a list of items at the top of the post and using these jump links means you can allow someone to jump straight to a place rather than scrolling down and looking. You could also use it to make a post jump all over the place is you wanted.
return to top
Create a Page Jump
The link starts it (the ‘Click me’) is written like this:
<a href=”#unique-identifier”>Click me</a>
Note the #
The link where that goes to is written like this:
<a name=”unique-identifier”>See?</a>
The #unique-identifier matches the name=”unique-identifier”.
So you could have <a href=”#another-identifier”>Jump 2</a> to <a name=”another-identifier”>Place 2</a>
At the beginning of the post or page, add this before all of the other HTML:
<a name=”top”></a>
and anywhere you want a link to zoom them to the top of the page, you put this:
<a href=”#top”>top</a>
Okay, now jump back to the top.
return to top
Excerpts
Excerpts are summaries of a blog posts that are shown in feeds and possibly on the home and archives pages, depending on the blog’s theme. When you use an excerpt, an automatic link will be placed directly after it pointing the reader to the full content of the post. When creating a new post or editing an existing post, you can use the Excerpt module to create one.
Note that only some themes utilize the excerpt feature. If your theme does not support excerpts, you can still split post contents into summaries using the MORE tag.
return to top
Related posts:
