Dynamically populating href using jquery – WordPress

Create a Anchor element which you want to dynamically populate using jquery
Giving a class name is important as in your jquery you would refer the href using this class

Now time to add some jquery code (this was done for a WordPress theme) – it has by default the jquery added, if you are doing it for your own code you would have to add the latest jquery

Explanation for above code :
[sourcecode language=”plain”]var templateDir = ‘< ?php bloginfo(‘template_directory’) ?>’;[/sourcecode]
Declaring a variable to store the path for my blog template directory. (specific to WordPress)
$('.b-template').each(function() {
($(this).attr('href', templateDir + '/_inc/images/imgage-file.png'));
});

What this code does is it binds the .b-template class to the function and $(this).attr — href is replaces with the next argument which is templateDir + ‘/image-path’))
I wanted to add images and open them in lightbox as i was using gravity forms (WordPress forms plugin)
and my usage included that the user could select a particular theme and see a preview of it, you could add image path, URL to some website in href.

You can refer to Jquery API to read more about .attr

%d bloggers like this: