Creating your first WordPress theme – Part 2

Hello everyone!

As I said, this is our second post about Themes in WordPress. Today I’ll talk about:

• How to create page templates
• How to retrieve posts

If you want you can read the first post about WordPress themes.

Let’s GO!

Page Templates

You can customize pages the way you want, as you want. If you want to create a “About Us” page with Flash (arg!), images, js, css, etc, etc, etc. You must tell to WordPress what page is that.

So, lets create the “About Us” page. First you must create the “about-us.php” file under grossi folder (our folder’s theme, remember? It is under /wp-content/themes/grossi). But now we’ve to give it a name, a Template Name. So… inside this file, let’s crete a PHP Comment Block (/* */) and write the follow:

<?php
/*
 * Template Name: About Us
 */
?>

Well, done! For now, create a new page under your Administration Panel (Pages -> Add New). After you must write a title and a content, just that for now. Take a look in the right side of this page. You have there a option like Template or Template Name. There you’ll find the “About Us” option. Now WordPress knows that the file about-us.php is the template for that page you’ve created.

So visit your new page and you will find a blank page, right? Exactly! Your about-us.php file has only the PHP Comment, remember? Let’s update it and call there the header and footer parts.

<?php
/*
 * Template Name: About Us
 */
?>

<?php require_once 'header.php'; ?>

<h1>About Us</h1>

<p>Your text content here</p>

<?php require_once 'footer.php'; ?>

Good! But and my page title and content I’ve filled before in the Administration Panel? Easy! Let’s review some steps:

1. You’ve created a page
2. Said WordPress what is the page’s template
3. WordPress knows what you want

So… inside your about-us.php file you have all page information. Let’s replace our file with that information:

<?php
/*
 * Template Name: About Us
 */
?>

<?php get_header() ?>

<?php 
    // First you must tell WordPress that this is THE POST (or page in this case)
    the_post(); // yes, just it!!!!
?>

<h1><?php the_title() ?></h1>

<?php the_content() ?>

<?php get_footer() ?>

As you saw, the_title echo the title for you, ECHO! You can only get the title as follow:

<?php echo get_the_title() ?>

<!-- OR -->

<?php the_title() ?>

Retrieving posts

Let’s imagine you must add only the services (titles) that the company does. So we have to get that posts, right? Remember, we have a post type “Services”! Let’s get the services and write them inside the “About Us” page.

<?php 
    // lest reset the query and get new posts        
    wp_reset_query(); 
    query_posts(array(
        "post_type" => "services",
    )); 
?>

<h2>Our Services</h2>

<?php // Now let's loop through the posts (WordPress call this THE LOOP) and on each iteration say: "This is THE POST"

<?php while (have_posts()) : the_post(); ?>

    <h3><?php the_title() ?></h3>

<?php endwhile; ?>

So we have now all informations about the company’s services. Look, on the same page we got the page informations and the Post Type “Services”. As you imagine you can get WHAT YOU WANT in the same page, the way you want.

The query_post is part of the WP_Query class. You have a lot of options like order, posts_per_page, post_status, e much more. Take a look on WP_Query and you’ll understand a lot of information about getting posts.

In the next post I’ll explain other files you can use to make your life easier. See you!