Wordpress load php content via AJAX in WordPress

I’m trying to make this panel work:

The elements on the left are h4 with a data-* attribute that contains the post category that they have to load via $.ajax(); in the middle section. there i display just the the_post_thumbnail(); with a simple php loop.
Then on clicking on one img I want to load the details of the post via $.ajax(); on the box on the right.

$(document).ready(function() {
  $('h4.homus-partners-global-ajax').click(function() {
    var pb_cat = $(this).data('pb-cat');
    $('section').append(pb_cat);

    $.ajax({

      // type: "POST",
      // url: "wp-content/themes/homus-theme/loop_"+ pb_cat+".php",


      success: function(result) {

        $('ul.homus-partners-section-slide').html(result);

        $('section').append(result);
      }
    });

  });
});

section.homus-partners {
  max-width: 960px;
  height: 150px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: auto;
  margin-top: 60px;
}
@media screen and (max-width: 940px) {
  section.homus-partners {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 480px;
    height: 100%;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners {
    margin-top: 30px;
    max-width: 100vw;
  }
}
section.homus-partners .homus-partners-list {
  max-width: 170px;
  background-color: #a21c26;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
  text-align: left;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-list {
    max-width: 480px;
    min-height: 40px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  margin-left: 30px;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap {
    margin: 10px 30px;
    max-width: 480px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  color: #ffffff;
  font-weight: 400;
  text-transform: capitalize;
  padding: 3px 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
    margin: 0 5px;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before,
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 25%;
  left: -15px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before {
  border-left: 5px solid rgba(255, 255, 255, 0.5);
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
  border-left: 5px solid #ffffff;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before,
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
    position: absolute;
    width: 1px;
    height: 1px;
    left: calc(50% - 5px);
    top: auto;
    bottom: -5px;
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before {
    border-bottom: 5px solid rgba(255, 255, 255, 0.5);
  }
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
    border-bottom: 5px solid #ffffff;
  }
}
section.homus-partners .homus-partners-section {
  background-color: #c22633;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 490px;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-section {
    max-width: 480px;
    min-height: 140px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-section {
    min-height: 100px;
  }
}
section.homus-partners .homus-partners-section .homus-partner-section-arrow-left,
section.homus-partners .homus-partners-section .homus-partner-section-arrow-right {
  margin: 0 10px;
  height: 150px;
  width: 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
section.homus-partners .homus-partners-section .homus-partner-section-arrow-left i,
section.homus-partners .homus-partners-section .homus-partner-section-arrow-right i {
  color: #ffffff;
  cursor: pointer;
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
section.homus-partners .homus-partners-section .homus-partners-section-inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 460px;
  height: 150px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-left: 0px;
  width: auto !important;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 5px;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single:last-of-type {
  padding: 0;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img {
  width: 100px;
  height: 100px;
  margin: 0 5px;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img {
    width: 70px;
    height: 70px;
  }
}
section.homus-partners .homus-partners-detalis {
  max-width: 310px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  box-shadow: inset 0 0 0 5px #c22633;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis {
    max-width: 480px;
    min-height: 140px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-img {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 5px;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-img {
    width: 30%;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-img img {
  width: 100px;
  height: 100px;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-img img {
    width: 70px;
    height: 70px;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: auto;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-info {
    max-width: 70%;
    margin: 0 10px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info h4 {
  font-weight: 700;
  color: #c22633;
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info p {
  padding-right: 10px;
  font-size: 12px;
  line-height: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="homus-partners">
  <div class="homus-partners-list">
    <div class="homus-partners-wrap">
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_partner">
        partners
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_ente">
        enti
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="">
        associazioni
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_coll">
        collaborazioni
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_media">
        media
      </h4>
    </div>
  </div>

  <div class="homus-partners-section uk-slidenav-position" data-uk-slider>

    <a class="homus-partner-section-arrow-left uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous">
      <i class="uk-icon-caret-left"></i>
    </a>

    <div class="homus-partners-section-inner uk-slider-container">

      <ul class="homus-partners-section-slide uk-slider uk-grid-width-medium-1-4">

        <div class="homus-partners-section uk-slidenav-position" data-uk-slider>

          <a class="homus-partner-section-arrow-left uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous">
            <i class="uk-icon-caret-left"></i>
          </a>

          <div class="homus-partners-section-inner uk-slider-container">

            <ul class="homus-partners-section-slide uk-slider uk-grid-width-medium-1-4">

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

            </ul>

          </div>

          <a class="homus-partner-section-arrow-right uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next">
            <i class="uk-icon-caret-right"></i>
          </a>


        </div>

      </ul>

    </div>

    <a class="homus-partner-section-arrow-right uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next">
      <i class="uk-icon-caret-right"></i>
    </a>


  </div>

  <div class="homus-partners-detalis">
    <div class="homus-partners-detalis-img">
      <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg" />
    </div>
    <div class="homus-partners-detalis-info">
      <h4>Fenice Pool</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>

</section>

This is the cose i’m working on but i cant append any img to try the ajax function neither load php content because the server respond with a 500 error

EDIT
As asked I provide the php code

this is the code i want to replace

    <?php get_template_part('loop_pb_coll') ?>

and this is the ajax function loading the new code

 $.ajax({
  type: "POST",
  url: "wp-content/themes/homus-theme/loop_"+ pb_cat+".php",
  success: function(result){
    $('ul.homus-partners-section-slide').html('<?php get_template_part('+result+') ?>');
    $('footer').append(result);
  }
 });

This is the error i get

Post Views: 2

2 comments

Anonymous says:

June 16, 2023 at 2:27 pm

WordPress has a specific way to handle ajax requests. It is bad practice to place external PHP scripts inside the WordPress structure. If needed put them in a place on the server which is outside the control of the WordPress .htaccess.

WordPress functions anyway will not work within this script if you do not include wp-blog-header.php (which will trigger the bootstrap process of WordPress).

You can handle Ajax requests from within your theme or within a custom plugin you create.

The correct way to handle Ajax requests in WordPress is extensivley described in the WordPress codex:

https://codex.wordpress.org/AJAX_in_Plugins

Option 1: Create a custom Plugin and use the functions as described in the codex

Option 2: Use the ajax functions as described in the codex in a custom Theme or Child Theme

Option 3: Create an external PHP file outside the WordPress folder structure on your server structure and make an ajax call to this external script.

Option 1 and 2 are good practice in terms of migration.

in your header.php add this to declare your ajax url

<script>var ajaxURL = '<?php echo esc_js(admin_url('admin-ajax.php'));?>';</script>

then in your JS.

$(document).delegate('h4.homus-partners-global-ajax', 'click', function(event) {
    event.preventDefault();
    var pb_cat = $(this).data('pb-cat');
    var data = {
        'action': 'GetPost',
        catURL : "loop_"+ pb_cat,
    };
    $.post(ajaxURL, data, function(response) {
        $( 'ul.homus-partners-section-slide' ).html(response);
    });

  });

then in your functions.php

function GetPost(){
    $cat = $_POST['catURL'];
    get_template_part($cat);
    exit();
}
add_action('wp_ajax_nopriv_GetPost', 'GetPost');
add_action('wp_ajax_GetPost', 'GetPost');

Comments are closed.

WordPress load php content via AJAX

2 comments

Social Network

Related posts

2 comments

Social Network