Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm looking to create a function that will add a link to a div (or replace the div with the div and a link - in simple; I'm trying to create a plugin that will turn the header image into a clickable link without a code edit).

Maybe I'm going about this wrong but the path I chose was str_replace. I was hoping something like this would work:

$content = str_replace('<div class="header-object">', '<div class="header-object"><a href=”<?php bloginfo(‘siteurl’); ?>”></a>, '<div class="header-object">';

The image is called through the "header-object" css class. So that's the entire div minus the end call. This code doesn't even come close to working (even as a header.php code edit). Any thoughts?

share|improve this question
    
Please read my updated answer carefully, hopefully it will work for you. It's a lot but it's good to understand it before you try and implement it. ;) –  Jared Jan 21 '12 at 18:53

1 Answer 1

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="<?php echo $blogurl; ?>"></a>');
});

Hope this helps.

share|improve this answer
    
I should of posted that jQuery is a little out of my scope. How would I throw this in a PHP document / function? –  Rob Pachasa Jan 21 '12 at 16:25
    
@RobPachasa I updated my answer, let me know if you have any issues with it. –  Jared Jan 21 '12 at 16:55
    
It should be mentioned that you should absolutely NOT include jQuery in your theme by pasting in a script tag, this will likely break any plugin that also uses jQuery. –  Milo Jan 21 '12 at 18:00
    
Right, this is just an extremely basic example. You SHOULD use wp_enqueue_scripts in your functions.php file (which I will update my answer with an example for in a bit). Also WP already has jQuery in it so you don't need to enqueue it from the Google CDN. –  Jared Jan 21 '12 at 18:27
1  
Oh my, this is awesome! Thank you for all your time! I'm going to try it out right now! –  Rob Pachasa Jan 21 '12 at 20:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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