Blog

Just Custom Fields

Creating a “Company Team” Page

A lot of business sites have a page with employees or members. When editing these pages, sometimes it’s hard to keep the same style for all of them. Let’s check how the Just Custom Fields plugin can help us with the Employees page. Our goal is to get a nice page like this:

Screenshot_161024_123212-640x320 Creating a "Company Team" Page

We will work with WordPress v4.6.1, previously installed on a Unix-based server. In the past, we created our own child theme called “mytheme”, which uses the template “twentysixteen”.

The article consists of 3 parts:

  1. Creation of a new post type. We explain how to use it with a code or 3rd-party plugin. We will use this post type to store information about employees.
  2. Configuration of additional fields for new post types. Use the Just Custom Fields plugin to add fields like position, responsibilities, and start date of work.
  3. Creation of a new page template to display a list of employees and their information. We will add PHP code to new templates. After, we will assign this template to its corresponding pages in the admin panel on WordPress.

New Post Type “Employee”

1. Post type using native hooks and PHP

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.  We will create our own custom function called mytheme_regiter_employee(), which calls the function register_post_type( $post_type, $args ). After, we will attach our custom function to hook init using the function add_action().

Go to our theme directory wp-content/themes/mytheme, find functions.php and add this code to the end of file:

function mytheme_regiter_employee() {
	
	$labels = array(
		'name'               => 'Employees',
		'singular_name'      => 'Employee',
		'menu_name'          => 'Employees',
		'add_new'            => 'Add New Employee',
	);

	$args = array(
		'labels'             => $labels,// (labels for admin panel)
		'public'             => true,
		'menu_position'      => 25,
		'menu_icon'          => 'dashicons-businessman',
	);
	
	register_post_type('employee', $args );
}

add_action( 'init', 'mytheme_regiter_employee' );

2. Using plugins for post type registration

There is a set of plugins which carry out everything for you and give you the chance to create post types from the WordPress admin panel . In our example, we will use the Custom Post Type UI plugin. You can use what you are already using.

When registering, it is important to enter a name. We have also specified some additional fields, like Menu Position, Menu Icon, and Supports. Let’s leave all other fields alone by default.

You can see an example of how to fill in the form on the following screenshots:

After we have registered the new post type Employee, the section Employees should appear in the main menu of the admin panel. Later we will add employee information.

New Fields Using Just Custom Fields

First, you will need to download and install the plugin. You can download it from WordPress plugins directory. You can find installation instructions there too.

After installing and activating the plugin, go to the plugin’s configurations page from the main menu “Settings > Just Custom Fields”. Choose our post type Employees and create a new fieldset called “Employee Details”. Next, create employee fields. In our case we want to create three fields:

  • Position (type: select)
  • Responsibilities (type: textarea)
  • Start date of work (type: datepicker)

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

We created 3 additional fields for our new post type. Let’s see how they look and create a few Employees.

Open Employees > Add New. We will see a form like:

new_employee_screen-640x345 Creating a "Company Team" Page

Now, we have several employees created and we can start printing them on the front end.

Create a Page Template

We have approached the final stage in the creation of the list of employees page. We have added a new post type, additional fields, and added several entries.

The first step to making a template is creating a file in the theme folder. Since it will be a page template, let’s call it “page-employees.php.

We add the following code to our template:

<?php

/* Template Name: List of Employees */

$allEmployees = get_posts(array(
	'numberposts' => -1, // get all posts
	'post_status' => 'publish', 
	'post_type' => 'employee' // slug post type 
));

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(); ?>
		
		<h1><?php the_title(); ?></h1>
		
		<?php the_content(); ?>

		<div class="employees-list">

			<?php foreach ( $allEmployees as $employee ) : 

				$position = get_post_meta($employee->ID, '_position', true); //get position JCF
				$responsibilities = get_post_meta($employee->ID, '_responsibilities', true); //get responsibilities JCF
				$startDateWork = get_post_meta($employee->ID, '_start_date_of_work', true); //get start date of work JCF

			?>

			<div class="employee-item">
				<div class="employee-photo">
					<?php echo get_the_post_thumbnail($employee->ID) ;?>
				</div>
				<div class="employee-name">
					<h4><?php echo get_the_title($employee->ID); ?></h4>
				</div>
				<div class="employee-about">
					<?php echo apply_filters('the_content', $employee->post_content); ?>
				</div>
				<div class="employee-data">
					<div><strong>Position: </strong><span><?php echo esc_html($position); ?></span></div>
					<div><strong>Responsibilities: </strong><span><?php echo apply_filters('the_content', $responsibilities); ?></span></div>
					<div><strong>Start date of work: </strong><span><?php echo esc_html(date('d/m/Y', strtotime($startDateWork))); ?></span></div>
				</div>
			</div>
		
			<?php endforeach; ?>
		
		</div>		
		<?php		
		// End of the loop.
		endwhile;
		?>

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

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

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

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

Pay attention to the first line in the file of our template, /* Template Name: List of Employees */. It is the name displayed in the list of templates when editing the page. This is a required line when creating page templates. You can use any name you like here. For more details about this subject, you can read the WordPress Page templates article.

We obtained data from custom fields for our template, which we created earlier using the JustCustomFields plugin. To get this data we used the native WordPress function get_post_meta, because all additional data from custom fields are stored in the database table post_meta.


$position = get_post_meta($employee->ID, '_position', true); //get position JCF
$responsibilities = get_post_meta($employee->ID, '_responsibilities', true); //get responsibilities JCF
$startDateWork = get_post_meta($employee->ID, '_start_date_of_work', true); //get start date of work JCF

Before printing these fields, we need to call escape functions to make our site XSS secure. In our example, we used the function esc_html  to securely display simple text fields data and attached the filter the_content to field responsibilities using the function apply_filters. This field uses the editor when adding new data and has the HTML tags.


<div><strong>Position: </strong><span><?php echo esc_html($position); ?></span></div>
<div><strong>Responsibilities: </strong><span><?php echo apply_filters('the_content', $responsibilities); ?></span></div>
<div><strong>Start date of work: </strong><span><?php echo esc_html(date('d/m/Y', strtotime($startDateWork))); ?></span></div>

Now we can create the Employees page in the admin panel Dashboard->Pages and attach the template we created to it.

attach_employee_template_screen-640x304 Creating a "Company Team" Page

Looking at the page, we can see the results of the work we did. We have a list of employees with all the necessary information which we added earlier. (We added some styles, of course, to position the employees in columns)

Screenshot_161024_123212-640x320 Creating a "Company Team" Page

Thanks for your attention.