[FIXED] Wordpress local development site theme assets point outside of install directory

Issue

Working on a custom WordPress site where all the links on the theme are like this: href="/wp-content/...", Somehow this seems to work for the other developers but it doesn't work on my local development setup (MAMP). All these links to images and pages end up pointing to the root of my local server and not to the subdirectory where the installation lives, which results in a lot of files and theme assets not being found.

All I need is to do some quick front end and commit without editing the template so much that it becomes a problem to the other devs working on it.

I was wondering if there was a temporary solution so that the links go to the subdirectory and not the root? ie: 'http://localhost/WPSITE/wp-content/...', instead of 'http://localhost/wp-content/...'

Hope it makes sense!

Solution

You can use this script in footer.php file

<script>

    jQuery(document).ready(function(){

        var find_str = "/wp-content/";
        var replace_with = "http://localhost/WPSITE/wp-content/";

        $('img').each(function (index, value) {

            var src = jQuery(this).attr('src');

            if(src.indexOf(find_str) != -1) {
                console.log(find_str);

                src = src.replace(find_str, replace_with);
                jQuery(this).attr('src', src);
            }

        });
    });

</script>

Answered By - Harish