Customising the next prev links

Using the in-built tags will – in most case – get you where you need to go.

Sometimes however one needs to customise the output somewhat, as in this example, where we attempt to style the HTML produced by the link_to_next tag and the link_to_prev tag .

What the tags do

By default, link_to_next and link_to_prev provide us with (from TextBook):

The link_to_prev tag can be used as a single tag or a container tag to return the permanent URL of the previous article by posting date.
If used as a container tag, the HTML required to output a hyperlink is returned; if used as a single tag, only the URL itself is returned.

The default method

By default, Textpattern uses this method to create a link to the previous and next articles, within an if_individual_article context:

<txp:link_to_prev><txp:prev_title /></txp:link_to_prev> <txp:link_to_next><txp:next_title /></txp:link_to_next>

What we want to do

In this instance, we’d like to customise the output by making the link a nice button. Something like this:

<p><a href="<txp:link_to_prev />" title="<txp:prev_title />" class="button orange">« <txp:prev_title /></a>
<a href="<txp:link_to_next />" title="<txp:next_title />" class="button orange"><txp:next_title /> »</a></p>

The problem…

The above code works fine, with the exception that if we are on the first or last article page the <a> hyperlink tag will display with » inside the tag. Why? <txp:link_to_next><txp:next_title /></txp:link_to_next> or <txp:link_to_prev><txp:prev_title /></txp:link_to_prev> would return nothing if we are on the first or last article page, but since we have placed the tags within our own <a> hyperlinks, an output is generated.

The solution

The solution (provided kindly by the Queen of TXP tags – Els) is the following:

<txp:variable name="prev" value='<txp:link_to_prev />' />
<txp:variable name="next" value='<txp:link_to_next />' />
<p><txp:if_variable name="prev" value="">
<txp:else />
	<a href="<txp:link_to_prev />" title="<txp:prev_title />" class="button orange">« <txp:prev_title /></a>
</txp:if_variable>
<txp:if_variable name="next" value="">
<txp:else />
	<a href="<txp:link_to_next />" title="<txp:next_title />" class="button orange"><txp:next_title /> »</a>
</txp:if_variable></p>

In the example, a variable is to set to the value of <txp:link_to_prev /> and <txp:link_to_next />. If nothing exists, no output will be generated.

Following this, we check if the variable is empty. If it is not empty, we know we are not on either the last or first article page, so please go ahead and display our fancy button links.

Of course, one can also use this method for the <txp:older /> and <txp:newer /> tags for article list pages.

Thanks to Els, as always for coming up with this solution ;-)

comments powered by Disqus