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:
- The full markup for the anchor
- 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:
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.