I am pretty new to this awesome forum, therefore not sure if this question below belongs here.

A little JavaScript, which works perfect when I drop a static url in it but I can't figure out how to do with get_permalink()

var $el, $tempDiv, $tempButton, divHeight = 0;

$.fn.middleBoxButton = function(text, url) {

return this.hover(function(e) {

$el = $(this).css("border-color", "white");
    divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));

    $tempDiv = $("<div />", {
        "class": "overlay rounded"

    $tempButton = $("<a />", {
        "text": text,
        "href": url,
        "class": "widget-button rounded",
        "css": {
            "top": (divHeight / 2) - 7 + "px"


}, function(e) {

    $el = $(this).css("border-color", "#999");

    $(".overlay").fadeOut("fast", function() {

$(function() {
$(".widget-one").middleBoxButton("Read More", "http:// bla bla bla");


Any help I would love to get.

  • 1
    Search this site for wp_localize_script.
    – s_ha_dum
    Dec 27, 2013 at 1:44
  • Could you help me a hand with the code?
    – Jerry.S
    Dec 27, 2013 at 5:43

1 Answer 1


Probably the best way to do this is as suggested above by using wp_localize_script.

You haven't mentioned how you're including the javascript - but I'm going to assume you're doing it the WordPress way. So, something like this:

add_action( 'wp_enqueue_scripts', 'wwm_enqueue_scripts' );

function wwm_enqueue_scripts()

 //see the documentation if you don't understand what's going on here. 
 wp_enqueue_script( 'some-handle', '/path/to/my-custom-js.js', $deps, $version, $in_footer' );
 //now, to define a javascript variable for the script to use
 wp_localize_script( 'some-handle', 'someUniqueName', array( 'myPermalink' => get_permalink(), ) );

now, the permalink will be accessible to your javascript via someUniqueName.myPermalink so...

$(function() {
$(".widget-one").middleBoxButton("Read More", someUniqueName.myPermalink);


the key bit of this is documented at: http://codex.wordpress.org/Function_Reference/wp_localize_script

  • First, thank @Will the Web Mechanic for responding and the code! It is (almost) working, it takes the first permalink (which would be great when only one would on the page) But the blog page shows 8 articles, it shows the top permalink on that excerpt and the other 7 have now the same as the first one. Is it possible to get every excerpt his own permalink?
    – Jerry.S
    Dec 27, 2013 at 15:58
  • I guess the example above sort of assumed that you would be doing this only on single posts. If you're doing this on an archive page and each of the posts in the archive needs to have its own javascript variable defined then you're going to have to take a different approach. Perhaps hook in to the_content filter and append your javascript variable there. Since the_permalink is readily available during the loop, and since it is presumably already being output, I would use jQuery to traverse the dom to the appropriate anchor tag and use its href as my variable.
    – Will
    Dec 27, 2013 at 17:49
  • Thank you for the fast respond and answer. You are for sure right, but your suggestions are far above my league. I will see to find another use (if at all) for the script, because I underestimated the complexity for what I wanted to achieve. Thank you for your time. (I can't vote your answer up but will do in future as soon it is possible)
    – Jerry.S
    Dec 27, 2013 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.