格仔 Blog: Wordpress Study Notes

Extension in VSCode

I install beautify for cleaning up the indentations of both php and html code at the same time.
I also install PHP Intelephense to give auto completion on html tag.

Prelude

Hierarchy of wordpress php files: Assume that we have a post type called "program", as registered by using

<?php 
function university_post_types()
{
  //Program Post Type
  register_post_type("program", array(
  'supports' => array('title', 'editor'),
  'rewrite'=>array('slug'=>'programs'),
  'has_archive' => true,
  'public' => true,
  'labels' => array(
  'name' => 'Programs',
  'add_new_item'=>'Add New Program',
  'edit_item'=>'Edit Program',
  'all_items'=> 'All Programs',
  'singular_name' => 'Program'
  ),
  'menu_icon' => 'dashicons-awards'
  ));
}
 
add_action("init", "university_post_types");
?>

inside \wp-content\mu-plugins\*.php (mu stands for "must-use") , then we get:

in our dashboard. This is a kind of customized post type, therefore we will create a php file that is dedicated to customizing post of type "program".

The Naming Convention in Wordpress

for single program post: single-program.php
for list of program post: archive-program.php
for specific page about programs: page-programs.php
and we will create a page called programs (the built-in category, technically page is also a post of type page.)

Loading CSS and Javascript files in Header

Inside functions.php of a theme folder, we write

function university_files()
{
  wp_enqueue_style("university_main_styles", get_template_directory_uri() . '/style.css');
 
  wp_enqueue_script(
    "main-university-js",
    get_theme_file_uri("/js/scripts-bundled.js"),
    null,
    "1.0",
    true
  );
}
 
add_action("wp_enqueue_scripts", "university_files");

Setting Title Dynamically

Inside functions.php we write

function university_features()
{
  add_theme_support("title-tag");
}
add_action("after_setup_theme", "university_features");

Custom Query

By default if we run while(has_post()) in archive-program.php (no "s", no "s", no "s"), wordpress will make a default query that loops through all posts of type "program". However, outside of this specifically named file, we need to make a custom query to obtain posts as follows. Suppose we want to obtain all "events" in the past inside page-past-events.php:

<?php
  $today = date('Ymd');
  $pastEvents = new WP_Query(array(
    'paged' => get_query_var('paged', 1),
    // 'posts_per_page' => 1,
    'post_type' => 'event',
    'meta_key' => 'event_date',
    'orderby' => 'meta_value_num',
    'order' => 'DESC',
    'meta_query' => array(
      array(
        'key' => 'event_date',
        'compare' => '<',
        'value' => $today,
        'type' => 'nuermic'
      )
    )
  ));
 
  while ($pastEvents->have_posts()) {
    $pastEvents->the_post(); ?>
  <div class="event-summary">
    <a class="event-summary__date t-center" href="#">
      <span class="event-summary__month">
        <?php
        $date = get_field("event_date");
        $eventDate = new DateTime($date);
        echo $eventDate->format("M");
        ?>
      </span>
      <span class="event-summary__day">
        <?php echo $eventDate->format("d"); ?>
      </span>
    </a>
    <div class="event-summary__content">
      <h5 class="event-summary__title headline headline--tiny">
        <a href="#"><?php the_title(); ?></a></h5>
      <p>
        See what is going on in our world.
        <a href="#" class="nu gray">Learn more</a></p>
    </div>
  </div>
<?php }?>

Posts Query Adjustment Before Loading into Wordpress from Database

It will be interesting to see the difference by removing is_admin() below:

function university_adjust_queries($query)
{
  if (!is_admin() and is_post_type_archive("program") and $query->is_main_query()) {
    $query->set('orderby', 'title');
    $query->set('order', 'ASC');
    $query->set('posts_per_page', -1);
  }
 
  if (!is_admin() and is_post_type_archive("event") and $query->is_main_query()) {
    // $query->set("posts_per_page", 1);
    $today = date('Ymd');
    $query->set("meta_key", 'event_date');
    $query->set("orderby", 'meta_value_num');
    $query->set("order", 'ASC');
    $query->set("meta_query", array(
      array(
        'key' => 'event_date',
        'compare' => '>=',
        'value' => $today,
        'type' => 'nuermic'
      )
    ));
  }
}
add_action("pre_get_posts", "university_adjust_queries");

It controls the query globally so that no custom query is required every time we need it.

The Default Post and its Archive

By default wordpress has "posts" and "blog" (which plays the role as archive-post). The default posts are themed by single.php while its archive is themed by index.php. When we try to create customized post (and accordingly its archive), if single-{slug} and archieve-{slug} are not found, wordpress will seek for single.php and index.php as a default theming file.

Add Support to Uploading Thumbnails

Run the following as an action hooking to "after_setup_theme"

1	`add_theme_support('post-thumbnails');`

and at the same time add the supporting field for desired post type:

register_post_type("professor", array(
  'supports' => array('title', 'editor','thumbnail'),
  'public' => true,
  ...
));

格仔 Blog

Pages

Sunday, March 15, 2020

Wordpress Study Notes