Javascript - How to Use on a Page

[jmbalegn]

I am trying to add the below code to pull in real estate listings onto a particular page on my site. I’m not sure how to go about doing this.

Thank you!

Summary

<script type='text/javascript' charset='utf-8'>
  document.write(unescape("%3Cscript src='" + (('https:' == document.location.protocol) ? 'https:' : 'http:') + "//torreypinestemp.appfolio.com/javascripts/listing.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type='text/javascript' charset='utf-8'>
  Appfolio.Listing({
    hostUrl: 'torreypinestemp.appfolio.com',
    //propertyGroup: 'Mission West Lofts',
    themeColor: '#676767',
    height: '500px',
    width: '100%',
    defaultOrder: 'date_posted'
  });
</script>

[rad]

Hi Jenna,

Thanks for reaching out.

May I know where it should be added? If it’s in content using a builder, then you can add raw element within your content and add that code as raw element content. A content area element would do the same.

If you’re adding it on a sidebar widget or footer widget, then please add a text widget in Admin > Appearance > Widgets then add your code as text widget content.

Or if you’re adding them on header or footer, please go to Theme Options > Header > MISCELLANEOUS > Topbar Content, or Theme Options > Footer > Footer Content.

But if the code is a tracking code and you just need to add it globally, then you can add this code to your child theme’s functions.php (with your code).

add_action('wp_footer', 'x_custom_tracking_code', 999999999);

function x_custom_tracking_code () { ?>
<script type='text/javascript' charset='utf-8'>
  document.write(unescape("%3Cscript src='" + (('https:' == document.location.protocol) ? 'https:' : 'http:') + "//torreypinestemp.appfolio.com/javascripts/listing.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type='text/javascript' charset='utf-8'>
  Appfolio.Listing({
    hostUrl: 'torreypinestemp.appfolio.com',
    //propertyGroup: 'Mission West Lofts',
    themeColor: '#676767',
    height: '500px',
    width: '100%',
    defaultOrder: 'date_posted'
  });
</script>
<?php }

And if you’re not familiar with the child theme, then please check this as well https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57

Hope this helps