The WordPress Post Templates

In the last article we used the WordPress loop to begin putting post content on our pages. We’ll do the same now using the WordPress post loop to start populating our post blog content. We’ll do this in 2 places – on the home page we’ll have our most recent posts display with links to their individual content. We will also populate the content on the individual pages.

The first thing to do is open our index.php file again and put in the loop. Open index.php and paste in the following:

<?php

get_header();

?>

<!-- Start the Loop. -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post">

<!-- Display the Title as a link to the Post's permalink. -->

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<!-- Display the Post's content in a div box. -->

<div class="entry">
<?php the_excerpt(); ?>
</div>

<a href="<?php the_permalink(); ?>">&raquo; read more</a>

<!-- Display a comma separated list of the Post's Categories. -->

<p class="postmetadata">Posted in <?php the_category(', '); ?></p>
</div> <!-- closes the first div box -->

<!-- Stop The Loop (but note the "else:" - see next line). -->

<?php endwhile; else: ?>

<!-- The very first "if" tested to see if there were any Posts to -->
<!-- display. This "else" part tells what do if there weren't any. -->
<p>Sorry, no posts matched your criteria.</p>

<!-- REALLY stop The Loop. -->
<?php endif; ?>

<?php

get_footer();

?>

So we’ve done a couple of things here – we’ve opened the loop and told WordPress to start listing the posts. If you’re working with the default install of WordPress, you only have one post. You can create some more to see multiples listed.

We start the loop and give some conditions for categories and search. WordPress will by default use this for all three types of pages – the index page, category indexes and search results. We use some other code to bring in other parts of our post – the author, date, title, permalink, comments etc…

Now all we need to do is get the individual permalink pages working. Go back to the template folder and create a new file. We’ll save this as “single.php”. This is what WordPress looks for for displaying single pages.

In the single.php file, paste the following code:


<?php

get_header();

?>

<div id="content" class="narrowcolumn">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <?php the_author() ?> </small>
</div>
<?php the_content(); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','&laquo; Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries &raquo;','') ?>
</div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>
</div>

<?php

get_footer();

?>

This code will populate the permalink content for each blog post and display all of its information and content. You can obviously modify these templates to your liking. Its really that easy.

In the coming articles, we’ll explore optional page and post templates. You might want a special post to have a slightly different look than the others and this is easily achieved with WordPress.

The WordPress Page Template

So in the last tutorial we looked at how the basic index template works in conjunction with the header and footer files on our WordPress site. In this tutorial I want to take a look at the WordPress page template. This might seem a little backwards in that most tutorials at this point go into blog posts, but I think its easier to start with pages in that its a little more simple.

Remember that the 2 building blocks of content types in WordPress page templates are posts and pages. Posts are canonical and go in a flow – they are added to often and frequently have very targeted, specific content. Pages are used typically to display general information about the site – are not dependent on any order and typically register as main parts of the website navigation.

Actually, we just built a page in the last tutorial – this was the home page. So our general WordPress page template won’t be much different. The home page could be (and usually is) used to display the most recent blog posts. That’s a little more than the basic, static page content we’re talking about here.

WordPress by default uses some basic template names. If we create a file in our template folder and call it page.php – WordPress will know to use that in the site for the main page template. We can also create additional templates if we want more variety and I will show you how to do this. They will need to be registered so WordPress will see them. But lets start with the built-in page.php.

1) Create a new file and save it in the theme directory. Call this file page.php

2) Paste the following code into the page.php file:


<?php
get_header();
?>

<!-- Page content will go here -->

<h2>This is a page template</h2>

<?php
get_footer();
?>

What we have done here is put in the exact same code as the index.php file, but we put the H2 statement in saying that this is a page template. Now if you log into WordPress admin and go to pages->sample page->edit you can see that WordPress came with a sample page set up. If you click “View Page” you will see our template is working with the H2 tag we put in. You won’t see this on the home page – that is the difference.

So now we need to put some content into our template so it will actually display something.

The WordPress Loop

To get content on your pages (and even posts) we’ll use what’s known as “The Loop”. WordPress brings many elements into your pages including the title, author, meta information, the post content or page content, comments if they are enabled, forms for new comments, etc. The technique for bringing all of these into a page is known as a loop. This is a PHP function that continues to bring in elements while the page is called until they are complete. On a page – the loop is very simple. Paste the following code into your page.php file – again between the header and footer blocks. You can delete the previous code we put in if you like:


<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="page-content">
<?php the_content(); ?>
</div>
<?php endwhile; // end of the loop. ?>

It may seem weird to do a loop for only one page, but this is how WordPress works and it stays consistent when we start working with posts. Inside the loop we call 2 functions – the_title() and the_content() – there are others we could use as well, but this simply displays the title and the content.

That’s it – go to your WordPress admin and select the sample page. Click “View Page” and you should see the page display!

You’ll notice our design is pretty bad, but don’t worry – we haven’t done any CSS work on this yet – we’re just getting the framework together.

Next we’ll look at creating menus so our pages will populate into the navigation.

Customizing A WordPress Theme

Customizing A WordPress Theme

Customizing a WordPress theme is generally on the wish list of anyone who is using WordPress to power their website. Most people hack into the theme files and try to make modifications to get things to look the way they want them. While this seems to be the way to do this it creates a secondary problem. Often times theme authors (including WordPress for its own default themes) will issue theme updates. If you’ve made any changes, the update breaks them and replaces them.

For this reason, WordPress uses a system called Child Themes. As the name implies, Child Themes are dependent on an installed Parent Theme. This might seem confusing, but its a great, simple way to make modifications that will be safe from future updating. Child Themes are a very simple concept and easy to write.

Lets say you’ve found a great theme, but there’s some simple thing driving you nuts. Perhaps you don’t like the font. Maybe the post title text is the wrong color. You don’t want the site to say “powered by WordPress” in the footer. The simplest way to fix this is by writing a Child Theme. Lets take the last example of removing the “powered by WordPress” text on the bottom of every page.

Customizing a WordPress Theme With Child Themes

Create a folder on your FTP server in wp-content/themes/ and name it what ever you like. I usually name it after the website to keep it clear.

Create a file in this folder called style.css – this is important. The file must be called “style.css”.

Open this file and paste the following – make changes where noted:

/*
Theme Name: The name of your child theme - could be anything
Theme URI: The URL for your website - if you're not distributing this child theme this isn't important
Description: Child theme for the Twenty Twelve theme
Author: Your Name
Author URI: A link to your website
Template: twentytwelve
Version: 0.1.0
*/

The important lines in here are the Theme Name and the Template. The Template must be the proper name of the parent theme or this won’t work.

Below this, paste the following code:

@import url("../twentytwelve/style.css");

This tells WordPress to bring in the stylesheet of the parent theme. Now any CSS you write in this file will override the Parent Theme styles. You could completely rewrite the stylesheet – if that’s what you want to do, skip the import line, but this tutorial is for people who want to make small changes.

You now have a Child Theme set up – congratulations! Go back to the WordPress Admin and activate your new Theme.

So how do you start making changes? For CSS styles, add styles to the style.css file we just created. These will override the parent styles.

For template changes, copy the Parent Template into our new Child Theme folder and make your changes there. Because WordPress knows this is a child theme, it will override any parent template files with files in this folder. We want to take out the “powered by WordPress” statement, so copy the footer.php file from the twentytwelve them into your new child theme folder. After you’ve copied this file, make changes to the file in our new Child Theme. WordPress will ignore the old one.

If you open the new footer.php file you copied, you should see:

<?php
/**
* The template for displaying the footer.
*
* Contains footer content and the closing of the
* #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?>
</div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">
<div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

Simply remove the lines that read:

<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>

You could replace those lines with something else if you want – I usually add a footer menu here so I can link to things like privacy policies, but you could leave it blank as well.

So that’s it! Next time WordPress updates the Twenty Twelve theme you won’t start seeing “powered by” again because your new Child Theme will remain untouched.

Chances are you’ll be making further modifications which is great. If these files were overwritten you’d loose them all which is the whole purpose of using a Child Theme.

WordPress.com VS WordPress.org

WordPress.com VS WordPress.org

One of the biggest points of confusion people have is the difference between WordPress.com and WordPress.org. I think the best way to explain all of this is to back up a little bit and talk about what WordPress is exactly.

What is WordPress

WordPress is an open-source CMS platform written in PHP and MySQL by Matt Mullenweg and Mile Little. It was first released in 2003 as a fork of an older blog engine b2/cafelog with some improvements. Over the years, WordPress has evolved into arguably the most used platform for blogging and in the last few versions it has proven to be a worthy CMS for non-blog based websites. With multi-user support and extensions for BuddyPress, it has a great amount of versatility for many different options of websites and online applications as well.

Open-Source means its completely free to use. You can download the code, set it up on a server and use it to power your website and write content. Developers contribute to regular updates and upgrades including those that keep it safe and secure. Its a labor of love. So if all of this is free, what is the incentive and how would anyone make any money on a project of its size? There’s bandwidth to pay for, not to mention the time involved in keeping the software current and updated.

WordPress.com VS WordPress.org

Well there’s 2 ways to use WordPress. Yes they give it away and you can download the code at WordPress.org. They also provide WordPress.com for those who want a blog, but don’t want to deal with how to host it. The .com version is also free on the surface, but it provides a simple setup for people who want to start a blog and just go.

The money comes from the .com side. It is free, but there are limits on features and bandwidth. If your site starts getting popular, you’ll need to upgrade your account. Its still a great deal and very practical. Other features such as custom URL’s and video hosting have annual fee’s associated with them. There is a complete list of features on the WordPress.com site. Honestly, having hosted my own version of WordPress on many websites over the years, I think their prices are very fair.

So Which Should I Use?

Well its an interesting question. I think they have a great business model. There aren’t many organizations that give away their core product while doing very well on services around it. WordPress is amazing in this regard.

I would say the hosted .com version is best for those who want to customize, but don’t have the technical knowledge to make it all work. The pricing is very fair and its simple as pie to deal with. Plus you can grow your site naturally. Start it for free and when you need to add options you can do it as your popularity grows.

But for people who like to tinker and aren’t afraid of some set up and maybe some light coding – I think downloading for free on the .org site is without a doubt the way to go. You’ll be able to customize everything from the word go and you’ll get to where you want to go much faster with your site.

Having said that – yes there is a cost. The software might be free, but the services you’ll need to run it are not.

You can add these ala-carte as you need them through the .com site, but you will pay for them eventually and things like custom theming will require a service to do it at all. So what are the costs for setting it up on your own?

I recommend several things to get going quickly that won’t break the bank.

1) Hosting

I prefer Bluehost. They offer shared hosting accounts for a very low rate and do the trick just fine. You get unlimited hosting and unlimited sites. You could put many different wordpress sites all on your account and your cost per site comes down considerably. All with their own URL’s. And Bluehost offers 1-click installs which simply installs wordpress on your server with the click of a button. That’s it – couldn’t be more simple.

2) Domain Name

You’ll need to get yoursite.com – or whatever name you want to use. Keep this simple and use Hover.com. Their prices are as good as anyone else, its simple to set up and they are a great company. They don’t pay me to say this – I really love their service so I recommend them to you. Just use them – forget any of the others. Trust me – I’ve used them all.

3) Themes

If you don’t design or code, you’ll probably want a theme for your website. I recommend for people to use ThemeTrust. They have some wonderful themes, they have custom options and many of them are responsive design. Responsive design means the layout adjusts for the screen size. This means your site will look great on an iPhone, Tablet or PC. No more tiny text when trying to show your site on a mobile phone.

I hope this clarifies things a bit. WordPress really is the best platform out there. Use it!