$post is null while in the loop

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;