1

This is a bit of a odd one, It is plugin related but sadly 1 month without a response from the Owner of the Plugin im turning to the community

The Problem is that I have this plugin "Visual Portfolio" Which uses Ajax to filter and load Images for a Gallery

Now After hours of fiddling,removing jq , removing plugins trying to pinpoint the issue, I've kinda figured out the plugin's ajax stops working all together whenever I call my footer in my Theme

So whenever I say It breaks even if I remove every single line of Code from the Footer except for <?php wp_footer(); ?>

Im at a complete loss ive removed any and all jq from the site all plugins and still, but for some reason It works on the Twenty-Twenty Theme so I know its a Conflict,

Do you guys maybe have some advice in regards to General Debugging for this kind of thing Before everyone jumps into arms and says this is not plugin specific support Im asking for a General Thing of how would you go about trying to resolve this your self, Please let me know of any code you might need.

Small note the Gallery Is Populated from a Post type and the featured images of that Post type.

Ill add my Footer, And a page where the gallery appears,

<?php wp_footer(); ?>
<script>
const backToTopButton = document.querySelector("#back-to-top-btn");

window.addEventListener("scroll", scrollFunction);

function scrollFunction() {
  if (window.pageYOffset > 300) { // Show backToTopButton
    if(!backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnExit");
      backToTopButton.classList.add("btnEntrance");
      backToTopButton.style.display = "block";
    }
  }
  else { // Hide backToTopButton
    if(backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnEntrance");
      backToTopButton.classList.add("btnExit");
      setTimeout(function() {
        backToTopButton.style.display = "none";
      }, 250);
    }
  }
}

backToTopButton.addEventListener("click", smoothScrollBackToTop);

// function backToTop() {
//   window.scrollTo(0, 0);
// }

function smoothScrollBackToTop() {
  const targetPosition = 0;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 750;
  let start = null;
  
  window.requestAnimationFrame(step);

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
    if (progress < duration) window.requestAnimationFrame(step);
  }
}

function easeInOutCubic(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t + b;
    t -= 2;
    return c/2*(t*t*t + 2) + b;
};    
</script>
<footer>
    <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
    <section class="footer ">
        <div class="container ta-c">
        <div class="footer-top">
            <div class="row img-row">
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-1.png">
                </div>
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-2.png">
                </div>
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-3.png">
                </div>
                <div class="col-md-3 col-6">
                    <img class="footer-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/footer-img-4.png">
                </div>
            </div>
            <div class="row" style="width: 100%">
                <div class="col-md-3 footer-block">

                    <h5>NEW BUSINESS INQUIRIES</h5>
                    <h2 ></h2>
                    <p class="railway-simple mg-remove">RESEARCH & MARKETING MANAGER</p>
                    <a class="footer-mail" href="mailto:"></a>
                </div>
                <div class="col-md-3 footer-block">

                    <h5>CALL US</h5>
                    <a  href="tel:">(</a>
                </div>
                <div class="col-md-3 footer-block">

                    <h5>POP IN FOR A CHAT</h5>
                    <a  href=""></a>
                    <p class="railway-simple" ></p>
                </div>
                <div class="col-md-3 footer-block">

                    <h5>FOLLOW US</h5>
                   <a style="margin: 10px;" href=""> <i class=" fab fa-facebook-f"></i></a>
                    <a href=""><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
            <div class="parent-footer">
                <h2>SITEMAP</h2>
            </div>

        <div class="footer-sitemap row">

            <div class="col-md-2">
                <h3>We are.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/lionremaster">Home</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/about/">We are</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/about">About</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/theteam">Meet the team</a></li>
                </ul>
            </div>
            <div class="col-md-2">
                <h3>We do.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/wedo/#services">Services</a></li>
                    <li><a  href="<?php echo get_home_url(); ?>/partners">Partners</a></li>

                    <li><a>Freebies</a></li>
                </ul>
            </div>
            <div class="col-md-2">
                <h3>Why us.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/whyus">Why us</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <h3>Who we work with.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/brandstories">Brand Stories</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/gallery">Gallery</a></li>
                    <li><a>Case Studies</a></li>
                    <li><a href="<?php echo get_home_url(); ?>/news">Industry News</a></li>
                </ul>
            </div>
            <div class="col-md-2">
                <h3>Get in touch.</h3>
                <ul>
                    <li><a href="<?php echo get_home_url(); ?>/getintouch">Contact us</a></li>
                </ul>
            </div>

         </div>
        </div>
    </section>
</footer>
<?php
get_header();
?>
<section class="brand-main">
    <div class="container">
        <div class="brand-header">
            <img class="line-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-10.png">
            <h4 style="letter-spacing: 2px;" class="railway-regular mg-top-s">BRAND STORIES</h4>
            <h1 class="railway-extra ">A PRIDE OF
                BRAND STORIES
                TO TALK ABOUT</h1>
            <img class="line-img mg-top-s" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-10.png">
        </div>
        <div class="brand mg-top-m">
            <?php
            echo do_shortcode('[visual_portfolio id="191" class=""]');
            ?>

            </div>
    </div>
</section>
<?php
get_footer();
?>


Also the jq file for my site:

function openTab(evt, cityName) {
    let buttonIndex = -1;
    const $clickedButton = $(evt.target); //Using Jquery to get the button which was clicked
    const tabcontent = document.getElementsByClassName("tabcontent");

    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    if($clickedButton.hasClass('tablinks')){
        $('.tablinks').each(function(i, el){
            if($(el).is($clickedButton)){
                buttonIndex = i;
                return false; //break from the each now that we have the button index
            }
        });
    } else {
        $('.tablinks-title').each(function(i, el){
            if($(el).is($clickedButton)){
                buttonIndex = i;
                return false; //break from the each now that we have the button index
            }
        });
    }

    //Remove active class from buttons before adding to newly selected
    $('.tablinks').removeClass('active');
    $('.tablinks-title').removeClass('active');

    //Add the active class to the corresponding buttons at the clicked index for both
    //Number and title
    $($('.tablinks')[buttonIndex]).addClass('active');
    $($('.tablinks-title')[buttonIndex]).addClass('active');

    document.getElementById(cityName).style.display = "block";
  

}
  document.getElementById("defaultOpentitle").click();
    document.getElementById("defaultOpen").click();

filterSelection("all")
function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("column");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
    }
}

function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
    }
}

function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
    }
    element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btnz");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
}







Adding on note's

Im going to provide a site link you can have a look at the Galleries and you'll see theres no functionality in relation to my ajax Im at the point where im willing to prove complete copies of the site just to get some assistance, I have 2 sites now that are using this plugin they share the same theme template theres a conflict thats neglecting all my ajax and I just dont know what it is anymore

Please let me know if there are any details you'd need

http://azipit.co.za/lionremaster/

My Functions php on my new site just for an example so you can see how little im using and theres still a conflict

<?php 

function wpt_theme_styles() {
    
    wp_enqueue_style( 'fontawesome_css', 'https://use.fontawesome.com/releases/v5.8.1/css/all.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/jquery-ui.min.css' );

}
add_action( 'wp_enqueue_scripts', 'wpt_theme_styles' );

function my_scripts() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', false );
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', false );
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/script.js', array('jquery'), '', false );  
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Heres a Screenshot of the new Site's Structure this is on local host ILL post a image of the Site tech "In qeustion" as-well enter image description here

enter image description here

I have plugins checking for errors but there are none, So I dont know what to post in that regard

Found one warning in logs now:

Warning: session_start(): Cannot start session when headers already sent in /home/azipitfy/public_html/lionremaster/wp-content/plugins/visual-portfolio/classes/class-get-portfolio.php on line 25

Here is a Zipped file with a local copy of the theme template I kinda use and the Logins for them are: U:Roy P:Test

The Google Drive link

The only difference here beyond my other site would be extra pages and css so this would give a great example of the issue im having

10
  • What's the error message? Did you check the PHP error log?
    – Tom J Nowell
    Jun 22, 2020 at 12:42
  • 1
    then the LionMarketingNew theme is the culprit, specifically template-flowpaper.php, look on line 11. I recommend syntax checking each file. It's probably a missing closing tag. I do notice in your questions title you used a PHP short tag, avoid PHP short tags, use <?php instead of <?
    – Tom J Nowell
    Jun 22, 2020 at 14:31
  • I don't know the problem exactly, but this JS file causes an error azipit.co.za/lionremaster/wp-content/themes/Lionmarketing/js/… This line, you have to check if the btnContainer actualy holds the DOM node before using it. var btns = btnContainer.getElementsByClassName("btnz");
    – Aboelabbas
    Jun 22, 2020 at 15:55
  • I actually just realized that error is from the current website I enabled debug and havnet gotten a error yet on the new site the azipit one its our test server, fixed that issue I think @Aboelabbas yeah im really not sure at this point and dont worry I do use <?php ?> I just typed t hat into the title for some reason Im quite honestly very unsure whats happening and why the ajax isnt working i Cant stumble upon any errors That Flowpaper thing we dont even use anymore so im unsure
    – Someguy
    Jun 23, 2020 at 6:43
  • For any new eyes the template.flowpaper.php I posted a error from the current site not the new one in development im having issue's with.
    – Someguy
    Jun 24, 2020 at 13:18

1 Answer 1

0

Managed to get this fixed, I dont know why this is the way it is, I'd appreciate a explanation

I had to go down to my footer and make sure the structure was the follow:

</footer>
<?php wp_footer(); ?>
</body>
</html>

If <?php wp_footer(); ?> is above </footer> the plugin doesnt work

So I'll be awarding bounty to any explanation for this

2
  • 1
    I suspect that the there's a missing php tag within your footer.php file in your theme. Normally the entire <footer> and </footer> html would be within that file - I find it weird that it isn't but that's not a mandatory thing though. Look through the PHP syntax in footer.php and see if anything's wrong there. Jun 25, 2020 at 18:58
  • Heres the funny thing that was my first step after I couldn't figure this out literally only moved my <?php wp_footer(); ?> from the top of the page to under my footer, I have no other php code in the footer besides one link which i made sure is closed properly, But I just cant understand I know wp_footer enquee's all your scripts but why does it matter that its at he bottom
    – Someguy
    Jun 26, 2020 at 7:50

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.