Blog

Just Custom Fields

Creating “Property” Single For Rental Sites

Today we will look at an example of how to create a Property single page for a rental site. Our single page will contain default fields like a title, description, and featured image. We will create additional fields to display more information about our property. As a result, we will get a single page like this:

Screenshot_161024_135342-640x616 Creating "Property" Single For Rental Sites

This example will be created on WordPress 4.6.1, on the child theme called “mytheme” which uses the “twentysixteen” template.

Our article will consist of 3 parts:

  1. Registration of a new post type “Property” using native WordPress hooks.
  2. Configuration of additional fields using Just Custom Fields plugin.
  3. Creation of a new page template for a single page of a new custom post type.

Registering a New Post Type “Property”

In order to register a new post type, we will use the WordPress native register_post_type function. It should be called on init hook. Let’s create a custom function called mytheme_register_property()  which calls the function register_post_type($post_type, $args).  We will attach the function mytheme_register_property() to the native hook “init” using the function add_action().  We open the directory inside our theme wp-content/themes/mytheme and find functions.php. Add this code to the end of file:

function mytheme_regiter_property() {
	
	$labels = array(
		'name'               => 'Property',
		'singular_name'      => 'Property',
		'menu_name'          => 'Property',
		'add_new'            => 'Add New Property',
	);

	$args = array(
		'labels'             => $labels,// (labels for admin panel)
		'public'             => true,
		'menu_position'      => 26,
		'menu_icon'          => 'dashicons-admin-home',
	);
	
	register_post_type('property', $args );
}
add_action( 'init', 'mytheme_regiter_property' );

 

Of course, you can use a 3rd-party plugin to register the Post Type from the admin panel. You can read about this in the article Creating “Company team” page .

Create New Fields Using the Just Custom Fields Plugin

Now we are going to create additional fields to store and display information about the property, like prices, addresses, rooms, the number of bedrooms, and floor plans.

Go to the Just Custom Fields settings in the admin panel Settings > Just Custom Fields. Choose post type “Property” and create a new fieldset. After that we can create the fields:

  • Address (type: textarea)
  • Number of bedrooms (type: inputtext)
  • Price (type: inputtext)
  • Rooms (type: collection)
    • Room image (type: simplemedia)
    • Room description (type: textarea)
  • Floor plans (type: collection)
    • Floor plan image (type: simplemedia)

Take a look at these screenshots for more information about filling in forms:

We have created all the fields for our post type “Property”. Now we are going to create a new post and fill in all the standard and new fields in the post. For example, take a look at these screenshots on how to fill in the fields in the post:

Create a Page Template for a Single Property Post

We have approached the creation of a single property post template. We have added a new post type, configured additional fields, and created a property post example. To create a new template we go to our theme folder wp-content/themes/mytheme and create a single-property.php file. More information about the creation of single page templates for custom post types, you can read https://codex.wordpress.org/Post_Type_Templates

Add this code to the end of file:

<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

$address = get_post_meta(get_the_ID(), '_property_address', true); // get Address from Just Custom Fields
$price = get_post_meta(get_the_ID(), '_property_price', true); // get Price from Just Custom Fields
$numberOfBedrooms = get_post_meta(get_the_ID(), '_property_number_bedrooms', true); // get Number Of Bedrooms from Just Custom Fields
$rooms = get_post_meta(get_the_ID(), '_property_rooms', true); // get Rooms Collection from Just Custom Fields
$floorPlans = get_post_meta(get_the_ID(), '_property_floor_plans', true); // get Floor Plans Collection from Just Custom Fields

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) : the_post(); ?>

			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<header class="entry-header">
					<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
				</header><!-- .entry-header -->

				<div class="main-photo">
					<?php the_post_thumbnail('medium'); ?>
				</div>

				<div class="main-description">
					<?php the_content(); ?>
				</div>

				<?php //Display all custom fields ?>

				<div class="price"><strong>Price: </strong><?php echo esc_html($price); ?></div>
				<div class="numberOfBedrooms"><strong>Number Of Bedrooms: </strong><?php echo esc_html($numberOfBedrooms); ?></div>
				<div class="address"><strong>Address: </strong><?php echo apply_filters('the_content', $address); ?></div>

				<h4>Rooms</h4>
				<div class="rooms-list">
					<?php foreach ( $rooms as $room ) : ?>
					<div class="room-item">
						<div class="room-image"><?php echo wp_get_attachment_image($room['_property_room_image']); ?></div>
						<div class="room-description"><?php echo apply_filters('the_content', $room['_property_room_description']); ?></div>
					</div>
					<?php endforeach; ?>
				</div>

				<h4>Floor plans</h4>
				<div class="floor-plans">
					<?php foreach ( $floorPlans as $plan ) : ?>
					<div class="floor-plan-item">
						<div class="floor-plan-image"><?php echo wp_get_attachment_image($plan['_property_floor_plan_image']); ?></div>
					</div>
					<?php endforeach; ?>
				</div>

				<?php wp_link_pages( array(
					'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
					'after'       => '</div>',
					'link_before' => '<span>',
					'link_after'  => '</span>',
					'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
					'separator'   => '<span class="screen-reader-text">, </span>',
				) );
				?>
			</article><!-- #post-## -->

			<?php 
			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Let’s consider how we got and displayed data from fields which we created using JustCustomFields. All data is stored in the post_meta table on our website. We got this data by using the function get_post_meta.

$address = get_post_meta(get_the_ID(), '_property_address', true); // get Address from Just Custom Fields
$price = get_post_meta(get_the_ID(), '_property_price', true); // get Price from Just Custom Fields
$numberOfBedrooms = get_post_meta(get_the_ID(), '_property_number_bedrooms', true); // get Number Of Bedrooms from Just Custom Fields
$rooms = get_post_meta(get_the_ID(), '_property_rooms', true); // get Rooms Collection from Just Custom Fields
$floorPlans = get_post_meta(get_the_ID(), '_property_floor_plans', true); // get Floor Plans Collection from Just Custom Fields

Before printing these fields, we need to call escape functions to make our site XSS secure.

  • Fields price and number of bedrooms are simple text fields. We display the data using the function esc_html.
  • Address field сontent added using the editor which contains HTML tags. This field is displayed using the function apply_filters with the filter the_content.
  • Both rooms and floor plans are types of collection fields. These fields are arrays with data. In our example, we have an array with Image IDs and an Image Description (from the editor). As we stated earlier, content from the editor we are displaying through the_content filter. As for images id we need to use the function wp_get_attachment_image to display our images.
<div class="price"><strong>Price: </strong><?php echo esc_html($price); ?></div>
<div class="numberOfBedrooms"><strong>Number Of Bedrooms: </strong><?php echo esc_html($numberOfBedrooms); ?></div>
<div class="address"><strong>Address: </strong><?php echo apply_filters('the_content', $address); ?></div>

<h4>Rooms</h4>
<div class="rooms-list">
	<?php foreach ( $rooms as $room ) : ?>
	<div class="room-item">
		<div class="room-image"><?php echo wp_get_attachment_image($room['_property_room_image']); ?></div>
		<div class="room-description"><?php echo apply_filters('the_content', $room['_property_room_description']); ?></div>
	</div>
	<?php endforeach; ?>
</div>

<h4>Floor plans</h4>
<div class="floor-plans">
	<?php foreach ( $floorPlans as $plan ) : ?>
		<div class="floor-plan-item">
			<div class="floor-plan-image"><?php echo wp_get_attachment_image($plan['_property_floor_plan_image']); ?></div>
		</div>
	<?php endforeach; ?>
</div>

After saving the file, you can see all the additional fields on the single page for Property. This is the result of our work:

Screenshot_161024_135342-415x400 Creating "Property" Single For Rental Sites

Thanks for your attention.