Search
Close this search box.

Using the WordPress Post ID Outside of The Loop

One of the most common requests we get from WordPress developers is how to access post and page data outside “the loop”.

Retrieving the unique numerical Post ID outside the loop will open up access to a whole range of other options, so let’s look at how this is done.

Inside The Loop

Obtaining the post ID within the loop is as simple as calling the function the_ID().

<?php the_ID(); ?>

This will print out (echo) the numerical ID number of the current post or page while cycling through the loop.

The Loop sets up a “context” for the post or page data which the function the_ID() expects.

Outside The Loop

Outside The Loop, the WordPress system has know idea what context it is in.

For example, you could be viewing a page, a single post, a list of all posts or a category list etc.

It’s up to you as a developer to create a new context or be aware of the context in which you are retrieving information from.

You can access the current post or page data by declaring the post data as a global variable:

global $post;

The current context has now been given access to the current post or page data.

You can then access the ID using a simple reference:

$post->ID

Example

Imagine you have a header image that is specified in header.php.  You want to display the image defined by a custom field on the current page or post if it exists.

Any code in the header.php will most likely be outside The Loop, so let’s show you how to retrieve the data from a custom field called “header-image”.

<?php
global $post;
$post_id = $post->ID;
$header_image = get_post_custom_values('header-image', $post_id);
if (is_null($header_image)){
// no custom field found. Do something else
else {
// Display the image.
//Image path the 1st entry in the custom field array
echo '<img src="'.$header_image[0].'" />';
}
?>

Line 04 introduces the get_post_custom_values() function which retrieves a custom field by name.

If this code was popped into your header.php file, whenever a custom field called “header-image” was found an image would be displayed using the file path stored in the custom field.

You can choose what to do if nothing is found.

We use regularly use this format in WordPress client sites and when no image is found we hide the div that the header image is contained within.

Here’s the full example to demonstrate.

<div id="header-middle-image">
<?php
global $post;
$post_id = $post->ID;
$header_image = get_post_custom_values('header-image', $post_id);
if (is_null($header_image)){
// No custom field value - hide the div
echo '<script>';
echo "document.getElementById('header-middle-image').style.display = 'none'";
echo '</script>';
} else {
// Display the image.
//Image path the 1st entry in the custom field array
echo '<img src="'.$header_image[0].'" />';
}
?>
</div><!-- #header-image-middle -->

Found this useful?

Check out our other WordPress Tips & Tricks.

Was this article helpful?
YesNo