Add a Custom Wrapper To The WordPress More Tag

Most of the popular CSS frameworks that are available today offer some sort of grid system for us to use such that we can arrange our content in rows and columns. This is advantageous for a number of reasons, the least of which is not for aiding responsive design.

When it comes to WordPress, one of the most common elements that authors will use is the more tag.

Just as there are times where we may want to indicate that a class has (or doesn’t have) a more tag, we may also want to wrap the tag in a row with columns on either side of the tag.

This gives us flexibility in styling the tag not only by helping to place the text by using columns and/or offsets, but also by taking advantage of a grid in the context of responsive design.

WordPress More Tag Wrapper

WordPress provides the the_content_more_link filter that allows us to modify both the anchor and the text prior to rendering it out to the browser.

As with most filters, defining a custom function to modify the tag is as easy as adding the following function call:

add_filter( ‘the_content_more_link’, ‘example_add_more_link_class’, 10, 2 );

Obviously, this requires that we define a function named example_add_more_link_class in order to define our custom class.

As mentioned before (and as stated by the add_filter function’s “2″ argument), the function will accept two arguments:

  1. The full markup for the anchor
  2. The text of the anchor

In this case, we want to modify the entire anchor – not just the text.

The following gist demonstrates how to do just that:

The comments in the code should make it easy enough to follow; however, to be clear, here’s what the code is doing:

  • A div element is created that includes a class name to denote that it’s a more tag wrapper. Since this will appear on post listing pages, it’s important to use a class (versus an ID).
  • Three columns are added to the div element. The first and third elements are empty columns used for spacing, the second column actually contains the more link.
  • The full markup is then returned.

The code in this example (and the grid I am using) results in the following:

More Tag Wrapper

Of course, your results will vary based on the grid that you’re using.

At any rate, the filter provided above makes it easy to customize the more tag such that you can not only modify the text, but the anchor, as well.

Leave a Reply

Name and email address are required. Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>