Post

The Post field allows you to select one of your WordPress posts from a searchable dropdown menu.

This field type is exclusive to Block Lab Pro.

Screenshot showing the Post field block editor

Settings

  • Help Text: Instructions to describe the data needed in the field.
  • Post Type: The post type filter (e.g. Posts, Pages, or a custom post type)

PHP API Controls

  • name
  • label
  • control
  • type
  • order
  • location
  • width
  • help
  • post_type_rest_slug

Template Usage

To display the Post field in your template with a link to the post, use the field name you provided.

<a href="<?php echo get_permalink( block_value( 'consider' )->ID ); ?>">
    <?php block_field( 'consider' ); ?>
</a>

The API will return a WP_Post object, and echo the Post’s title. (See the WP_Post class on WordPress.org.)

Example template file /blocks/block-block-lab-example.php

<?php
// Block Lab Example Post Field

<a href="<?php echo get_permalink( block_value( 'consider' )->ID ); ?>">
    <?php block_field( 'consider' ); ?>
</a>

To use the block with the Post field on your site, locate it in the blocks menu.

Screenshot showing the Block Lab custom block in the menu

It will then display within your post/page where you can choose from the dropdown list.

And on the front-end of your site.

You can also take advantage of the WP_Post object and return additional information.

<?php 
// Block Lab Example Block
?>

<h3>You might also consider:</h3>

<a href="<?php echo get_permalink( block_value( 'consider' )->ID ); ?>">
    <?php block_field( 'consider' ); ?>
</a>

<?php
$post = block_value( 'consider ); 
$post_img_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
$post_img_alttext = get_post_meta( get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true );
?>
<div>
    <img
        src="<?php echo $post_img_attributes[0]; ?>"
        width="<?php echo $post_img_attributes[1]; ?>"
        height="<?php echo $post_img_attributes[2]; ?>"
        alt="<?php echo $post_img_alttext; ?>"
    />
</div> 

And on the front-end of your site.