Hau Tak Church Web

Jul 2020 - Sep 2020

Hau Tak Church website was built with Wordpress as CMS. This is a custom theme for hautakchurch.org as you may curious about, and is developed by using underscores as starter theme.

Features

Modern & clean webpage design

Custom post type for more customization

Custom animated header (navigation bar)

Customize function.php

Multi-pages templates

Webpage Design

The website has been rebuilt for many times. It was just a dynamic website with PHP as backend hosted with Synology server. If user want to edit the content, they have to access to the database directly. Also, the design is very old and it is not even responsive.

Recently, I planned to rebuild this site into a wordpress based site. The reason why I decided to make this decision is because using wordpress as CMS provide better user-experience for admin who have to constantly update the content.

The approach is start is to create a custom theme from Underscores. Also, I would like to make some changes on the design and the styling of the content to make the site more attractive.

Content Management System

As this project targets the needed of the church, which required to upload audios and edit notices frequency. I chose wordpress as the CMS while develop my own theme for fully customization.

Moreover, for the audio recordings. I created a custom post type for it with customized metadata. This allowed the user the upload the recordings which fit in into the recordings componenets template that I designed. Same for the events, activities and documents.

Adding hooks for custom post type

// Custom Post Type Recording
function recording() {
  $labels = array (
    'name'				=> '講道錄音',
    'singular_name' 	=> '講道錄音',
    'menu_name'			=> '講道錄音',
    'add_new_item' 		=> '添加講道錄音',
    'add_new' 			=> '添加新的講道錄音',
    );
  $args = array (
    'label'				=> __('recording'),
    'labels'			=> $labels,
    'supports'			=> array('title', 'editor', 'thumbnail'),
    'show_in_rest' 		=> true,
    'public'			=> true,
    'show_ui'			=> true,
    'capability_type'	=> 'post',
    'menu_icon'			=> 'dashicons-format-audio',
    'taxonomies'          => array( 'category' )
    );
  register_post_type('recording',$args);

}

add_action('init', 'recording');

Adding hooks for custom post type metadata

function recording_add_meta_box() {
  add_meta_box( 'recording_meta', '資料', 'recording_meta_callback', 'recording','side');
}

function recording_meta_callback($post) {
  wp_nonce_field('save_recording_meta_data', 'recording_meta_metabox_nounce');

  $value = get_post_meta($post->ID, '_preacher_name_value_key', true);
  echo '<label for="preacher_name_field" style="padding: 5px 3px; display: block">講員</label>';
  echo '<input type="text" id="preacher_name_field" name="preacher_name_field" style="margin-bottom: 10px" value="' .esc_attr($value).'" />';

  $value2 = get_post_meta($post->ID, '_bible_verse_value_key', true);
  echo '<label for="bible_verse_field" style="padding: 5px 3px; display: block">經文</label>';
  echo '<input type="text" id="bible_verse_field" name="bible_verse_field" value="' .esc_attr($value2).'" />';

}

add_action('add_meta_boxes', 'recording_add_meta_box');