Using Timber to refactor complicated WordPress template

I’ve been brought on to redesign and a college department’s WordPress site and I’ve been experimenting with using Timber to make templating cleaner and easier to maintain.

So far it’s been going really well, but I’m having a lot of trouble getting this degree guide template into the controller + view setup.

Read More

There are custom post types for both degrees and courses. There is also a custom taxonomy for sorting the courses into semesters and years in the degree guide.

I’ve included code for the Freshman year of the guide below along with a link to a gist of the whole template.

I’m really just unsure of where to start with this. So any help, pointers, or resources are greatly appreciated!

  <?php if (is_single ( '19871' )) { 
      $freshmandegreeterms = 'freshman-year-bfa-filmmaking';
     $springfreshmandegreeterms = 'spring-freshman-year-bfa-filmmaking';
     $fallfreshmandegreeterms = 'fall-freshman-year-bfa-filmmaking';
      } elseif (is_single ( '19872' )) { 
      $freshmandegreeterms = 'freshman-year-bs-mis';
     $springfreshmandegreeterms = 'spring-freshman-year-bs-mis';
     $fallfreshmandegreeterms = 'fall-freshman-year-bs-mis';
      } elseif (is_single ( '19873' )) { 
      $freshmandegreeterms = 'freshman-year-bm-mis';
     $springfreshmandegreeterms = 'spring-freshman-year-bm-mis';
     $fallfreshmandegreeterms = 'fall-freshman-year-bm-mis';
      }
      elseif (is_single ( '19874' )) { 
      $freshmandegreeterms = 'freshman-year-ba-pop';
     $springfreshmandegreeterms = 'spring-freshman-year-ba-pop';
     $fallfreshmandegreeterms = 'fall-freshman-year-ba-pop';
      }
      ?>
    <h2>Freshman Year</h2>
    <div id="freshmanyear" class="row">
      <div id="freshmanfall"  class="medium-6 large-6 columns">
        <table>
          <tr>
            <td style="font-weight:bold;">Fall</td>
          </tr>
          <?php
  $fallfreshmanquery = new WP_Query( array ( 'post_type'      => 'course',
    'posts_per_page' => 20,
      'order' => ASC,
    'orderby' => 'menu_order',
     'tax_query' => array(
        array(
            'taxonomy' => 'degree-requirement',
            'terms' => $fallfreshmandegreeterms,
            'field' => 'slug'
        )
    ) ) );
while ( $fallfreshmanquery->have_posts() ) : $fallfreshmanquery->the_post();
?>
          <tr>
            <td><a href="#" data-reveal-id="myModal<?php the_ID(); ?>">
              <?php the_title(); ?>
              </a>
              <div id="myModal<?php the_ID(); ?>" class="reveal-modal" data-reveal>
              <?php the_content(); ?><br/>
                  <?php if ( get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ) ) : ?>
                Credit Hours : <?php echo get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ); ?>
                <?php endif; ?>

                <a class="close-reveal-modal">×</a> </div></td>
          </tr>
          <?php endwhile;   ?>
        </table>
      </div>
      <!-- end freshman fall -->
      <div id="freshmanspring"  class="medium-6 large-6 columns">
        <table>
          <tr>
            <td style="font-weight:bold;">Spring</td>
          </tr>
          <?php
  $springfreshmanquery = new WP_Query( array ( 'post_type'      => 'course',
    'posts_per_page' => 20,
      'order' => ASC,
    'orderby' => 'menu_order',
     'tax_query' => array(
        array(
            'taxonomy' => 'degree-requirement',
            'terms' => $springfreshmandegreeterms,
            'field' => 'slug'
        )
    ) ) );
while ( $springfreshmanquery->have_posts() ) : $springfreshmanquery->the_post();
?>
          <tr>
            <td><a href="#" data-reveal-id="myModal<?php the_ID(); ?>">
              <?php the_title(); ?>
              </a>
              <div id="myModal<?php the_ID(); ?>" class="reveal-modal" data-reveal>
                <h2>
                  <?php the_title(); ?>
                </h2>
                <p>
                  <?php the_content(); ?><br/>
                  <?php if ( get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ) ) : ?>
                Credit Hours : <?php echo get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ); ?>
                <?php endif; ?>
                </p>
                <a class="close-reveal-modal">×</a> </div></td>
          </tr>
          <?php endwhile;   ?>
        </table>
      </div>
      <!-- end freshman Spring --> 
    </div>
    <!-- end freshman year -->

Here’s a link to the full gist.

Related posts

1 comment

  1. Not really a specific question, but here are some things that may help.

    You could create a wordpress custom plugin(a class) for some of the controller logic. In this plugin it could determine $freshmandegreeterms value.

    One way you could sort the value of $freshmandegreeterms is create a function that accepts an argument – ie ‘19874’. Something like:

    public function set_freshman_terms( $code ) {
        $terms = [ 
           //Add necessary terms below
          '19871' => 'freshman-year-bfa-filmmaking',
          '19872' => 'freshman-year-bs-mis',
        ]
    
        $term = $terms[$code];
    
        $freshman           = [];
        $freshman['term']   = $term;
        $freshman['fall']   = 'fall-'.$term;
        $freshman['spring'] = 'spring-'.$term;
    
        //Set context
        $context['freshman'] = $freshman;
    }
    

    You could even pull that function into smaller functions as well. But, it would be nice to call this data in your view with twig as:

    {{ freshman.term }}
    {{ freshman.fall }}
    {{ freshman.spring }}
    

Comments are closed.