Prior to working at UNC, I have worked with WordPress from a design standpoint. However, now that I am here at UNC, I do a lot more work with the content that actually goes into the system. One thing that I have noticed is that the majority of the posters that I come in contact with fail to split their posts up into “introductory” and “expanded” chunks of text. Maybe it is because they really like having their entire posts available on their homepage, or maybe they just don’t know about WordPress’ page break tool called the <!–more–> tag.
If you will remember, to access the rest of this post you clicked on a link that read “Please, continue…” at the bottom of my “introductory” text. Once you clicked it, you were brought to this page which contains the full post or “extended” text. This type of content division allows for a less cluttered homepage, and subsequently reduces page scrolling, which we as designers are told is a fundamental principle in “usable design”.
Enter the <!–more–> tag:
The <!–more–> tag is easily inserted into your content by one of three ways. You can also combine the insertion methods and really customize the link that is placed.
- Method 1: Using the Visual Editor
There is a button located on the Visual Editor for your post that looks like a page break icon (see below). Click this icon and it will insert a bare-bones <!–more–> link in your post. This simple link will read (more…).
- Method 2: Keyboard shortcut
Place your cursor where you would like to split your content and press Ctrl+T on your keyboard. Please note, if you have special keyboard shortcut mappings on your computer, this method may not work. - Method 3: Using the Code Editor
If you click the “Code” tab on your editor, you will be able to actually type <!–more–> in the location where you want to split your post. In order for this method to work, you must be in the Code Editor. If you type <!–more–> in the Visual Editor, the system will actually translate this into HTML ASCII characters behind the scenes since the greater-than and less-than brackets are considered special characters. Typing <!–more–> in the Code Editor gets parsed as a piece of code and displays as intended.
As I stated above, you can also combine the methods to customize your “more” link. By default, the text that is inserted when you insert the <!–more–> tag reads (more…). If you want it to say something else, simply add the <!–more–> tag using one of the methods above. Once you have added this tag, enter the Code Editor and find it in your code. If you want your link to actually be displayed as “Click here for more information.”, change your <!–more–> tag to read:
<!–more Click here for more information.–>
[ Colored to show components ]
As you can see, the “<!–more” opens the tag, the text in the middle (in this case “Click here for more information.“) is what will be displayed to the user, and the “–>” closes the tag.
So go on, give it a try.