Add custom class to link outputted by views

Question

I'm using views to output a link. The user gets two fields in which to add the href and the text on the link. I wan't them to be able to put a class on the link as well. How can I do this?

In views I have set a fixed class to all those links, but I wan't to be able to add another class if I wan't to, from the backend.

Answer 1

You can do this on the server side with a Views field tpl.php file, or on the client side with jQuery.

---

For the server side method, go to your view edit -> Advaced -> Theme:Information -> chose your field you need to create a one template file (in your theme/templates folder):

For example: if your field name is title you will see something similar to this:

Field Content: Title (ID: title): - click on it and cope the code

views-view-field--YOURVIEWNAME--page--title.tpl.php -paste it here

Now you have 3 variables to play with

 * - $field: The field handler object that can process the input
 * - $row: The raw SQL result that can be used
 * - $output: The processed output that will normally be used.

Easy way - do it with str_replace function :D

<?php $output = str_replace('<a', '<a class="someclass"', $output); ?>
<?php  print $output; ?>

Also you can play around with($row) and create your own output. To easy development install devel module so you can dpm($row) and see what it contains. or you can print_r($row). have fun <3

---

Fastest way to do this with jQuery you can simple add class to your fields anchor tag.

$(document).ready(function() {
    $('.your-views-class-name .your-view-field a').addClass('someclass');
}

open firebug(int firefox) and find your view class name and field class name which contains anchor tag and add class to it. You can do this in YOURTHEME - scripts.js or any other js file you want.