Create a section for Registered Users to add a timetable

WordPress is a versatile platform that allows you to build websites with various functionalities. In this WordPress and ACF tutorial, we will show you how to create a section for signed-up users to display a custom timetable of work hours or schedules on your WordPress website. We will use the power of WordPress themes, child themes, and the Advanced Custom Fields (ACF) plugin to achieve this.

Part 1: Setting Up a Child Theme

What is a Child Theme?

A child theme in WordPress is a theme that inherits the functionality and styling of a parent theme. It allows you to make customisations to your website without modifying the original theme files. This is important because it ensures that your changes are preserved, even when the parent theme receives updates.

Step 1: Create a Child Theme Folder

1. Go to your WordPress installation directory, specifically \wp-content\themes.
2. Create a new folder with a name that reflects your child theme. For example, if your parent theme is "SiteOrigin Corp," you can name your child theme folder something like "siteorigin-corp-child."

Step 2: Create the functions.php File

1. Open the siteorigin-corp-child folder you just created.
2. Create a new file named functions.php within this folder.

Step 3: Enqueue the Child Theme Styles

In the functions.php file, add the following code to enqueue the child theme's styles:

/** * Enqueue theme scripts and styles. */ 
function siteorigin_corp_child_scripts() { 
// Child theme stylesheet. 
wp_enqueue_style('corp-child', get_stylesheet_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', 'siteorigin_corp_child_scripts', 8);

This code will load the stylesheet of your child theme.

Step 4: Create style.css for the Child Theme

Create a new file named style.css inside the siteorigin-corp-child folder. In this file, add the following information to describe your child theme:

/* Theme Name: SiteOrigin Corp Child 
Author: SiteOrigin 
Author URI: https://siteorigin.com/ 
Theme URI: https://siteorigin.com/theme/corp 
Description: SiteOrigin Corp Child Theme 
Version: 1.0.0 Template: siteorigin-corp 
Text Domain: siteorigin-corp 
Domain Path: /languages/ */

Ensure that you replace the provided details with your own information.

Step 5: Activate the Child Theme

1. Access your WordPress dashboard.
2. Navigate to "Appearance" and select "Themes."
3. Find and activate the "SiteOrigin Corp Child" theme.

Part 2: Adding Custom Timetable Functionality with ACF

Example Use Case: Physiotherapist Directory

Let's consider a practical example where you want to create a website directory for qualified physiotherapists. Physiotherapists can sign up, provide their business information, and add a personal weekly timetable of appointments or work hours.

Step 1: Download and Activate ACF

1. Download and install the Advanced Custom Fields (ACF) plugin from the WordPress plugin repository.
2. Activate the plugin.

Step 2: Create a Custom Post Type

1. In your WordPress dashboard, go to the "ACF" tab on the left sidebar.
2. Navigate to "ACF -> Post Types" and click "Add New."
   • Plural Label: Physiotherapists
   • Singular Label: Physiotherapist
   • Post type key: physiotherapist
3. Save the settings.

Step 3: Define Custom Fields

Now, let's create custom fields for the physiotherapist's timetable.

In your WordPress dashboard, go to "ACF -> Field Group" and click "Add New."

Field Group Title: Timetable
Add the following fields:

Field 1:
Type: Checkbox
Label: Day
Name: day_of_week
Choices:
m: Monday
t: Tuesday
w: Wednesday
th: Thursday
f: Friday
Return: Label
Presentation: Display Horizontal

Field 2:
Type: Time Picker
Label: Monday Start Time
Name: m_st
Display Format: Custom -> H:i
Conditional Logic: Toggle on -> Show this field if Day value is equal to Monday
Presentation: Add the class: stime

Field 3:
Type: Time Picker
Label: Monday End Time
Name: m_et
Display Format: Custom -> H:i
Conditional Logic: Toggle on -> Show this field if Monday Start Time has any value
Presentation: Add the class: etime
Repeat these steps for each day of the week (Tuesday to Friday).

Step 4: Create Custom Templates

Now, let's create custom templates for adding and displaying physiotherapists and their timetables.

Creating the "Add Physiotherapist" Page Template

1. Copy the page.php file from the parent theme folder to the child theme folder.
2. Rename the copied file to page-add-physiotherapist.php.
3. Open page-add-physiotherapist.php and add the following code:

<?php 
/** * Template Name: Add Physiotherapist 
* 
*/ 
acf_form_head(); 
get_header(); ?> 
<div id="primary" class="content-area"> 
<main id="main" class="site-main" role="main"> 
<?php acf_form(array( 
'post_id' => 'new_post', 
// Use the ID of the field group here. 
'field_group' => array(38), 
// Display the title field 
'post_title' => true, 
'post_content' => true, 
'new_post' => array( 'post_type' => 'physiotherapist'), 
'post_status' => 'publish',  
'return' => %post_url%,
'submit_value' => 'Submit', )); ?> 
</main><!-- #main --> 
</div><!-- #primary --> 
<?php get_footer();

Adding the "Add Physiotherapist" Page in UI

1. Go to your WordPress dashboard.
2. Navigate to "Pages" and click "Add New."
3. Give your page a title, for example, "Add Physiotherapist."
4. In the right sidebar under the "Template" dropdown, select "Add Physiotherapist" (which is the template we created earlier).
5. Click "Save."

Step 5: Creating Templates for Adding and Displaying Physiotherapists

Step 1 -Creating the Front-End Display Template

1. Copy the single.php file from the parent theme folder to the child theme folder.
2. Rename the copied file to single-physiotherapist.php.
3. Open single-physiotherapist.php and add the following code:

<?php 
get_header(); ?> 
<div id="primary" class="contentarea"> 
<main id="main" class="sitemain"> 
<?php while ( have_posts() ) { 
the_post(); get_template_part( 'template-parts/content', 'physiotherapist' ); } ?> </main><!-- #main --> 
</div><!-- #primary --> 
<?php get_footer();

Step 2 - Creating the Content Template

1. Create a new folder in your child theme directory called template-parts.
2. Inside the template-parts folder, create a file named content-physiotherapist.php.

In content-physiotherapist.php, add the following code:

<?php 
/** * Template part for displaying page content in page.php 
* * @see https://codex.wordpress.org/Template_Hierarchy 
* * @license GPL 2.0 
*/ ?> 
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
<?php if ( has_post_thumbnail() && siteorigin_setting( 'pages_featured_image' ) ) { ?> <div class="entry-thumbnail"> <?php the_post_thumbnail(); ?> </div> <?php } ?> <?php if ( siteorigin_page_setting( 'overlap' ) == 'disabled' || siteorigin_page_setting( 'overlap' ) != 'disabled' && ( has_post_thumbnail() && siteorigin_setting( 'pages_featured_image' ) ) ) { ?> 
<?php if ( siteorigin_page_setting( 'page_title' ) ) { ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .entry-header --> <?php } ?> 
<?php } ?> 
<div class="entry-content"> 
<?php the_content(); 
$ms = get_field('m_st'); 
$me = get_field('m_et'); 
$ts = get_field('t_st'); 
$te = get_field('t_et'); 
$wst = get_field('we_st'); 
$wet = get_field('we_et'); 
$ths = get_field('th_st'); 
$the = get_field('th_et'); 
$fs = get_field('fr_st'); 
$fe = get_field('fr_et'); 
$days = get_field('day_of_week'); ?> 
<div class="timetable"> 
<?php if( $days && in_array('m', $days) ) {?> 
<div class="day"> 
<?php echo '<h5>Monday</h5>'; 
if (($ms) && ($me)){ echo '<p>' .$ms . '<span>-<span>' .$me.'</p>'; }?> 
</div> <?php } ?> 
<?php if( $days && in_array('t', $days) ) {?> 
<div class="day"> <?php echo '<h5>Tuesday</h5>'; 
if (($ts) && ($te)){ echo '<p>' .$ts . '&nbsp;<span>-<span>&nbsp;' .$te.'</p>'; 
}?> 
</div> <?php }?> 
<?php if( $days && in_array('w', $days) ) {?> 
<div class="day"> <?php echo '<h5>Wednesday</h5>'; 
if (($wst) && ($wet)){ echo '<p>' .$wst . '&nbsp;<span>-<span>&nbsp;' .$wet.'</p>'; }?> 
</div> <?php }?> 
<?php if( $days && in_array('th', $days) ) {?> 
<div class="day"> <?php echo '<h5>Thursday</h5>'; 
if (($ths) && ($the)){ echo '<p>' .$ths . '&nbsp;<span>-<span>&nbsp;' .$the.'</p>'; }?> 
</div> <?php }?> 
<?php if( $days && in_array('f', $days) ) {?> 
<div class="day"> <?php echo '<h5>Friday</h5>'; 
if (($fs) && ($fe)){ echo '<p>' .$fs . '&nbsp;<span>-<span>&nbsp;' .$fe.'</p>'; }?> </div> 
<?php }?> 
</div> 
</div><!-- .entry-content --> 
</div><!-- #post-## -->

Step 3 -Adding Custom Styling

To make your timetable look nicer, you can add custom styles to your child theme's style.css file:

/* Add custom styling for the timetable */ 
.timetable { width: 100%; background-color: #a7a4a4; } 
.day { width: 12%; display: inline; float: left; height: 240px; background-color: white; margin-left: 3px; padding: 4px; text-align: center; } 
h5 { border-bottom: 2px solid #a5a4a4; padding: 3px; } 
.site-main { margin: 0 0 0% 0 !important; } 
.stime, .etime { width: 170px; }

With these templates and styles in place, you've created a custom timetable functionality for physiotherapists on your WordPress website using a child theme and the ACF plugin. Users can now add and display their work schedules conveniently. Customise the styles further to match your website's design, and you're ready to go. Happy building!

---