Function: Add link to / inside div

Question

Why not do this with jQuery? It would be a very simple, here’s a sample, provided you have a means to get the blog’s URL into the jQuery code:

jQuery(document).ready(function(){
    jQuery('.header-object img').wrap('<a href="#blog url here#"></a>');
});

This will wrap <a> tags around an image inside the .header-object class.

To implement this into your code, it is run as a script like so:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.header-object img').wrap('<a href="#blog url here#"></a>');
});
</script>

You can really put that anywhere but it’s recommended you put it in the <head> tag. If you do put it in the head tag (and not enqueue it with wp_enqueue_script) you could use <?php echo home_url(); ?> in place of #blog url here#.

So this is what it would look like in your PHP file inside the <head> tag. You will need to include jQuery as well so I added an extra <script> tag for that, it is absolutely needed when running any jQuery (if your theme doesn’t already have jQuery loaded that is!):

(Read my edit below this code as well!)

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.header-object img').wrap('<a href="<?php echo home_url(); ?>"></a>');
    });
    </script>

</head>

<body>

    <div class="header-object">
    <img src="" />
    </div>

</body>
</html>

EDIT

The above is an extremely basic example to help you understand, what you need to do is use what WP already has available for you. Using wp_enqueue_scripts in your functions.php file. Assuming you are using a basic theme that does not already enqueue jQuery AND no plugins that enqueue jQuery, the following code would work.

Take the jQuery code that wraps the image in <a> tags and put it in a file called anything.js in your theme’s folder, in this example it will be themes/yourtheme/js/wrapheaderimg.js – note that <?php echo home_url(); ?> will not work here because it’s not a PHP file.

Second open (or create one if it doesn’t exist) functions.php in your theme’s directory, and the following code should automatically add the scripts you need inside the <head> tag:

function my_enqueue_scripts(){
    // enqueue jQuery (already included in WP)
    wp_enqueue_script( 'jquery' );

    // register and enqueue your custom .js file
    wp_register_script( 'wrapheaderimg', get_bloginfo( 'template_url' ) . '/js/wrapheaderimg.js' );
    wp_enqueue_script( 'wrapheaderimg' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

Now remember that echo home_url(); won’t work in that .js file, so if you are just using this for yourself, assuming the URL will always be the same, you could hard-code it in, otherwise there’s another way of doing it but I don’t know if it is best practices. Here it goes:

When you enqueue your scripts in your functions.php file, the file extension doesn’t have to be .js, you can make it .php so long as your JS file has a .php extension and the appropriate header at the very top of the file:

<?php
header("content-type: application/x-javascript");
?>

And then back in functions.php you could do something like this to pass the blog’s URL to the Javascript file:

/* functions.php */
function my_enqueue_scripts(){
    // enqueue jQuery (already registered in WP)
    wp_enqueue_script( 'jquery' );

    // register and enqueue your custom .php Javascript file with blog URL as a paramater
    $blogurl = urlencode( get_bloginfo( 'template_url' ) );
    wp_register_script( 'wrapheaderimg', get_bloginfo( 'template_url' ) . '/js/wrapheaderimg.php?url=" . $blogurl );
    wp_enqueue_script( "wrapheaderimg' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

And now back in your custom PHP Javascript file, you can access that variable with this, essentially using echo $_REQUEST['url'];:

/* js/wrapheaderimg.php */
<?php
header("content-type: application/x-javascript");
$blogurl = urldecode( $_REQUEST['url'] );
?>
jQuery(document).ready(function(){
    jQuery('.header-object img').wrap('<a href="https://wordpress.stackexchange.com/questions/39675/<?php echo $blogurl; ?>"></a>');
});

Hope this helps.