[WordPress] WordPress Templates for Beginners

00-content-container.php

<div id="content-container">
  
  <p>
    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! 
    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that 
    thing away! You're going to get us all killed.
  </p>
  
  <h2>List of Post Titles For Acme Post Type</h2>
  <?php
  $args = array(
    'post_status'    => 'publish',
    'post_type'      => 'acme',
    'posts_per_page' => '10'
  );
  $custom_query = new WP_Query( $args );
  
  if ( $custom_query->have_posts() ) {
    echo '<ul>';
    while ( $custom_query->have_posts() ) {
      $custom_query->the_post();
      echo '<li>' . get_the_title() . '</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
  }
  ?>
  
  <p>
    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not 
    going to take them long to figure out what happened to us. It could be worst... It's worst. 
    There's something alive in here! That's your imagination. Something just moves past my leg! 
    Look! Did you see that? What? Help!
  </p>
  
</div><!-- #content-container -->

01-content-with-custom-tags.php

<div id="content-container">
  
  <p>
    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! 
    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that 
    thing away! You're going to get us all killed.
  </p>
  
  <h2>List of Post Titles For Acme Post Type</h2>
  <?php acme_get_titles(); ?>
  
  <p>
    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not 
    going to take them long to figure out what happened to us. It could be worst... It's worst. 
    There's something alive in here! That's your imagination. Something just moves past my leg! 
    Look! Did you see that? What? Help!
  </p>
  
</div><!-- #content-container -->

02-acme-get-titles.php

<?php

/**
 * Runs a custom query to get the most recent ten published articles of the
 * acme post type and then prints a sanitized list of the the titles.
 */
function acme_get_titles()
{
  
  $args = array(
    'post_status'    => 'publish',
    'post_type'      => 'acme',
    'posts_per_page' => '10'
  );
  $custom_query = new WP_Query( $args );
  
  if ( $custom_query->have_posts() ) {
    $html = '<ul>';
    while ( $custom_query->have_posts() ) {
      $custom_query->the_post();
      $html .= '<li>' . get_the_title() . '</li>';
    }
    $html .= '</ul>';
    wp_reset_postdata();
  }
  
  echo _acme_sanitize_titles($html);
}

/**
 * Uses the WordPress wp_kses() API to sanitize and echo the incoming markup.
 *
 * @param string $html The HTML to sanitize.
 */
function _acme_sanitize_titles($html) {
  
  if(empty($html)) {
    echo $html;
  }
  
  echo wp_kses(
    $html,
    array(
      'ul' => array(),
      'li' => array(),
    );
  );
}

03-twig-example.twig

{% extends "base.twig" %}
{% block content %}
	<h1 class="big-title">{{foo}}</h1>
	<h2>{{post.title}}</h2>
	<img src="{{post.thumbnail.src}}" />
	<div class="body"> {{post.content}} </div>
{% endblock %}

04-content-page.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php
		// Post thumbnail.
		twentyfifteen_post_thumbnail();
	?>

	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php the_content(); ?>
		<?php
			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
		?>
	</div><!-- .entry-content -->

	<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>

</article><!-- #post-## -->

05-template-timber-page.php

<?php

/**
 * Template Name: Timber Template
 * Description: Replaces the standard page with a Timber template.
 */

$timber  = new \Timber\Timber();
$context = Timber::get_context();
$post    = new TimberPost();

$context['post'] = $post;
Timber::render(
  array( 'content-' . $post->post_name . '.twig', 'page.twig' ),
  $context
);

06-cotent-sample-page.twig

{% block content %}
  <article id="post-{{post.ID}}" class="{{body_class}}">

  	<header class="entry-header">
      <h1 class="article-h1">{{post.title}}</h1>
  	</header><!-- .entry-header -->

  	<div class="entry-content">
  		{{post.content}}
  	</div><!-- .entry-content -->

  </article><!-- #post-## -->
{% endblock %}