When I add an API function to my wordpress site, the <div>s after the are removed.

I'm using an include to get information from an API and displaying it in our wordpress site.

I'm new to API's and the XML but have figured how to display the information I want and got it to display into wordpress using PHP include.

However, when the API data is included, it removes all the <div> after the code.  I thought maybe something in my HTML in the include may be interfering but checking the source shows the other 2 divs after are ignored by the browser.

Is there there something in the XML that needs to be escaped or may be causing this to happen?  

here's the code:

<style type="text/css">
#event {
	postion: relative;
	margin: 5px;
	width: 290px;
	height: 50px;
}

.menu h3{
	margin: 2px;
	float: left;
}

.date-display {
	float: left;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	margin-right: 5px;
	position: relative;
}

.date-display #display-top {
	height: 20px;
	margin: 0px;
	width: 30px;
	background: #fff;
	border-radius: 5px 5px 0 0;
	border-left: solid thin #666;
	border-top: solid thin #666;
	border-right: solid thin #666;
	
	padding: 10px 15px 5px 8px;
	font-size: 1.8em;
	color: #333;
}
.date-display #display-bot {
	height: 15px;
	background: red;
	margin: 0px;
	border-radius: 0 0 5px 5px;
	border-left: solid thin #666;
	border-bottom: solid thin #666;
	border-right: solid thin #666;
	width: 30px;
	padding: 0 15px 8px 8px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
}
#event .menu {
	float: left;
	width: 190px;
	position: relative;
}
.menu em {
	position: relative;
	width: 160px;
	padding: 5px;
	z-index: 2;
	display: none;
	top:-10;
	float: left;
	background: #f1f1f1;
	border-radius: 5px;
	color: #444;
	box-shadow: 2px 2px 2px #333;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

	$(".menu a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "5"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "10"}, "fast");
	});


});
</script>
<?php
$credentials="";
$today = date('Y-m-d');
$end = date('Y-m-d',strtotime('+7 day'));
echo "<h1>The Next 7 Days at Cornerstone</h1>";
//$num_days = '30';
//$today= date('Y-m-d');
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,0); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0); 
curl_setopt($ch, CURLOPT_USERPWD, $credentials);
// get this day's public calendar listing
curl_setopt($ch, CURLOPT_URL, "https://iamcornerstone.ccbchurch.com/api.php?srv=public_calendar_listing&date_start={$today}&date_end={$end}");
$xml=@curl_exec($ch);
// bail if cannot get response from CCB
if($xml === false){
    show_empty();
    finish();
}
// the response is XML so we let php parse it
$eventlist=simplexml_load_string($xml);
// if we do not get any items back then send empty
if(! isset($eventlist->response->items->item)){
    show_empty();
    finish();
    exit;
}
$i=0;
foreach($eventlist->response->items->item as $value){
	if(++ $i <= 2) {
	$date = date('F d, Y' , strtotime($value->date));
	$datenum = date('d' , strtotime($value->date));
	$datemon = date('M' , strtotime($value->date));
	echo "<div id=\"event\">";
	echo "<div class=\"date-display\"><div id=\"display-top\">" . $datenum . "</div><div id=\"display-bot\">" . $datemon . "</div></div>";
    echo "<div class=\"menu\"><a href=\"#\"><h3>" . trim($value->event_name). "</h3></a>" . "<em style=\"top: -85px; display: none;\">" . trim($value->event_description) . "</em></div>";
	echo "</div><br style=\"clear:both\">";
}

}if($i >= 2) {
		echo "view all events this week";
	}
finish();
exit;
//
//
function show_empty(){
    //do something here to say that there were no events in the list
    echo "There are no events today.";
    return;
}
function finish(){
    echo "";
    return;
}
?>

Open in new window


I am then using <?php include('filename'); ?> in my wordpress footer to bring the info in.

Here is the live site.

www.upperlimitdesign.com/sandbox/cornerstone

thanks.
LVL 2
axessJoshAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Jason C. LevineConnect With a Mentor No oneCommented:
if removing that will cause other problems.

I don't think removing the exit; will hurt anything but it's a little weird that removing it is what fixes the issue.  Usually WordPress will remove empty divs in the visual editor (it's a TinyMCE thing) but if they are being removed from the code in the footer, that's just odd.

However, I'd be curious to know if there is a better solution

There should be.  For one thing, the code above directly links to JQuery, which should already be present in WordPress and runs the risk of creating conflicts.  For another, running it in the footer is kind of a hack.  I would lean towards attempting to consume the feed in functions.php and just echoing the output in the footer.
0
 
axessJoshAuthor Commented:
UPDATE:

I started removing various lines in the code and found if I remove the exit; in line 127 if fixes it.  However, I'd be curious to know if there is a better solution or if removing that will cause other problems.
0
 
axessJoshAuthor Commented:
Jason1178.

will i run into any issues affecting other items in the functions file by placing this content there?
0
 
Jason C. LevineConnect With a Mentor No oneCommented:
You can't just copy and paste this code into functions.php and expect it to work.  Instead, you add the styles to the your theme's style.css file, the javascript to its own file and call it properly using wp_enqueue_script(), and then the PHP in functions.php with the output able to be stored in a variable to be called wherever you need it.

This would probably eliminate any weirdness in the output but if you can get away with just removing the exit command, you can see that's a lot simpler.
0
All Courses

From novice to tech pro — start learning today.