$post is null while in the loop - php

Question

According to WP documentation this can't be happening but it is:
http://codex.wordpress.org/The_Loop
You can display other information about each post using the
appropriate Template Tags or (for advanced users) by accessing the
$post variable, which is set with the current post's information while
The Loop is running.
All following code examples use $post to access the current post but I can't. Even though it goes in the loop $post is null:
$args = array('post_type' => 'carousel_bootstrap', 'posts_per_page' => 10);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
var_dump($post->ID);//=NULL
$title=the_title(null,null,false);
var_dump($title);//string(4) "NOPE"
....
endwhile;
wp_reset_postdata();
So either $post should not be null or the var_dump should not execute in the loop. I need to access this current post's custom fields but can't do it if $post is null. To make it more confusing; in the next line the $title variable is set to the current post's title.
How would I go about solving this? Using word press 3.6.1
[UPDATE]
I made a custom post called carousel, thought I'd use it to contain the html code for a twitter bootstrap carousel. In header I'm calling a function that checks if a custom carousel post exist with a certain name (provided by a custom value from the page).
In the header $post is the page, in the function checking the custom post the $post is null and when exiting the function and continuing in the header $post is the custom post (no longer the page).
Seemed like a good idea to do it this way when I started but looks like it can't be done this way.

Answer 1

The right way to get the post id in a custom WP_QUERY is: $loop->post->ID
$args = array('post_type' => 'carousel_bootstrap', 'posts_per_page' => 10);
$loop = new WP_Query($args);
global $post;
while ($loop->have_posts()) : $loop->the_post();
$loop->post->ID; //This is how you get the id $post will not work unless you
setup_postdata( $loop->post->ID );
print_r($post->ID); //now works.
endwhile;
wp_reset_postdata();

Answer 2

Got it doing what it does but think the code could use some improvement:
(added on blankslate)
In /wp-content/themes/blankslate/functions.php
//only using single carousel per page now
$vars=array('carouselHtml'=>'<div style="h'.
'eight:100px"><h1>Working, no Carousel</h1></div>',
'css'=>[],
'js'=>[]
);
function getInits(){
global $vars;
return $vars;
}
function setInits() {
global $post;
global $vars;
//see if the page specified a carousel (if value it's the title)
$carousel = get_post_meta($post->ID, 'carousel', true);
//collect all custom fields named "js" usually to fix screen
//re sizing like hiding images or big sliders
$scriptItems = get_post_meta($post->ID, 'js', false);
if ($scriptItems) {
foreach ($scriptItems as $item) {
$vars["js"][]=$item;
}
}
//load all custom fields of the page named css
//can be used for specific styles for the page
$cssItems = get_post_meta($post->ID, 'css', false);
if ($cssItems) {
foreach ($cssItems as $item) {
$vars["css"][]=$item;
}
}
//page has a custom field value named carousel
//it contains the title of the custom post that
//should contain the html, css and js
if ($carousel) {
//nice and intuitive query, gotta love it
$args = array('post_type' =>
'carousel_bootstrap',
'title' => $carousel,
'posts_per_page' => 100);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
$title=the_title(null,null,false);
if($title===$carousel){
//found the custom carousel post, load html
//and add css js not to the page because css
//goes in the top and js goes in the bottom
$tmp=get_post_meta($post->ID, 'js', true);
if($tmp){$vars["js"][]=$tmp;}
$tmp=get_post_meta($post->ID, 'css', true);
if($tmp){$vars["css"][]=$tmp;}
$vars["carouselHtml"]=$post->post_content;
break;
}
endwhile;
//$post was the page at the start of the function
//now it could be the carousel post, not sure
//if the following is needed but works either
//with or without it
wp_reset_postdata();
}
}
//creating custom post named carousel
add_action('init', 'create_carousel_post_type');
function create_carousel_post_type() {
register_post_type( 'carousel_bootstrap', array(
'labels' => array(
'name' => __('Carousels'),
'singular_name' => __('Carousel')
),
'public' => false,
'has_archive' => true,
'rewrite' => array('slug' => 'carousels'),
'show_ui' => true,
'menu_position' => 5,
'supports' => array('title','editor','author',
'thumbnail','custom-fields','revisions')
));
}
In /wp-content/themes/blankslate/page.php
setInits();
get_header();
....
<body <?php body_class(); ?> id="top">
<!-- Carousel
based on http://getbootstrap.com/2.3.2/examples/carousel.html
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<?php
$vars=getInits();
echo $vars["carouselHtml"];
?>
In /wp-content/themes/blankslate/header.php
$vars=getInits();
//output collected css
foreach ($vars["css"] as $item) {
echo '<link rel="stylesheet" type="text/css" href="'.$item.'" />';
}
The footer has same sort of code but for JavaScripts.

Answer 3

$args = array('post_type' => 'carousel_bootstrap', 'posts_per_page' => 10);
$loop = new WP_Query($args);
if($loop->have_posts()): while($loop->have_posts()): $loop->the_post();
//echo the title
the_title();
the_content();
//get the ID
$postId = get_the_ID();
endwhile;
endif;