Function: Add link to / inside div

0 Views

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:

Read More
$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?

Post Views: 0

Related posts

Leave a Reply

1 comment

  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.